專案組 eslint 統一配置及疑難解決
阿新 • • 發佈：2021-02-02
背景
專案組前端程式碼eslint久失維護，大家有的人有程式碼規範，有的人沒有。新來的程式碼規範也是從老的手裡copy一份。每個人eslint外掛的版本、配置、程式碼項均不同。導致改程式碼的時候，為了避免自動fix帶來的大量程式碼改動，不得不暫時關閉eslint，改完後，無規則校驗上庫。程式碼規範缺乏校驗，上庫程式碼質量日益下降。
第一步
按照可信認證規則（標準程式碼規範）配置eslintrc檔案，外掛的配置自不必說。為了支援js/ts/jsx/tsx ，需要安裝eslint的4個外掛,配置在plugin中。注意為了支援ts，parser需要指定為@typescript-eslint/parser
ts規則。
- eslint-react
- eslint-react-hooks
- eslint-typescript
- [email protected]
編寫eslint fix指令碼，全域性fix專案中的程式碼。共計上庫改動600餘個檔案。
eslintrc.js
module.exports = {
'root':true,
'env': {
'browser': true,
'es6': true,
'node': true
},
'globals': {
'Atomics': 'readonly' "scripts": {
"eslint": "eslint src scripts config --ext .jsx --ext .tsx --ext .js --ext ts -o eslint-report.txt -c .eslintrc.js",
"eslint-fix": "eslint --fix src scripts config --ext .jsx --ext .tsx --ext .js --ext ts -c .eslintrc.js",
},
第二步
通過npm run eslint 生成報告，手動修改無法fix的問題，例如重複props、繞過setState直接修改state、或者引數重賦值等問題累計60餘處。
第三步
配置 eslint-vscode外掛。統一使用2.1.14版本，使用通用的工作區設定：
{
"eslint.run": "onType",
"eslint.format.enable":true,
"eslint.options": {
"extensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.suggestSelection": "first"
}
第四步
設定webpack編譯時校驗（僅限開發模式）
rules: [
// Disable require.ensure as it's not a standard language feature.
{ parser: { requireEnsure: false } },
// First, run the linter.
// It's important to do this before Babel processes the JS.
isEnvDevelopment ? {
test: /\.(js|mjs|jsx|ts|tsx)$/,
enforce: 'pre',
use: [
{
options: {
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint')
},
loader: require.resolve('eslint-loader')
}
],
include: paths.appSrc
} : {},
]
問題
1、eslint規則衝突 導致無限fix
解決eslint規則衝突的問題。eslint規則衝突會導致不論是eslint-vscode外掛還是npm eslint，無限fix程式碼的過程。例如最常見的，eslint 原始規則 indent，設定程式碼應該的間隔，極容易與react外掛配置的一些規則衝突。這時候，就需要我們對react字尾（jsx、tsx）檔案做覆蓋規則處理：
//--eslintrc.js
"overrides": [
{
"files":["*.tsx","*.jsx"],
"rules": {
"react/jsx-indent-props": 0, //禁用驗證JSX中的props縮排
}
}
]
2、專案成員明明eslint配置全部一致，實際規則卻不一致
這是由於eslint在查詢配置檔案時，會不斷的冒泡向上查詢規則直到系統根路徑。如果eslintrc.js沒有配置root:true。參加這裡，則eslint會不斷的在電腦中尋找配置檔案。部分成員根目錄中配置了額外規則，導致覆寫的時候出現問題。在eslintrc.js中新增即可
'root':true
五、成效
專案成員使用統一的eslint規範，再也不用害怕ctrl+s改壞原來的程式碼。且存在程式碼壞味道的程式碼會在開發階段的門禁就被攔截掉，避免引入更大的問題。
| 專案 | Value |
|---|---|
| 自動修復檔案數 | 583 |
| 自動修復程式碼行數 | 15000 |
| 手動修復程式碼問題（風險問題） | 56 |