前端項目開發過程中，由于團隊成員每個人的開發習慣和代碼風格不同，最終提交到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插件安裝
配置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",
}
}
