從 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。