编程规范解决方案之ESLint + Git Hooks

前端项目的编程规范可按照如下解决方案进行，
项目创建->依赖安装->插件配置->git提交各个流程操作如下：

一、编程规范问题

编程格式规范的问题，大体可以分为两类：
1、代码格式规范：通过eslint+prettier+vscode配置来配合处理；
2、Git提交规范：使用husky来监测git hooks钩子，并且通过pre-commit、lint-staged配合完成只检查本次修改更新的代码，并且在出现错误的时候自动修复且推送。

二、Eslint

1、2013年6月创建的开源项目；
2、目的是提供一个插件化的JavaScript代码检测工具；
3、.eslintrc.js是eslint的配置文件，各属性释义如下：

三、Prettier

1、它是一个代码格式化工具；
3、可以直接集成到vscode；
4、可以在保存时让代码直接符合eslint标准。

四、Eslint与prettier配合解决代码格式问题

1、vscode安装插件prettier - code formatter；
2、项目根目录创建.prettierrc文件，写入如下配置：

{
  "singleQuote": true, //使用单引号包含字符串
  "semi": false, //不添加行尾分号
  "trailingComma": "none" //不添加行尾逗号
}
1
2
3
4
5

3、Vscode配置在保存时自动格式化代码：
Vscode->设置->settings->搜索框输入save->勾选editor:format on save

至此，已经可以达到保存代码时自动格式化代码的目的了。
如果用户有以前的旧项目不想使用自动保存，可以勾选worksspace的自动保存，取消勾选user的自动保存。
此外，还有一些设置需要修改，如下：
vscode默认一个tab=4个空格，而eslint希望一个tab=2个空格：
Vscode->设置->settings->editor:tab size改成2

五、Git hooks

git hooks也叫git钩子或git回调方法，代表git在执行某个事件之前或之后需要进行的一些其他额外的操作；
husky是git hooks的工具，借助 husky 我们可以在 git 提交的不同生命周期进行一些自动化操作，可以防止一些不好的 commit 或者 push，操作步骤如下：
1、安装依赖：npm install husky --save-dev；
2、手动启动hooks，生产.husky文件夹：npx husky install；
3、在package.json中设置prepare命令：husky install；

4、执行prepare命令：npm run prepare；
5、执行成功，提示：

此处prepare的作用是：我们不可能每次 install 之后都需要手动去启用husky，如果开发A配置好了并提交，开发B拉下代码，装完依赖还需要去手动启用。
解决这个问题的办法，在package.json的里面添加prepare配置：
也就是在husky安装完之后，自动关联启用。这样除了开发A需要关心husky配置之外，其他后续的开发人员是不需要关心husky配置的。

六、Pre-commit

在eslint与prettier配合解决代码格式问题时，只能处理本地的代码格式问题，这需要我们手动在vscode中配置自动保存才可以，但是要是有人忘了配置怎么办，他把代码写的乱七八糟的就提交到git上了怎么办，所以我们还需要一种方式来规避这种风险，就用到了husky配合eslint来实现。
我们期望用过husky监测pre-commit钩子，在钩子下执行指令去进行相关检测。
pre-commit的调用时机是git commit 执行之前，可以按需指定是否要拒绝本次提交，可以用git commit --no-verify绕过。
执行npx husky add .husky/pre-commit
在.husky文件夹下会生成pre-commit文件，生成的文件内容如下：

将undefined修改为：npx eslint --ext .js,.vue src，如下：

此时，git commit时，如果文件格式有误，将给出相应提示，无法提交。

七、Lint staged

我们通过pre-commit处理了检测代码的提交规范问题，当我们提交代码时，会检测所有的代码格式规范。因此这样存在两个问题：
1、我们只修改了个别文件，没有必要检测所有的文件代码格式；
2、它只能给我们提示出对应的错误，我们还需要手动的进行代码的修改。
处理以上两个问题，就用到了lint-staged，它可以只检查本次修改更新的代码，并在出现错误的时候，自动修复且推送；
安装依赖：npm install lint-staged -save-dev，并添加package.json的lint-staged配置，如下：

"lint-staged": {
    "*.{js,vue}":[
      "eslint --fix",
      "git add"
    ]
  }
1
2
3
4
5
6

修改pre-commit文件执行npx lint-staged
至此，已完成全部检测工作，git commit时只检查本次修改更新的代码，并在出现错误的时候，自动修复且推送。
PS：
git commit时触发pre-commit钩子，运行lint-staged命令，对*.js,.vue执行eslint命令.