`typescript-eslint`

TypeScriptをESLintで使用できるようにするツール

このパッケージは、ESLintでツールを使用するためのメインのエントリポイントです。

このパッケージは以下をエクスポートします

名前	説明
`設定`	タイプセーフなフラット設定を作成するためのユーティリティ関数
`設定`	ESLint（フラット）設定
`parser`	パーサー
`プラグイン`	プラグイン

インストール

npm
Yarn
pnpm

npm i typescript-eslint

yarn add typescript-eslint

pnpm add typescript-eslint

「従来の」設定からの移行

「従来の」.eslintrc設定から移行する場合、プラグインとパーサーが個別にインストールされている可能性があります。このパッケージにはこれらが依存関係として含まれているため、ローカル参照を自由にアンインストールできます。

npm
Yarn
pnpm

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

yarn remove @typescript-eslint/parser @typescript-eslint/eslint-plugin

pnpm remove @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,
);

この設定ファイルは、コア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,
  {
    /*... */
  },
  // ...
);

eslint.config.js
// @ts-check

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

/** @type {import('@typescript-eslint/utils').TSESLint.FlatConfig.ConfigFile} */
export default [
  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',
    },
  },
]);

typescript-eslint

インストール​

「従来の」設定からの移行​

使用方法​

高度な使用方法​

プラグインとパーサーの手動設定​

他のプラグインとの併用​

config(...)​

フラット設定の`extends`​