@typescript-eslint/parser に "parserOptions.project" が設定されています 質問する

@typescript-eslint/parser に

新しいReact Nativeプロジェクトを作成しました--template typescript

template定型文の一部として含まれていたディレクトリを削除しました。

次に、ESLint を追加しました。

module.exports = {
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  extends: ["airbnb-typescript-prettier"]
};

しかし、開くとbabel.config.jsこのエラーが発生します

解析エラー: @typescript-eslint/parser に "parserOptions.project" が設定されています。

ファイルがプロジェクト構成と一致しません: /Users/Dan/site/babel.config.js

ファイルは、提供されているプロジェクトの少なくとも1つに含まれている必要があります。eslint

ベストアンサー1

JavaScript ファイルと TypeScript ファイルの異なる lint ルール

問題は、以下のいずれかの理由で発生します。

  1. 情報を必要とするルールを使用していますが、 parserOptions.project;を指定しませんでした。
  2. を指定しましたparserOptions.project、指定しませんでしたcreateDefaultProgram(将来のバージョンでは削除される予定です)、そしてプロジェクトに含まれていないファイル(例babel.config.jsmetro.config.js)を lint している場合

ESLint フラット設定 (バージョン >= 9)

tsTypeScriptルールは、以下の設定を持つファイルでのみ使用できます(ドキュメント):

const tsPlugin = require('@typescript-eslint/eslint-plugin');
const tsEslint = require('typescript-eslint');

/**
 * @type {import('eslint').Linter.FlatConfig[]}
 */
module.exports = [
  // This is just an example for rules specific to JS files
  {
    files: ['**/*.js'],

    rules: {
      'no-duplicate-imports': 'error',
    },
  },

  ...tsEslint.configs.recommendedTypeChecked.map((config) => ({
    ...config,
    files: ['**/*.ts'], // We use TS config only for TS files
  })),

  {
    files: ['**/*.ts'],

    // This is required, see the docs
    languageOptions: {
      parserOptions: {
        project: true,
        tsconfigRootDir: __dirname, // or import.meta.dirname for ESM
      },
    },

    // This is needed in order to specify the desired behavior for its rules
    plugins: {
      '@typescript-eslint': tsPlugin,
    },

    // After defining the plugin, you can use the rules like this
    rules: {
      '@typescript-eslint/no-unused-vars': 'error',
    }
  }
]

ESLint レガシー設定 (バージョン <= 8)

これを解決するには、TypeScript ファイルでのみ TypeScript ルールを使用するように ESLint 設定を更新します。

{
  // ...
  parser: '@typescript-eslint/parser',
  plugins: ["@typescript-eslint"],
  overrides: [
    {
      files: ['*.ts', '*.tsx'], // Your TypeScript files extension

      // As mentioned in the comments, you should extend TypeScript plugins here,
      // instead of extending them outside the `overrides`.
      // If you don't want to extend any rules, you don't need an `extends` attribute.
      extends: [
        'plugin:@typescript-eslint/recommended',
        'plugin:@typescript-eslint/recommended-requiring-type-checking',
      ],

      parserOptions: {
        project: ['./tsconfig.json'], // Specify it only for TypeScript files
        // or `project: true` in typescript-eslint version >= 5.52.0
      },
    },
  ],
  // ...
}

設定できますproject: truetypescript-eslint 5.52.0 以降。

設定の詳細については、overrides公式 ESLint ドキュメントを参照してください。オーバーライドはどのように機能しますか?


特定のファイルをリントしない

エラーに記載されているファイル(例babel.config.js:)をlintしたくない場合は、そのファイルの名前をファイル.eslintignore:

babel.config.js

いずれにせよ、上記の手順 (TypeScript ファイルの構成をオーバーライドすることについて) は、プロジェクトに lint する JavaScript ファイルと TypeScript ファイルの両方が含まれている場合に重要です。

また、開発者の依存関係を使用して実行できるため、テストファイル用の異なる構成など、さまざまな状況に合わせて他のオーバーライドを作成することもできます。node 環境browser、またはバージョン9以降では、 の代わりにを使用することができます。globals

おすすめ記事