目前在梳理团队项目时，发现很多代码不规范的问题，各式命名杂糅，风格迥异，看着就像一锅大杂烩，不利于代码的可读及维护。于是决定引入工具，采用eslint+prettier+husky+lint-staged方式，强制代码格式的统一。因为项目是使用create-react-app建立，因此在该脚手架上进行修改。
eslint与prettier
eslint重在代码质量，虽然也可以格式化，但是不如prettier专业。因此，采用eslint来规范代码，prettier来统一代码格式。eslint与prettier的协作，可以参考Integrating with Linters#ESLint
配置
一、 安装prettier、eslint-config-prettier、eslint-plugin-prettier和eslint-plugin-compat。
- eslint-config-prettier用于禁用与prettier冲突的规则。
- eslint-plugin-prettier将prettier当做eslint规则来运行。
- eslint-plugin-compat检测使用的函数是否兼容浏览器。
二、移除 package.json 中的 eslintConfig 字段，创建 .eslintrc.js 文件，添加以下内容：
module.exports = {
extends: [
"react-app",
"plugin:compat/recommended",
"plugin:prettier/recommended"
],
env: {
browser: true,
node: true,
es6: true
},
settings: {
react: {
version: "999.999.999"
}
},
rules: {
"jsx-a11y/anchor-is-valid": "off",
"spaced-comment": "error",
"id-length": "error",
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
"no-const-assign": "error",
"new-cap": "error"
}
};rules里面的内容可根据团队规范自定义添加。
plugin:prettier/recommended需作为最后一个扩展，它做了三件事：
- 启用“eslint-plugin-prettier”。
- 在rules中设置“prettier/prettier”为error。
- 继承“eslint-config-prettier”的配置。
问题
- 若是安装了ESlint 6.X版本，在vscode出现类似“Failed to load plugin 'compat' declared in 'test\mytest\.eslintrc.js': Cannot find module 'eslint-plugin-compat'”安装插件失败的信息提示，则可以通过将eslint版本降到5.X版本来解决。
- 出现该警告“Warning: React version was set to "detect" in eslint-plugin-react settings, but the "react" package is not installed. Assuming latest React version for linting.”，则可在.eslintrc.js中加入以下内容来解决。
settings: {
react: {
version: "999.999.999"
}
},husky和lint-staged
- husky:在 .git/hooks 中写入 pre-commit 等脚本激活钩子，在 Git 操作时触发。
- lint-staged:参考 Git 中 staged 暂存区概念，在每次提交时只检查本次提交的文件。保证了不会修改别人的文件。
因为husky可以调用githooks，lint-staged允许我们对git中的staged files运行脚本，两者相加，可用于防止团队成员无视eslint的报错，将代码风格不符合规范的代码提交到git仓库中。
配置
一、安装husky和lint-stagedyarn add husky lint-staged --dev
二、在scripts中添加
"lint-staged": "lint-staged",
"lint-staged:js": "eslint --ext .js,.jsx"在package.json中添加以下内容
"husky": {
"hooks": {
"pre-commit": "npm run lint-staged"
}
},
"lint-staged": {
"**/*.{js,jsx,json}": [
"prettier --write",
"git add"
],
"**/*.{js,jsx}": "npm run lint-staged:js"
},钩子工作流程说明
当开发者执行 git commit 操作时：
- 由于安装
husky后其在.git/hooks中写入了pre-commit钩子，该钩子在 git commit 执行时被触发，执行npm run lint-staged脚本（即lint-staged命令）； -
lint-staged的配置，就是利用linters对暂存区的文件路径应用过滤规则，匹配的文件将执行后面配置的任务，这里的任务就是调用项目中的prettier格式化文件，将格式化好的文件通过git add指令加入暂存区。调用项目中的eslint检查文件，发现报错就终止流程，不再进行commit操作。两任务并行运行。
参考自：
Formatting Code Automatically
eslint-plugin-prettier
husky
lint-staged
ESLint fails to load plugins when using ESLint 6.x
利用 git 钩子做代码提交前的检查
React 15.x升级到16.x 运行环境报警告的解决方案