ESlint / TSLint 外掛程式

外掛程式套件	@rushstack/heft-lint-plugin
外掛程式名稱	lint-plugin 已由 LintPlugin.ts 實作
外掛程式設定檔	(無)
heft.json 選項	(無)

此外掛程式呼叫 ESLint 或 TSLint linter，用以檢查您的程式碼是否具有風格問題或常見錯誤。

什麼時候該使用

TSLint 已過時（請見下方）。我們建議對所有專案使用 ESLint，這有助於採取下列結合方式，以驗證程式碼

Prettier：此工具管理瑣碎的語法面向，如空格、逗號和分號。由於這些面向通常不會影響程式碼語義，因此我們永遠不會顯示錯誤訊息給開發人員，也不會納入建置流程。Prettier 會透過 git commit 鉤子自動重新設定程式碼格式。如需設定，請參閱 Rush 網站上的啟用 Prettier 教學課程。
TypeScript：TypeScript 編譯器進行精密類型檢查和語義分析，而這會對程式正確性帶來最大的防護作用。
ESLint：此 linter 規則補充編譯器的檢查機制，具有更多主觀性且高度客製化的風格化規則。TypeScript 可能偵測到「此函式參數為字串，但宣告為數字」的情況，而 linter 可能會偵測到「此類別名稱應使用 PascalCase 而不是 camelCase」之類的問題。然而 ESLint 的驗證在操作上與類型檢查非常類似，而且有些 ESLint 規則需要 TypeScript 語意分析，其可能仰賴專案特定的編譯器組態。因此，我們建議將 ESLint 加入建置流程，而不是作為 Git commit 掛鉤或全域分析工具。
API Extractor：這是專門針對程式庫套件進行額外驗證檢查的工具。它可確保其 API 合約格式正確且有適當的文件說明。

儘管建議您使用這種方式設定建置系統，但 Heft 並未強制執行特定方法。這些元件都是選用的，而且其他組態也是可行的。例如，較舊的程式碼庫可能需要使用 TSLint，而不是 ESLint。

package.json 相依關係

您需要將 eslint 套件加入專案

Rush
NPM

# If you are using Rush, run this shell command in your project folder:
rush add --package eslint --dev

# If you are using vanilla NPM, run this shell command in your project folder:
npm install eslint --save-dev

如果您使用 rig，可以略過 eslint 相依關係，並透過rig 解析度取得。但是，如果您使用VS Code 的 ESLint 擴充功能，它會嘗試從專案資料夾解析 eslint 套件。因此，將 ESLint 加入 package.json 檔案仍是有用的。(此擴充功能可以載入全域安裝的 eslint 套件；但是，它的版本可能與本地分支所需要的版本不符。)

如果您使用標準 rig，例如 @rushstack/heft-node-rig 或 @rushstack/heft-web-rig，便會載入並組態 @rushstack/heft-lint-plugin。

否則，您需要將套件加入專案

Rush
NPM

# If you are using Rush, run this shell command in your project folder:
rush add --package @rushstack/heft-lint-plugin --dev

# If you are using vanilla NPM, run this shell command in your project folder:
npm install @rushstack/heft-lint-plugin --save-dev

組態

如果 rig 尚未提供此外掛程式，您的heft.json 組態檔案可以像此範例一樣呼叫它

<專案資料夾>/config/heft.json

{
  "$schema": "https://developer.microsoft.com/json-schemas/heft/v0/heft.schema.json",
  . . .
  "phasesByName": {
    "build": {
      "cleanFiles": [{ "sourcePath": "dist" }, { "sourcePath": "lib" }, { "sourcePath": "lib-commonjs" }],
      "tasksByName": {
        "typescript": {
          "taskPlugin": {
            "pluginPackage": "@rushstack/heft-typescript-plugin"
          }
        },
        "lint": {
          "taskDependencies": ["typescript"],
          "taskPlugin": {
            "pluginPackage": "@rushstack/heft-lint-plugin"
          }
        }
      }
    }
    . . .
  }
}

Heft 只有在找到 ESLint 組態檔案時才會呼叫 linter。儘管 ESLint 支援這類檔案的7 種不同的名稱/格式，但 Heft 要求將其命名為 .eslintrc.js。這具有以下幾個好處

一致性：使用一種類標準命名 .eslintrc.js，可以輕鬆搜尋這些檔案、執行批次編輯，以及在專案之間複製組態範本。
解決方法：使用 .js 檔案副檔名可以在檔案中啟用 JavaScript 表達式。這種作法通常不建議，因為程式碼表達式較難驗證，而且表達式可能仰賴快取中看不見的環境輸入。但是，由於歷史原因，ESLint 的組態檔案格式有一些限制，只能使用腳本解決 (例如使用 __dirname 解析檔案路徑)。

建議不要將集中式的 .eslintrc.js 放置在 monorepo 根資料夾中。這違反了 Rush 的原則，即專案應該獨立且易於在多重儲存庫之間移動。

而是，每個專案都應有自己的 .eslintrc.js 檔案。我們建議使用 @rushstack/eslint-config 共享組態，該組態專門針對大型單一存放庫量身打造，並基於 typescript-eslint 剖析模組與規則組。如果您需要其他自訂程式碼檢查規則，建議建立一個擴充自 @rushstack/eslint-config 的自訂 NPM 套件。

採用這種方法，典型的 ESLint 組態檔案會非常簡潔。例如

<專案資料夾>/.eslintrc.js

// This is a workaround for https://github.com/eslint/eslint/issues/3458
require('@rushstack/eslint-config/patch/modern-module-resolution');

module.exports = {
  extends: ['@rushstack/eslint-config/profile/node'],
  parserOptions: { tsconfigRootDir: __dirname }
};

設定檔和混合

@rushstack/eslint-config 套件目前提供三個不同的程式碼檢查設定檔。選擇一個

@rushstack/eslint-config/profile/node - 適用於 Node.js 服務
@rushstack/eslint-config/profile/node-trusted-tool - 適用於 Node.js 工具
@rushstack/eslint-config/profile/web-app - 適用於網路瀏覽器應用程式

它也支援程式碼檢查混合。您可以加入任意數量的混合

@rushstack/eslint-config/mixins/react - 如果您使用 React 架構
@rushstack/eslint-config/mixins/friendly-locals - 如果您偏好使用更多註解來進行宣告
@rushstack/eslint-config/mixins/tsdoc - 如果您正在工作區中使用 API Extractor

@rushstack/eslint-config 文件較詳細地說明這些選項。

TSLint

TSLint 工具早於 ESLint，現在已不建議使用，但仍可能用於某些較舊的程式碼庫。

lint-plugin 支援這兩個工具：如果找到 <專案資料夾>/tslint.json，則會呼叫 TSLint。如果同時存在這兩個組態檔案，則會同時呼叫 TSLint 和 ESLint。

什麼時候該使用​

package.json 相依關係​

組態​

設定檔和混合​

TSLint​

什麼時候該使用

package.json 相依關係

組態

設定檔和混合

TSLint