前端项目开发过程中，由于团队成员每个人的开发习惯和代码风格不同，最终提交到git仓库的代码格式不统一对团队间的协作产生阻碍，因此使用工具来自动和强制统一代码格式是一个好的选择。
Git Hooks
为了保证提交到git仓库的代码是整洁、格式统一的，通常需要使用Git Hooks。Git Hooks是在git操作的某些时机自动执行的一些脚本，常见的Git Hooks如 pre-commit、post-merge、pre-push等。详情见Git Hooks官方学习文档。
Git Hooks存储在git目录下的hooks子目录中，即绝大部分项目中的 .git/hooks。如下：
如果直接去该目录下编写脚本，对于大部分开发人员来说不太友好，因此在前端项目中可以使用husky这个npm库来简化Git Hooks脚本的编写，见https://www.npmjs.com/package/husky。
husky简单介绍
- 安装依赖
yarn add -D husky
- 在package.json里添加要执行的git hooks命令，如：
// package.json
{
"husky": {
"hooks": {
"pre-commit": "npm test",
"post-merge": "sh test.sh",
"pre-push": "node test.js",
"...": "..."
}
}
}
这里的hooks对应.git/hooks下的hooks脚本，里面可以放一些npm命令或者其他自定义的命令。
lint-staged简单介绍
如果要在pre-commit时自动执行代码格式校验，对于整个项目文件执行校验命令通常是不合适的，因为代码库的代码通常是整洁的，且每个提交改动的文件一般比较少，因此可以使用lint-staged工具，只对git暂存区的文件执行脚本。见https://www.npmjs.com/package/lint-staged。
- 安装依赖
yarn add -D lint-staged
- 结合
husky，在提交代码前只对暂存区的代码执行命令，配置如下：
// package.json
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js}": [
"sh test.sh"
]
},
}
lint-staged会自动将暂存区的文件当作参数拼接在要执行的命令后面，以上命令相当于执行sh test.js ${files}，对于v10.x之后的版本，还会在执行命令后自动执行git add命令。
eslint
见https://eslint.org/docs/user-guide/getting-started
prettier
见https://prettier.io/docs/en/install.html
与eslint集成见https://prettier.io/docs/en/integrating-with-linters.html
stylelint
见https://stylelint.io/user-guide/get-started
editorconfig
见https://editorconfig.org/，需配合编辑器插件生效
vscode支持eslint和stylelint的配置
vscode插件安装
- ESLint
- stylelint
- EditorConfig for VS Code
配置settings.json
{
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"stylelint.validate": [
"css",
"less",
"postcss",
"sass",
"scss"
]
}
常用基础配置（方便拷贝）
文件清单
- .eslintrc
- .prettierrc
- .stylelintrc.json
- package.json
- .editorconfig
// .eslintrc
{
"extends": ["plugin:prettier/recommended"],
"rules": {
"prettier/prettier": "warn"
}
}
// .prettierrc
{
"singleQuote": true,
"trailingComma": "all",
"tabWidth": 2,
"useTabs": false,
"printWidth": 100,
"overrides": [
{
"files": ".prettierrc",
"options": { "parser": "json" }
}
]
}
// .stylelintrc.json
{
"extends": "stylelint-config-standard",
"rules": {
"color-no-invalid-hex": true,
"block-no-empty": true,
"selector-pseudo-class-no-unknown": [ true, {
"ignorePseudoClasses": ["global"]
} ]
}
}
// package.json
// scripts里的命令用于手动校验
{
"scripts": {
"lint": "eslint src/**/*.{js,jsx} --fix",
"lint:style": "stylelint src/**/*.{css,less} --fix"
},
"devDependencies": {
"eslint": "^5.4.0",
"eslint-config-prettier": "^6.11.0",
"husky": "^4.2.5",
"lint-staged": "^10.2.2",
"stylelint": "^13.3.3",
"stylelint-config-standard": "^20.0.0"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx}": [
"eslint --fix --max-warnings 0"
],
"*.{css,less}": [
"stylelint --fix --max-warnings 0"
]
}
}
# .editorconfig
# http://editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[Makefile]
indent_style = tab
umi项目的eslint配置和插件列表
// .eslintrc
{
"extends": ["eslint-config-umi", "plugin:prettier/recommended"],
"rules": {
"prettier/prettier": "warn",
"react-hooks/exhaustive-deps": "off",
"jsx-a11y/anchor-is-valid": "off",
"eqeqeq": "off"
}
}
{
"devDependencies": {
"babel-eslint": "^9.0.0",
"eslint": "^5.4.0",
"eslint-config-prettier": "^6.11.0",
"eslint-config-umi": "^1.4.0",
"eslint-plugin-flowtype": "^2.50.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.11.1",
}
}