學習資源

• 程式碼檢查

TSLint已在 2019 年官方宣布停止維護，並建議改用 typescript-eslint，可以在這篇文章閱讀更多相關資訊。

什麼是程式碼檢查？

程式碼檢查是一種自動檢查程式碼品質的方法，通常包括檢查程式碼風格、最佳實踐、潛在錯誤和程式碼可維護性等方面。程式碼檢查的目的是提高程式碼質量，減少錯誤，並確保團隊遵循一致的程式碼風格和慣例。

在 JavaScript 專案中，一般使用 ESLint 來進行程式碼檢查。透過安裝使用 TypeScript 外掛（如 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin），ESLint 就可以檢查 TypeScript 程式碼。

為什麼需要程式碼檢查？

雖然 TypeScript 編譯器（tsc）在編譯過程中能夠對語法錯誤、型別錯誤和其他一些基本錯誤進行檢查，它卻無法確保專案中的程式碼風格保持一致。這就是程式碼檢查工具（如 ESLint）所要解決的問題。程式碼風格一致性可能包括以下幾個方面：

• 縮排要用空格還是用 Tab？縮排數量要是四個還是兩個？

• 用單引號或是雙引號？

• 程式碼尾端是否要有分號？

• 是否應該要強制使用 === 而非 ==？

• 介面的命名是否應該要以 I 開頭？

如何在 TypeScript 中使用 ESLint

1. 安裝 ESLint 及相關套件

    # npm
    npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript
   
    # yarn
    yarn add --dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript
   

2. 建立 ESLint 配置檔案

   在專案根目錄下，建立一個名為 .eslintrc.js 的檔案。這將是我們的 ESLint 配置檔案，我們可以在其中設定規則和外掛。在 .eslintrc.js 文件中加入以下內容：

    module.exports = {
      parser: '@typescript-eslint/parser',
      parserOptions: {
        project: true,
        tsconfigRootDir: __dirname,
      },
      plugins: ['@typescript-eslint'],
      extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:@typescript-eslint/recommended-requiring-type-checking'
      ],
      rules: {
        // 在此添加自定義規則
      },
    };
   

   配置檔案選項說明如下：

   • /* eslint-env node */：這是一個 ESLint 註解，它告訴 ESLint 此檔案的環境是 Node.js，因為在 Node.js 環境中，全域變數和全域對象不同於瀏覽器環境。

   • parser：指定要使用的解析器。

     • @typescript-eslint/parser：使用了 @typescript-eslint 外掛中的解析器，用於解析 TypeScript 語法並產生 AST（Abstract Syntax Tree，抽象語法樹）。

   • parserOptions：指定解析器的選項。

     • project：告訴 ESLint 如何解析 TypeScript 程式碼，設定為 true 表示啟用對 TypeScript 程式碼的支援。

     • tsconfigRootDir：指定 TypeScript 設定檔案所在的根目錄。在這個例子中，__dirname 是一個 Node.js 全域變數，代表目前模組的目錄路徑。

   • plugins：指定要使用的外掛。

     • @typescript-eslint：使用了 @typescript-eslint 外掛，它包含了針對 TypeScript 的規則。

   • extends：指定要繼承的規則設定。

     • eslint:recommended：使用了 ESLint 的官方推薦規則。

     • plugin:@typescript-eslint/recommended：使用了 @typescript-eslint 外掛中的推薦的 TypeScript 規則。

     • plugin:@typescript-eslint/recommended-requiring-type-checking：使用了 @typescript-eslint 外掛中的一些額外的 TypeScript 規則，這些規則需要型別檢查才能正確運行。

   • rules：指定自定義的規則。

3. 在與 tsconfig.json 相同的目錄下，創建一個名為 tsconfig.eslint.json 的檔案，並將以下內容添加到該檔案中：

    // tsconfig.eslint.json
    {
      "extends": "./tsconfig.json", // 繼承原始 tsconfig.json
      "include": ["src", "typings", ".eslintrc.js"] // 包含 .eslintrc.js 文件
    }
   

4. 在 .eslintrc.js 中將 parserOptions.project 指向新的 TypeScript 配置檔案 tsconfig.eslint.json

    // .eslintrc.js
    module.exports = {
      // ...
      parserOptions: {
        project: "./tsconfig.eslint.json", // 指向新的配置檔案
        // ...
      },
      // ...
    };
   

5. 在 package.json 文件中添加 ESLint 指令

   在 package.json 文件中的 "scripts" 段落中，添加以下指令以運行 ESLint：

    "scripts": {
      "lint": "eslint 'src/**/*.ts'"
    }
   

   此指令將對 src 目錄下的所有 TypeScript 檔案執行 ESLint 檢查。

6. 執行 ESLint

    npm run lint
   

在 Visual Studio Code（VSCode）中整合 ESLint 檢查

在編輯器中整合 ESLint 檢查，可以在開發過程中就發現錯誤，大大增加我們的開發效率。

1. 安裝 ESLint 延伸模組

   在 VSCode 中，點擊側邊延伸模組按鈕（或按 Cmd/Ctrl+Shift+X），然後在搜尋框中輸入 ESLint。找到 ESLint 延伸模組，點擊安裝。或是到 ESLint 延伸模組介紹頁按「Install」安裝。

2. 設定 ESLint 延伸模組

   安裝 ESLint 擴充功能後，VSCode 會自動根據專案中的 ESLint 配置檔案（如 .eslintrc.js）檢查程式碼。但如果想讓 ESLint 在保存文件時自動修復程式碼，需要配置一下。

   打開設定（或按 Ctrl+,），然後在搜尋框中輸入 ESLint。在搜索結果中，找到 Editor: Code Actions On Save 設定，點擊 在 settings.json 內編輯。在 settings.json 文件中，加入以下內容：

    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
   

   儲存 settings.json 文件後，VSCode 將在保存 TypeScript 文件時自動使用 ESLint 修復程式碼問題（如果可以自動修復的話）。

書內 VSCode 的 ESLint 配置 "eslint.validate"已被 "eslint.probe" 取代，預設值也已經包含 "typescript" 和 "typescriptreact" 所以不需要再額外設置。

Visual Studio Code（VSCode）擴充套件

• Pretty TypeScript Errors

• Paul's TypeScript Toolkit

這篇是學習資源《TypeScript 新手指南》的最後一篇筆記了，這些筆記日後仍會隨著我的實戰經驗做相應的更新或是調整，如果有發現任何錯誤與建議歡迎私訊我的 Twitter 或寫信給我。感謝看到這邊的你！