從 TSLint 遷移至 ESLint

TSLint 過去一直是建議的 linter，但現在 TSLint 已被棄用，而 ESLint 正在接替其職責。本文將協助您從 TSLint 遷移至 ESLint。

ESLint：安裝

您需要安裝 ESLint。ESLint 原生不支援 TypeScript，因此您也需要安裝 eslint-typescript-support

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

或者，如果您使用 yarn 作為套件管理器

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

上述命令會新增 ESLint、新增讓 ESLint 理解 TypeScript 的剖析器，並新增一些 TypeScript 特定的規則。

現在，為了簡化實際遷移，請執行 tslint-to-eslint-config 公用程式。此工具將採用您的 TSLint 組態，並從中建立「最接近」的 ESLint 組態。

npx tslint-to-eslint-config

此命令會下載並執行該公用程式以執行遷移。如需其他選項，請查看該公用程式的使用指南。

現在應該會有一個新的 .eslintrc.js 檔案、一個記錄檔 (tslint-to-eslint-config.log)，以及可能對其他檔案 (例如 .vscode/settings.json) 的變更。請仔細檢閱變更，尤其是對現有檔案所做的變更，並檢查記錄檔。

ESLint：設定

.eslintrc.js 檔案通常足以開始使用，但 parserOptions.project 屬性可能仍設定為您的 tsconfig.json 檔案。這表示 ESLint 規則可以使用語意資訊，例如，此變數是字串還是數字陣列？此組態啟用了一些強大的規則，但也表示 ESLint 需要更長的時間來計算。擴充功能的預設規則不需要語意資訊，除非您已新增需要語意資訊的規則，否則我們建議您移除 parserOptions.project 屬性。

ESLint：執行

您現在已準備好執行 ESLint，但在執行之前，我們建議您停用 TSLint。若要執行此操作，請開啟 [擴充功能] 檢視，然後在 TSLint 擴充功能的內容選單中選取 [停用]。

是時候進行 lint 了！使用此命令：eslint -c .eslintrc.js --ext .ts <mySrcFolder> (請注意 --ext .ts 選項，它會告知 ESLint 查看 TypeScript 檔案)。我們建議將此命令放在 package.json 檔案的 scripts 區段中，如下所示

"lint": "eslint -c .eslintrc.js --ext .ts <mySrcFolder>"

若要將 ESLint 與 Visual Studio Code 整合，請執行下列操作

• 安裝 ESLint 擴充功能。
• 透過 [工作：設定工作] 命令建立工作，然後選取 [npm: lint]。
• 在產生的 tasks.json 檔案中，將問題比對器設定為 $eslint-stylish。

提示：ESLint 有時在執行方式上「更正確」，您可能會看到以前沒有的警告，例如指出缺少分號。嘗試使用 --fix 選項，讓 ESLint 為您清理。

TSLint：移除

恭喜。您現在應該已完成 ESLint 設定，現在是清理的時候了。

TSLint 的移除取決於您的專案，但通常有以下步驟

• 更新 .vscode/extensions.json 以建議使用 ESLint 擴充功能，而不再建議使用 TSLint

  "recommendations": [
    "dbaeumer.vscode-eslint"
  ]
  

• 移除 tslint.json 檔案。

• 移除 package.json 檔案中對 tslint 的依賴性。

• 使用 npm uninstall tslint 解除安裝 TSLint。