一、项目创建

本篇博客主要是关于vue cli4.x创建项目时的一些配置选项的作用。

上面的一些选项，对应着下面的序号：
①、选择创建项目所需的预设，其中我们可以自定义项目，或者采用我们之前创建项目用到的预设。
②、选择项目中需要的一些模块这里我们选择了版本号，使用babel,使用TS,使用css预处理器，使用eslinter进行代码规范。
③、是否选择vue的版本。
④、是否使用class类型的组件。
⑤、是否对ts使用babel,因为typescript可以对ts代码进行编译，但是babel也可以对ts代码进行编译，并且也会进行一些polyfill操作。
⑥、是否使用css预处理器，这里我们采用的是less。
⑦、是否使用es-lient
⑧、当eslint在什么时候起效果，我们设置的是在保存文件时。
⑨、在什么地方保存babel，eslint等配置文件
⑩、是否保存该预设。

二、代码规范

2.1、集成editorconfig配置
我们一般在写代码时，都会进行团队开发，一个团队对于书写代码的编码风格都是不一样的，所以我们需要规范代码风格，此时我们需要引入.editorconfig文件来对代码风格进行设置。

但是在vscode中默认无法读取该文件，此时就需要安装插件EditorConfig for VS Code。

使用：

如上图所示，当我们更改缩进为10时，此时当我们在写代码时，并且按下一个tab键，此时缩进大小就变为10。原因：当我们在vscode中安装EditorConfig for VS code,并且配置.editorconfig文件，此时vscode就会读取该文件来规范代码风格。

2.2、使用prettier工具
我们在开发中如果遇到如下情况。

代码的格式不是很好，此时我们在vscode中可以使用格式化工具，让其快速格式化。此时我们需要安装prettier工具。

但是此时我们想要自己定义格式化结果，此时我们还需要一个包prettier。
安装prettier：npm install prettier -D。
配置.prettierrc文件

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

• useTabs：使用tab缩进还是空格缩进，选择false；
• tabWidth：tab是空格的情况下，是几个空格，选择2个；
• printWidth：当行字符的长度，推荐80，也有人喜欢100或者120；
• singleQuote：使用单引号还是双引号，选择true，使用单引号；
• trailingComma：在多行输入的尾逗号是否添加，设置为 none；
• semi：语句末尾是否要加分号，默认值true，选择false表示不加；

创建忽略文件

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

测试代码是否生效

1、直接在代码中保存代码
2、配置一次性修改的命令
在package.json中配置一个scripts：
 "prettier": "prettier --write ."

2.3、eslint和prettier相互兼容
我们可以会出现一个问题，就是eslint规定的规范和prettier的规范相互存在冲突。
首先在vscode中安装插件（ESLint），这样就会更快的对我们写的代码做严格匹配。

解决eslint和prettier冲突问题：
1、安装插件：在创建项目时，如果选择prettier，下面的两个插件会自动安装.

npm i eslint-plugin-prettier eslint-config-prettier -D

然后再在.eslintrc.js中进行添加相关配置。

使用extends继承规则的话，就是后面的规则覆盖前面的规则。
2.4、git Husky和eslint
虽然我们已经要求项目使用eslint了，但是不能保证组员提交的代码之前都将eslint中的问题解决掉了。也就是我们希望保证代码仓库中的代码都是符合eslint规范的，那么我们需要组件执行git commit命令时对其进行校验，如果不符合eslint规范，那么最顶通过规范进行修复。如何做到这一点？可以通过Husky工具。
husky是一个git hook工具，可以帮助我们触发git提交的各个阶段:pre-commit，commit-msg，pre-push
如何使用husky呢？
我们需要使用自动化配置命令：

npm install husky-init //安装husky-init包
npx husky-init  //执行文件

这里会做三件事
1、安装husky相关依赖

2、在项目目录下创建.husky文件夹

3、在package.json中添加脚本

此时我们需要在我们执行commit提交时，自动执行lint对应的脚本。

测试:

如上述代码所示，此时存在两处不符合eslint规范的内容。
当我们执行git commit -m "test01"

2.5、git commit规范

如上图所示，我们在进行提交的时候，提交信息是可以进行约束的，如果我们使用之前的git commit -m "test01"这样就非常不好，很难让人读懂，此时我们可以使用Commitizen工具，来对我们提交信息时进行规范。
1、安装Commitizen

npm install commitizen -D

2、安装cz-conventional-changelog,并且初始化cz-conventional-changelog
这个命令会帮助我们安装cz-conventional-changelog

并且在package.json中进行配置

此时我们执行npx cz，就会出现如下所示的配置。

下面选择本次更新的类型。

第二步选择本次修改的范围（作用域）

第三步选择提交的信息

第四步提交详细的描述信息

第五步是否是一次重大的更改

第六步是否影响某个open issue

我们也可以在script中创建一个命令来执行cz

2.6、代码提交验证
如果我们按照cz来规范提交风格，但是依然有同时通过git commit按照不规范的风格进行提交该如何办呢?
此时我们可以通过commitlint来限制提交。
1、安装@commitlint/config-conventional 和 @commitlint/cli

npm i @commitlint/config-conventional @commitlint/cli -D

2、在根目录创建commitlint.config.js文件，配置commitlint

module.exports = {
  extends: ['@commitlint/config-conventional']
}

3、使用husky生成commit-msg文件，验证提交信息：

npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

此时当我们使用git commit -m来提交不规范的信息的时候就会出现错误。