前端工程化配置-husky + eslint + lint-staged
配置目标：每次代码提交前，进行代码格式校验，如未通过则禁止提交，可通过命令进行批量格式修复
配置步骤如下：
一、第一步eslint的配置：
1、下包
npm i eslint -D
或者
yarn add eslint
2、配置 ESlint
npx eslint --init
然后根据弹出的内容区选择你需要的规范。
1、 你想怎么使用ESLint？
2、 你的项目使用哪个规范？
3、你的项目使用哪个框架开发？
4、你的项目使用 TypeScript 了吗？
5、你的代码在哪里运行？
6、你希望你的配置文件的格式是什么？
7、需要再额外安装一些依赖包
当你的文件栏中出现 .eslintrc.js，就说明安装成了。
二、第二步husky(哈士奇)配置
1.安装 husky
npm install husky --save-dev
or
yarn add husky --save-dev
2.修改 package.json 中 scripts 字段
"scripts": {
"prepare": "husky install"
}
3.生成 .husky 文件夹
npm run prepare
or
yarn prepare
此时在当前项目的根目录下会生成一个 .husky 文件夹
4.生成 pre-commit 文件
npx husky add .husky/pre-commit
or
yarn husky add .husky/pre-commit
在当前项目的 .husky 文件夹中创建了一个 pre-commit 文件
5.修改 pre-commit 文件
npx lint-staged
6.安装 lint-staged
lint-staged 是文件过滤器，它只会校验你提交或者说你修改的部分内容
npm install lint-staged --save-dev
or
yarn add lint-staged --save-dev
7.配置 package.json
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx}": [
"prettier --write",
"eslint --fix"
]
}
8.测试
找一个文件测试是否配置成功，增加一行无法通过 eslint 的代码
提交时就会报错拦截
最终配置截图：
你以为到此为止了？
其实并没有，现在还不是毕竟完美的，针对react框架的话，应该基本够了，但是针对vue的话还存在一些瑕疵，如下：
eslint只对vue中js部分有效，template和css没有校验，基于此进行升级，需要搭配prettier进行使用，有的道友要问，为什么要搭配使用呢，我就想用其中的一种不行吗？答案是需要根据你具体的需求去进行组合，虽然说 ESLint 其实也具备一定的代码风格的格式化能力，但是在实践中，我们一般采用 ESlint 来做代码质量的约束，用 Prettier 来做代码风格的约束。
需要安装一些插件
"@vue/eslint-config-prettier": "^6.0.0", "eslint-config-prettier": "^6.15.0", "eslint-plugin-prettier": "^3.1.4", "prettier": "^1.19.1", "prettier-eslint": "^11.0.0",
然后.eslintrc文件更改一下配置：
然后关掉vscode编译器重启就生效了
下面对安装以上插件做一些解释：
其实核心思路就是把prettier集合到eslint中，即扩展其功能
规则冲突
当 ESLint 的规则和 Prettier 的规则相冲突时，就会发现一个尴尬的问题，用其中一种来格式化代码，另一种就会报错。
prettier 官方提供了一款工具 eslint-config-prettier 来解决这个问题。
本质上这个工具其实就是禁用掉了一些不必要的以及和 Prettier 相冲突的 ESLint 规则。
整合使用
上面介绍的工具，仅仅只是将部分 ESLint 规则给禁用了，避免 Prettier 格式化之后的代码导致 ESLint 报错而已，如何将两者结合起来使用呢？
prettier 官方提供了一个 ESLint 插件 eslint-plugin-prettier。
这个插件的主要作用就是将 prettier 作为 ESLint 的规则来使用，相当于代码不符合 Prettier 的标准时，会报一个 ESLint 错误，同时也可以通过 eslint --fix 来进行格式化。