前端项目配置 git hooks 实现提交时自动语法检查、修复

1. 项目中要配置好代码检查工具

笔者这配置了eslint来检查语法错误，prettier来格式化代码；
当然，你完全可以使用其它的语法检查工具。

2. 安装插件

npm install husky lint-staged --save-dev

说明：

• husky：可以方便的让你通过 npm scripts 来调用各种 git hooks ；
• lint-staged：利用 git 的 staged 特性，可以提取出本次提交的变动文件，让你的代码检查器只处理这些文件；

3. 编辑package.json

  /** 配置 husky 添加 git hooks */
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged" /** git commit 之前执行 "lint-staged"命令 对修改过的文件进行代码检查 */
    }
   },
  /**
    * 配置 lint-staged */
    * 由于笔者当前是 Vue 项目 故检查以下几种文件 其它项目可以自行编辑要检查的文件
    * 笔者在这执行 prettier 来检查语法错误、执行 eslint 来检查代码错误
    * 当然，也可以在此执行相关命令进行 autoFix
  */
   "lint-staged": {
     "src/**/*.{js,vue,json}": [
       "prettier --check src/**/*.js src/**/*.vue src/**/*.json",
       "eslint --ext .js,.vue src/",
       "git add ."
     ],
     "src/**/*.{less,scss,sass}": [
       "prettier --check src/**/*.less src/**/*.scss src/**/*.sass",
       "git add ."
     ]
  },

4. 执行命令测试一下，没问题就可以愉快的玩耍啦 ~