eslint
作用： 通过制定规则，检查代码，代码格式美化，避免bug的产生
npm install eslint --save-dev
./node_modules/.bin/eslint --init
- 按照团队习惯配置.eslintrc
- 对于不需要进行检查文件，配置到.eslintignore中
pretitter
作用：代码美化
- 安装
- eslint-plugin-prettier： 将prettier作为eslint的rule
- eslint-config-prettier：当prettier规则和eslint规则冲突时，关闭prettier规则
Husky
作用：防止bad commit
lint-staged
作用：在代码提交前执行预定义的task，保证代码质量
执行流程：
- 待提交的代码git add 添加到暂存区；
- 执行 git commit；
- husky注册在git pre-commit的钩子函数被调用，执行lint-staged；
- lint-staged 取得所有被提交的文件依次执行写好的任务（ESLint 和 Prettier）；
- 如果有错误（没通过ESlint检查）则停止任务，同时打印错误信息，等待修复后再执行commit；
- 成功commit，可push到远程
package.json
{
"scripts": {
"precommit": "lint-staged"
},
"devDependencies": {
"babel-eslint": "^10.0.3",
"eslint": "^6.4.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.3.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-react": "^7.14.3",
"eslint-plugin-react-hooks": "^1.7.0",
"lint-staged": "^9.2.5",
"prettier": "^1.18.2"
},
"lint-staged": {
"src/**/*.js": [
"eslint --fix --ext .js",
"prettier --write",
"git add"
]
}
}
.prettierrc
{
"printWidth": 120,
"semi": false,
"singleQuote": true,
"trailingComma": "es5"
}
.eslintrc
{
"env": {
"browser": true,
"es6": true
},
"extends": ["airbnb", "prettier/react", "prettier"],
"globals": {
// 预置的全局变量
},
// 使得高级语法能够被识别，如装饰器
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"legacyDecorators": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": ["jsx-a11y", "react-hooks"],
"rules": {
// 根据项目需要，自定义lint规则
}
}
遇到的问题
- 一个项目中有多个package，husky的安装基于.git，子项目中安装husky，只有最后一次安装生效，在顶级目录下使用husky，将precommit定义在子目录中
{
"scripts": {
"precommit:client": "cd client && npm run precommit",
"precommit:server": "cd server && npm run precommit"
},
"devDependencies": {
"husky": "^3.0.5",
"npm-run-all": "^4.1.5"
},
"husky": {
"hooks": {
"pre-commit": "npm-run-all precommit:*"
}
}
}
- vscode中es高级语法不支持，需要创建jsconfig.json，并添加如下配置
jsconfig.json
{
"include": ["src/**/*"],
"compilerOptions": {
"experimentalDecorators": true
}
}
- 一个项目中有多个package时，如果只想packageA添加eslint，需要进行如下配置，否则不生效
在更目录下创建.vscode目录，然后创建settings.json，配置如下
{
"editor.formatOnSave": false,
"eslint.autoFixOnSave": true,
"eslint.enable": true,
"eslint.workingDirectories": ["./packageA"]
}
- webpack中alias设置的短路径不过问题，使用eslint-import-resolver-alias解决
在.eslintrc中添加如下配置
"settings": {
"import/resolver": {
"alias": {
"map": [
["aaa", "./src/aaa"],
["common", "./src/common"]
],
"extensions": [".js", ".jsx", ".json"]
}
}
},
参考：
使用 ESlint、lint-staged 半自动提升项目代码质量
