2021.1.22 更新
当 vscode 的自动保存操作中加入了 eslint 的规则时，保存自动 fix 命中的规则，此时一定要注意，否则会出现些意想不到的问题。 比如在使用 useEffect 时，第一个函数中的一些变量或调用的方法在fix时就可能会自动修复后加入到依赖数组中，然后导致这个effection不停的执行，死循环一样。
解决方法可以在 当前文件代码的 eslint 小灯泡提示那选择相应的忽略操作，或者直接将 vscode 保存时的规则中去掉 eslint 的fixall 配置， 即删掉下边的配置（在vscode 中 Ctrl+Shift+P，输入open settings (json) ）
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
===================================================================================
2021.1.20 更新
现在的项目一直用的 react-app 的规则集，命中规则后会在控制台中展示，但是-------没有人改，有问题的没人改！ 于是越积越多，控制台上满的eslint的提示，其它日志根本看不到。非常不爽，所以用了就要严格要求，不严格执行干脆就不要用了。
===================================================================================
项目使用create-react-app脚手架创建，因其自带有安装eslint, 故不必安装。若自行安装，则项目启动时会提示冲突且需要解决冲突后才能启动。
create-react-app脚手架创建项目后，在 package.json 中会有如下配置
"eslintConfig": {
"extends": "react-app"
},
"devDependencies": {
...
}
以上代码片段并不强制约束提交时要改好检查出来的问题，它只是在启动项目后将eslint规则集检查到的问题展示在控制台中，若要强制约束，则需要使用husky在代码git commit时做验证，不通过则改到通过为止，就问你怕不怕！（瑟瑟发抖~）。
本文介绍相应的配置方法，各工具介绍可参附录自行查阅。
eslintConfig 配置
话说常用的规则集有三个，按宽松到严格分别为 standard, google, airbnb。更多
这里用的是 CRA 默认的 react 的规则集，再加上 prettier 的配置：
"eslintConfig": {
"extends": [
"react-app",
"prettier"
],
"plugins": [
"prettier"
],
"rules": {
"prettier/prettier": "error"
}
}
...
上边 extends：["react-app"] 与 extends:["airbnb", "airbnb/hooks"]区别应该不大，常用的验证规则如 no-unused-vars,jsx-a11y/alt-text,react-hooks/exhaustive-deps,array-callback-return,no-dupe-keys 等都有。"react-app"的具体规则集没找到，只找到这么个东西 eslint-config-react-app，因为对这个要求不高，一般能用就行，也就不深究了。
"prettier"这个一定要配置在 “extends"数组的最后，确保格式化时使用的是 prettier 的规则。
关于 eslintConfig 配置可以参考 Extending or replacing the default ESLint config
husky 和 lint-staged 配置
// package.json配置
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx}": [ // 此处仅验证 js 方件即可，json文件验证会有明显的规则不符的问题，
"eslint --fix", // 仅检验当前提交的文件
// "eslint --ext .tsx,.ts --fix ./src", 后边加 ./src 时会验证 src 下的所有对应后缀文件
"prettier --write",
"git add"
]
}
以上参考从零配置 Eslint + Prettier + husky + lint-staged 构建前端代码工作流
如果用的 creat-react-app 生成的项目，会默认带一个 eslint, 如果你和你自行安装的版本不一致否项目启动时会有提示，然后项目启动失败
解决办法建议删除你安装的即可。
项目启动后，如果eslint的检测中有 node-modules路径的文件，则可以加一个.eslintignore配置文件，配置内容为
node_modules/**
refer: Set up ESLint, Prettier and pre-commit hooks using Husky for WordPress from Scratch
.prettierignore refer:prettier
Add a .prettierignore to let your editor know which files not to touch, as well as for being able to run prettier --write . to format the entire project (without mangling files you don’t want, or choking on generated files).
相关安装包
husky 是一个 Git Hook 工具,它可以在代码提交前允许我们做一些事情，从而防止一些不好的代码被提交上去。
lint-staged 是针对工作区修改的文件,这对我们只希望处理将要提交的文件将会非常有用。
prettier 代码格式化神器
eslint-config-prettier 解决eslint与prettier冲突配置
参考文档：
Extending or replacing the default ESLint config create-react-app 文档中关于 ESLint config 的配置扩展
eslint-config-airbnb
eslint安装及使用
eslint-plugin-jsx-a11y 静态AST检查器，用于检查JSX元素上的可访问性规则。
这篇文章其实有个问题没解决， 就是 create-react-app 自带的 eslint, 在 windows 执行到 lint-stage:["eslint --fix"] 这一步时，总是会提示没有找到 eslint。 解决思路应该是要将eslint 加到执行路径中,但我没测试。马上又要回到mac的天下了。以后再折腾吧
网友评论