從 TSLint 遷移至 ESLint

TSLint 過去一直是建議的程式碼檢查工具，但現在 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 擴充功能的上下文選單中選取 [停用]。

是時候進行程式碼檢查了！使用此命令：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。