跳到主要內容

typescript-eslint

npm: typescript-eslint v7.13.1

工具可以讓你將 TypeScript 與 ESLint 搭配使用

此套件是你可用的主要切入點，用來在 ESLint 中使用我們的工具。

此套件匯出下列項目

名稱描述
設定建立類型安全性平面設定檔的實用函式
設定檔我們的 eslint（平面設定檔）設定檔
剖析器我們的剖析器
外掛程式我們的外掛程式

安裝​

npm i typescript-eslint

從「舊版」設定檔中轉移​

如果您從「傳統」.eslintrc 組態設定升級，您可能已分別安裝我們的外掛程式和剖析器。這個套件包含這些模組，做為相依性模組，因此您可以自行解除安裝您本機的參照

npm un @typescript-eslint/parser @typescript-eslint/eslint-plugin

有關從「傳統」組態升級的詳細資訊，請參閱 ESLint 的組態升級指南。

用法​

此套件最簡單的用法為

eslint.config.js
// @ts-check

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
);

這個組態檔會匯出一個扁平的組態，可啟用 core eslint 建議的組態 和 我們建議的組態。

有關 tseslint.config 函數的詳細資訊 請參閱以下的 config(...)。

進階用法​

手動設定我們的套件及剖析器​

您可以宣告我們的套件和剖析器在您的組態中透過此套件，例如

eslint.config.js
// @ts-check

import eslint from '@eslint/js';
import jestPlugin from 'eslint-plugin-jest';
import tseslint from 'typescript-eslint';

export default tseslint.config({
  plugins: {
    '@typescript-eslint': tseslint.plugin,
  },
  languageOptions: {
    parser: tseslint.parser,
    parserOptions: {
      project: true,
    },
  },
  rules: {
    '@typescript-eslint/no-unsafe-argument': 'error',
    '@typescript-eslint/no-unsafe-assignment': 'error',
    '@typescript-eslint/no-unsafe-call': 'error',
    '@typescript-eslint/no-unsafe-member-access': 'error',
    '@typescript-eslint/no-unsafe-return': 'error',
  },
});
警告

我們強烈建議您使用 @typescript-eslint 名稱空間宣告我們的套件，如下所示。如果您使用我們的共用組態，這是他們使用的名稱空間。這是我們套件多年的標準名稱空間，也是使用者最熟悉的。

您可以選擇不同的名稱空間，但請注意，目前 扁平式組態允許相同的套件註冊、設定，並在多個名稱空間中重複報告。

與其他套件一併使用​

以下是與扁平式組態一併使用我們的工具的更複雜範例。此組態

  • 略過檢查 build/dist 資料夾
  • 啟用我們的套件、剖析器、類型感知式檢查程式，以及一些我們最受歡迎的類型感知式規則
  • 停用 JS 檔案的類型感知式檢查程式
  • 僅針對測試檔案啟用建議的 eslint-plugin-jest 規則
eslint.config.js
// @ts-check

import eslint from '@eslint/js';
import jestPlugin from 'eslint-plugin-jest';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  {
    // config with just ignores is the replacement for `.eslintignore`
    ignores: ['**/build/**', '**/dist/**', 'src/some/file/to/ignore.ts'],
  },
  eslint.configs.recommended,
  {
    plugins: {
      '@typescript-eslint': tseslint.plugin,
      jest: jestPlugin,
    },
    languageOptions: {
      parser: tseslint.parser,
      parserOptions: {
        project: true,
      },
    },
    rules: {
      '@typescript-eslint/no-unsafe-argument': 'error',
      '@typescript-eslint/no-unsafe-assignment': 'error',
      '@typescript-eslint/no-unsafe-call': 'error',
      '@typescript-eslint/no-unsafe-member-access': 'error',
      '@typescript-eslint/no-unsafe-return': 'error',
    },
  },
  {
    // disable type-aware linting on JS files
    files: ['**/*.js'],
    ...tseslint.configs.disableTypeChecked,
  },
  {
    // enable jest rules on test files
    files: ['test/**'],
    ...jestPlugin.configs['flat/recommended'],
  },
);

config(...)​

config 函式是一個 可變參 恆等函式，這是一種華麗的說法，表示它是一個函式，其擴散引數可接受任意數量的平面組態物件，且會原樣回傳物件。其存在是作為一種提供平面組態檔類型的方式，不必使用 JSDoc 型別註解，且快速又容易。

透過使用這個函式，除了 TypeScript 錯誤之外，你還會取得所有組態屬性的自動完成和文件，假設你有提供無效值。

eslint.config.js
// @ts-check

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  {
    /*... */
  },
  // ...
);
提示

我們強烈建議使用這個工具程式來增加組態撰寫體驗 — 然而，它完全是選用。選擇不使用它，你會失去編輯器自動完成和組態檔的類型檢查，但是除了這一點，它不會影響你使用我們的工具的能力。

平面組態 extends​

tseslint.config 工具函式也新增了平面組態物件的 extends 屬性處理。這樣可以讓你更輕易地為特定檔案樣式延伸共用組態，同時也能覆寫那些組態提供的規則/選項

export default tseslint.config({
  files: ['**/*.ts'],
  extends: [
    eslint.configs.recommended,
    ...tseslint.configs.recommended,
  ],
  rules: {
    '@typescript-eslint/array-type': 'error',
    '@typescript-eslint/consistent-type-imports': 'error',
  },
});

// is the same as writing

export default [
  ...[
    eslint.configs.recommended,
    ...tseslint.configs.recommended,
  ].map(conf => ({
    ...conf,
    files: ['**/*.ts'],
  })),
  {
    files: ['**/*.ts'],
    rules: {
      '@typescript-eslint/array-type': 'error',
      '@typescript-eslint/consistent-type-imports': 'error',
    },
  },
];

我們發現這是撰寫 ESLint 組態時相當常見的作業，這就是我們提供這個便利屬性的原因。

例如，在瞭解型的程式碼庫中，像這樣的組態物件是停用 JS 檔案中 TS 專用程式檢查設定的極爲常見方式

export default tseslint.config([
  {
    files: ['**/*.js'],
    extends: [tseslint.configs.disableTypeChecked],
    rules: {
      // turn off other type-aware rules
      'deprecation/deprecation': 'off',
      '@typescript-eslint/internal/no-poorly-typed-ts-props': 'off',

      // turn off rules that don't apply to JS code
      '@typescript-eslint/explicit-function-return-type': 'off',
    },
  },
]);