爲了實現代碼規範，我們在使用中會使用諸多插件，比如eslint、prettier、commitlint、stylelint等等，在新項目中這樣一套組合拳下來，也是稍顯繁瑣，另外還要定製配置文件，某種程度上來說是體力活。
本文的目的是介紹如何簡化配置，統一規範。
1. magic-lint
magic-lint是一款代碼規範工具，集檢查、美化於一體，能夠檢查commit信息，通過hook在代碼提交時規範代碼，裏面包含這些:
- eslint
- stylelint
- prettier
- lint-staged
- husky
- commitlint
使用magic-lint之後就不需要單獨安裝上述插件，可以無門檻使用。
1.1 安裝
npm install magic-lint --save-dev1.2 參數
Usage: magic-lint [options] file.js [file.js] [dir]
# 提交commit觸發校驗
magic-lint --commit
# 對指定路徑 lint
magic-lint --prettier --eslint --stylelint src/
# 只對提交的代碼進行 lint
magic-lint --staged --prettier --eslint --stylelint
# 對於某些場景需要指定 lint 工具的子參數
magic-lint --eslint.debug -s.formatter=json -p.no-semi
Options:
--commit, -C only check commit msg [boolean] [default: false]
--staged, -S only lint git staged files [boolean] [default: false]
--prettier, -p format code with prettier [boolean] [default: false]
--eslint, -e enable lint javascript [boolean] [default: false]
--stylelint, --style, -s enable lint style [boolean] [default: false]
--fix, -f fix all eslint and stylelint auto-fixable problems [boolean] [default: false]
--quiet, -q report errors only [boolean] [default: false]
--cwd current working directory [default: process.cwd()2. 配置
2.1 基礎配置
在package.json中添加如：
+ "husky": {
+ "hooks": {
+ "pre-commit": "magic-lint --staged --eslint --stylelint --prettier --fix"",
+ "commit-msg": "magic-lint --commit"
+ }
+ }2.2 eslint
eslint是一款代碼檢查工具，使用的時候還需添加具體的配置文件。在React項目中我們一般會使用eslint-config-airbnb。
通過執行如下命令可以看到依賴包的版本：
npm info "eslint-config-airbnb@latest" peerDependencies我們得到如下內容：
{
eslint: '^5.16.0 || ^6.1.0',
'eslint-plugin-import': '^2.18.2',
'eslint-plugin-jsx-a11y': '^6.2.3',
'eslint-plugin-react': '^7.14.3',
'eslint-plugin-react-hooks': '^1.7.0'
}如果使用的npm版本大於4，可以使用下面的命令快速安裝依賴，無需手動敲打：
npx install-peerdeps --dev eslint-config-airbnb安裝完成之後在項目根目錄創建.eslintrc.js，同樣可以使用下面的命令，或者手動創建：
./node_modules/.bin/eslint --initmodule.exports = {
"env": {
"browser": true,
"es6": true
},
"extends": "airbnb",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
}
};eslint-config-airbnb本質是eslint配置的定製合集，其實我們也可以根據自身情況維護一套配置，這樣在協作中的項目可以統一配置，避免配置的來回複製。
2.3 Prettier
Prettier和Eslint需要搭配使用，使用Prettier能讓我們在保存或者提交代碼時格式化代碼，避免不同編輯器、開發環境導致的格式問題。
Prettier的配置不多，具體的配置介紹可以看下面的介紹，大家結合eslint的規則配置即可。
這裏我們使用.prettierrc.js配置方式。
module.exports = {
// 一行最多 150 字符
printWidth: 150,
// 使用 4 個空格縮進
tabWidth: 4,
// 不使用縮進符，而使用空格
useTabs: false,
// 行尾需要有分號
semi: true,
// 使用單引號
singleQuote: true,
// 對象的 key 僅在必要時用引號
quoteProps: 'as-needed',
// jsx 不使用單引號，而使用雙引號
jsxSingleQuote: false,
// 末尾是否需要逗號
trailingComma: 'es5',
// 大括號內的首尾需要空格
bracketSpacing: true,
// jsx 標籤的反尖括號需要換行
jsxBracketSameLine: false,
// 箭頭函數，只有一個參數的時候，也需要括號
arrowParens: 'always',
// 每個文件格式化的範圍是文件的全部內容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要寫文件開頭的 @prettier
requirePragma: false,
// 不需要自動在文件開頭插入 @prettier
insertPragma: false,
// 使用默認的折行標準
proseWrap: 'preserve',
// 根據顯示樣式決定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 換行符使用 lf
endOfLine: 'lf',
};這裏同樣也有排除文件.prettierignore，語法規則和.gitignore一樣。
2.4 Stylelint
stylelint是一款css代碼規範工具，magic-lint裏面已經預置了一些配置和插件：
- stylelint-config-css-modules
- stylelint-config-prettier
- stylelint-config-rational-order
- stylelint-config-standard
- stylelint-declaration-block-no-ignored-properties
- stylelint-order
配置文件可以命名.stylelintrc.json，填充如下內容：
{
"extends": ["stylelint-config-standard", "stylelint-config-css-modules", "stylelint-config-rational-order", "stylelint-config-prettier"],
"plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"],
"rules": {
"no-descending-specificity": null,
"plugin/declaration-block-no-ignored-properties": true
}
}忽略文件的名稱是.stylelintignore，遵循.gitignore語法。
2.5 commitlint
commitlint是一款校驗commit提交信息的工具，它可以讓我們的提交信息更規範、更有可讀性，甚至可以基於提交自動生成changelog。
commit的格式要求如下，這段內容同樣也可以直接用到git提交模板：
Type(<scope>): <subject>
<body>
<footer>
# Type 字段包含:
# feat：新功能（feature）
# fix：修補bug
# docs：文檔（documentation）
# style： 格式（不影響代碼運行的變動）
# refactor：重構（即不是新增功能，也不是修改bug的代碼變動）
# test：增加測試
# chore：構建過程或輔助工具的變動
# scope用於說明 commit 影響的範圍，比如數據層、控制層、視圖層等等。
# subject是 commit 目的的簡短描述，不超過50個字符
# Body 部分是對本次 commit 的詳細描述，可以分成多行
# Footer用來關閉 Issue或以BREAKING CHANGE開頭，後面是對變動的描述、
# 以及變動理由和遷移方法例子：
git commit -m 'feat: 增加用戶搜搜功能'
git commit -m 'fix: 修復用戶檢測無效的問題'magic-lint已經內置@commitlint/config-conventional配置方案，它裏面包含了以下幾個type:
'build',
'ci',
'chore',
'docs',
'feat',
'fix',
'perf',
'refactor',
'revert',
'style',
'test'3. 寫在最後
在前端開發中，需要配置的內容太多太多了，大把的時間花在配置上就真的變成了"前端配置師"。
可能這也是我們都願意造輪子的原因了，不過最終在工作中能起到作用的輪子就是好輪子。同樣如果只是使用別人的輪子，自己又如何能成長呢！
本文同步發表於作者博客: React項目快速搭配eslint，prettier，commitlint，lint-staged
