TS 項目加入 ESLint 進行代碼檢查

1. 安裝依賴

   npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
   

   • eslint：ESLint 核心包。
   • @typescript-eslint/parser：用於解析 TypeScript 代碼。
   • @typescript-eslint/eslint-plugin：包含一些針對 TypeScript 的 ESLint 規則。

2. 創建 ESLint 配置文件：在項目根目錄下創建一個 ESLint 配置文件，通常命名爲 .eslintrc.js。可以使用以下示例作爲初始配置：

   module.exports = {
     parser: '@typescript-eslint/parser',
     plugins: ['@typescript-eslint'],
     extends: [
       'eslint:recommended',
       'plugin:@typescript-eslint/recommended',
     ],
     rules: {
       // 自定義規則
     },
   };
   

3. 配置 npm 腳本： 在 package.json 文件中添加一個 npm 腳本，用於運行 ESLint 檢查。例如：

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

   • src ：要驗證的目標文件夾
   • --ext：指定檢測文件的後綴

4. 運行代碼格式檢查： 在終端中運行以下命令來執行 ESLint 代碼格式檢查：

   npm run lint
   

5. 自動修復： 如果需要，可以添加以下腳本來自動修復一些可以自動修復的問題：

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

   • --fix：自動修復命令

6. 關閉對某行的檢查：有時候可能不想要檢查某一部分代碼，這時可以使用/* eslint-enable */：

   /* eslint-disable */
   const someVariable = 'some value';
   /* eslint-enable */
   

   也可以使用// eslint-disable-next-line來關閉對下一行的檢查。或者用// eslint-disable-next-line @typescript-eslint/no-explicit-any關閉對下一行的指定類型的檢查。

參考：ChatGPT、使用 ESlint 代碼檢查指南