集成 husky 和 lint-staged
我们在项目中已集成 ESLint 和 Prettier，在编码时，这些工具可以对我们写的代码进行实时校验，在一定程度上能有效规范我们写的代码，但团队可能会有些人觉得这些条条框框的限制很麻烦，选择视“提示”而不见，依旧按自己的一套风格来写代码，或者干脆禁用掉这些工具，开发完成就直接把代码提交到了仓库，日积月累，ESLint 也就形同虚设。
所以，我们还需要做一些限制，让没通过 ESLint 检测和修复的代码禁止提交，从而保证仓库代码都是符合规范的。
为了解决这个问题，我们需要用到 Git Hook，在本地执行git commit的时候，就对所提交的代码进行 ESLint 检测和修复（即执行eslint --fix），如果这些代码没通过 ESLint 规则校验，则禁止提交。
实现这一功能，我们借助 husky lint-staged 。
husky —— Git Hook 工具，可以设置在 git 各个阶段（pre-commit、commit-msg、pre-push等）触发我们的命令。
lint-staged —— 在 git 暂存的文件上运行 linters。
自动配置（推荐）
使用husky-init命令快速在项目初始化一个 husky 配置。
npx husky-init
我们输入 y
自动配置完毕项目根目录会出现 .husky 文件夹。
package.json 文件会增加一条 prepare 命令，devDependencies 会增加 husky 。
// package.json
{
"scripts": {
"prepare": "husky install"
},
"devDependencies": {
"husky": "^7.0.0"
}
}
husky 只是被添加到了 devDependencies 中，还需安装一下。
npm install
husky 包含很多hook（钩子），常用有：pre-commit、commit-msg、pre-push。这里，我们使用pre-commit来触发 ESLint 命令。
修改.husky/pre-commithook 文件的触发命令：
eslint --fix ./src --ext .vue,.js,.ts
上面这个pre-commithook 文件的作用是：当我们执行git commit -m "xxx"时，会先对src目录下所有的.vue、.js、.ts文件执行eslint --fix命令，如果 ESLint 通过，成功commit，否则终止commit。
但是又存在一个问题：有时候我们明明只改动了一两个文件，却要对所有的文件执行eslint --fix。假如这是一个历史项目，我们在中途配置了 ESLint 规则，那么在提交代码时，也会对其他未修改的“历史”文件都进行检查，可能会造成大量文件出现 ESLint 错误，显然不是我们想要的结果。
我们要做到只用 ESLint 修复自己此次写的代码，而不去影响其他的代码。所以我们还需借助一个神奇的工具 lint-staged 。
lint-staged 这个工具一般结合 husky 来使用，它可以让 husky 的hook触发的命令只作用于git add那些文件（即 git 暂存区的文件），而不会影响到其他文件。
接下来，我们使用 lint-staged 继续优化项目。
安装 lint-staged
npm i lint-staged -D
在package.json里增加 lint-staged 配置项
"lint-staged": { "*.{vue,js,ts}": "eslint --fix" },
这行命令表示：只对 git 暂存区的.vue、.js、.ts文件执行eslint --fix。
修改.husky/pre-commithook 的触发命令为：npx lint-staged
至此，husky 和 lint-staged 组合配置完成。
现在我们提交代码时就会变成这样：
假如我们修改了scr目录下的test-1.js、test-2.ts和test-3.md文件，然后git add ./src/，最后git commit -m "test..."，这时候就会只对test-1.js、test-2.ts这两个文件执行eslint --fix。如果 ESLint 通过，成功提交，否则终止提交。从而保证了我们提交到 Git 仓库的代码都是规范的。
提交前test-1.js、test-2.ts
提交后test-1.js、test-2.ts自动修复代码格式
无论写代码还是做其他事情，都应该用长远的眼光来看，刚开始使用 ESint 的时候可能会有很多问题，改起来也很费时费力，只要坚持下去，代码质量和开发效率都会得到提升，前期的付出都是值得的。
这些工具并不是必须的，没有它们你同样可以可以完成功能开发，但是利用好这些工具，你可以写出更高质量的代码。特别是一些刚刚接触的人，可能会觉得麻烦而放弃使用这些工具，失去了一次提升编程能力的好机会。
JPG