前端代码风格因人而异,一个项目参与的人多了,不加强控制可能就是一个大杂烩,对开发人员来讲就是一个噩梦。
如何解决这种困境呢?
- Eslint 代码检查工具
- Prettier 代码格式化工具
- husky git hooks,git 钩子
- lint-staged 对 git 中变更的文件进行 lint 操作
Eslint 代码检查,编辑器启用 Eslint 之后,不符合规范的会自动进行提示。
Prettier 让代码变得更 pretty,会更改不符合检测要求的代码,自动格式化。
husky git 每步操作的钩子,没执行一个操作都会执行一次对应的钩子函数,执行 pre-commit 操作时,执行 Prettier 格式化脚本,即可自动的格式化代码,让 commit 之后的代码都符合 Prettier规范。
lint-staged 想想如果你在一个有一定规模的项目里突然加入一个格式化工具,是不是整个项目都要变天?lint-staged 就是用来只对变更的文件进行处理的
依赖安装
npm i -D husky lint-staged prettier eslint-plugin-prettier eslint-config-prettier
配置
项目使用 create-react-app 初始化
配置 .eslintrc
{
"env":{
"amd": true,
"browser": true,
"node": true,
"es6": true
},
"extends": [
"react-app",
"plugin:prettier/recommended",
"prettier/react"
],
"plugins": [
"prettier"
],
"parser": "babel-eslint",
"rules": {
"prettier/prettier": "error"
}
}
- eslint-config-prettier 禁用所有和 Prettier 产生冲突的规则
- eslint-plugin-prettier 把 Prettier 应用到 Eslint,配合 rules "prettier/prettier": "error" 实现 Eslint 提醒
配置 .prettierrc
具体规则参考官网 Options
{
"semi": false,
"useTabs": false,
"singleQuote": true,
"trailingComma": "es5"
}
配置 .editorconfig
编辑器识别 .editorconfig 之后可以在输入的时候带来便利,参考 EditorConfig
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 120
[*.md]
trim_trailing_whitespace = false
配置 package.json
添加 husky 和 lint-staged 配置,添加 lint、fix scripts 项
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint src/**/*.js",
"fix": "prettier --write src/**/*.js"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.js": [
"eslint --fix",
"prettier --write",
"git add"
]
},
然后运行
npm run lint
Eslint 会检测 src 下面所有 js 文件
运行
npm run fix
Prettier 会自动修复 src 下面的文件,注意,谨慎使用这个操作,它会让你的所有不合符规则的文件发生变更。你可能会惊讶的发现,文件夹中上百个文件都被改了!!!
如何避免 Prettier 一次将所有的文件格式化?
husky.hooks['pre-commit'] 是在 commit 之前会执行的命令,在执行 git commit 时,会先执行 lint-staged ,而 lint-staged 就是用来只对当前更改的文件进行检测和格式化。
lint-staged 中 "src/**/*.js" 表示只对 src 中的 js 文件进行格式化,也可以 "*.js" 表示对所有项目中的 js 文件都会格式化。后面数组中的三条命令会先后分别执行, Eslint fix 之后 Prettier 格式化,然后 git add,然后 git commit
eslint --fix -> prettier --write -> git add -> git commit -m 'xxx'
测试运行
这是 git commit 之前
执行
git add *
git commit -m 'test'
执行后
命令行