2023-07-22

在 TypeScript 中使用 ESLint

＃在 TypeScript 中使用 ESLint

安裝 ESLint

1	npm install eslint --save-dev

安裝 typescript-eslint-parser

由於 ESLint 預設使用 Espree 進行語法解析，無法識別 TypeScript 的一些語法，故我們需要安裝 typescript-eslint-parser，替代掉預設的解析器，別忘了同時安裝 typescript：

1	npm install typescript typescript-eslint-parser --save-dev

由於 typescript-eslint-parser 對一部分 ESLint 規則支援性不好，故我們需要安裝 eslint-plugin-typescript，彌補一些支援性不好的規則。

1	npm install eslint-plugin-typescript --save-dev

建立配置檔案

ESLint 需要一個配置檔案來決定對哪些規則進行檢查，配置檔案的名稱一般是 .eslintrc.js 或 .eslintrc.json。
當執行 ESLint 的時候檢查一個檔案的時候，它會首先嚐試讀取該檔案的目錄下的配置檔案，然後再一級一級往上查詢，將所找到的配置合併起來，作為當前被檢查檔案的配置。
我們在專案的根目錄下建立一個 .eslintrc.js，內容如下：

module.exports = {
    parser: 'typescript-eslint-parser',
    plugins: [
        'typescript'
    ],
    rules: {
        // @fixable 必須使用 === 或 !==，禁止使用 == 或 !=，與 null 比較時除外
        'eqeqeq': [
            'error',
            'always',
            {
                null: 'ignore'
            }
        ],
        // 類別和介面的命名必須遵守帕斯卡命名法，比如 PersianCat
        'typescript/class-name-casing': 'error'
    }
}

以上配置中，我們指定了兩個規則，其中 eqeqeq 是 ESLint 原生的規則（它要求必須使用 === 或 !==，禁止使用 == 或 !=，與 null 比較時除外），typescript/class-name-casing 是 eslint-plugin-typescript 為 ESLint 增加的規則（它要求類別和介面的命名必須遵守帕斯卡命名法，比如 PersianCat）。
規則的取值一般是一個數組（上例中的 eqeqeq），其中第一項是 off、warn 或 error 中的一個，表示關閉、警告和報錯。後面的項都是該規則的其他配置。
如果沒有其他配置的話，則可以將規則的取值簡寫為陣列中的第一項（上例中的 typescript/class-name-casing）。

關閉、警告和報錯的含義如下：

關閉：禁用此規則
警告：程式碼檢查時輸出錯誤資訊，但是不會影響到 exit code
報錯：發現錯誤時，不僅會輸出錯誤資訊，而且 exit code 將被設為 1（一般 exit code 不為 0 則表示執行出現錯誤）

檢查整個專案的 ts 檔案

我們的專案原始檔一般是放在 src 目錄下，所以需要將 package.json 中的 eslint 指令碼改為對一個目錄進行檢查。由於 eslint 預設不會檢查 .ts 字尾的檔案，所以需要加上引數 –ext .ts：

{
    "scripts": {
        "eslint": "eslint src --ext .ts"
    }
}

在 VSCode 中整合 ESLint 檢查

在編輯器中整合 ESLint 檢查，可以在開發過程中就發現錯誤，極大的增加了開發效率。
要在 VSCode 中整合 ESLint 檢查，我們需要先安裝 ESLint 外掛，點選「擴充套件」按鈕，搜尋 ESLint，然後安裝即可。
VSCode 中的 ESLint 外掛預設是不會檢查 .ts 字尾的，需要在「檔案 => 首選項 => 設定」中，新增以下配置：

{
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript"
    ]
}

使用 AlloyTeam 的 ESLint 配置

ESLint 原生的規則和 eslint-plugin-typescript 的規則太多了，而且原生的規則有一些在 TypeScript 中支援的不好，需要禁用掉。
這裡我推薦使用 AlloyTeam ESLint 規則中的 TypeScript 版本，它已經為我們提供了一套完善的配置規則。

1	npm install --save-dev eslint typescript typescript-eslint-parser eslint-plugin-typescript eslint-config-alloy

在 TypeScript 中使用 TSLint

TSLint 的使用比較簡單，參考官網的步驟安裝到本地即可：

1	npm install --save-dev tslint

建立配置檔案 tslint.json

{
    "rules": {
        // 必須使用 === 或 !==，禁止使用 == 或 !=，與 null 比較時除外
        "triple-equals": [
            true,
            "allow-null-check"
        ]
    },
    "linterOptions": {
        "exclude": [
            "**/node_modules/**"
        ]
    }
}

為 package.json 新增 tslint 指令碼

{
    "scripts": {
        "tslint": "tslint --project . src/**/*.ts src/**/*.tsx",
    }
}

其中 –project . 會要求 tslint 使用當前目錄的 tsconfig.json 配置來獲取型別資訊，很多規則需要型別資訊才能生效。
此時執行 npm run tslint 即可檢查整個專案。

使用 AlloyTeam 的 TSLint 配置
AlloyTeam 為 TSLint 也打造了一套配置 tslint-config-alloy

1	npm install --save-dev tslint-config-alloy

為什麼 ESLint 無法檢查出使用了未定義的變數（no-undef 規則為什麼被關閉了）？
因為 typescript-eslint-parser 無法支援 no-undef 規則。它針對正確的介面定義會報錯。
所以我們一般會關閉 no-undef 規則。
為什麼有些定義了的變數（比如使用 enum 定義的變數）未使用，ESLint 卻沒有報錯？
因為無法支援這種變數定義的檢查。建議在 tsconfig.json 中新增以下配置，使 tsc 編譯過程能夠檢查出定義了未使用的變數：

{
    "compilerOptions": {
        "noUnusedLocals": true,
        "noUnusedParameters": true
    }
}

參考

在 TypeScript 中使用 ESLint