新しい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 ルール
問題は、以下のいずれかの理由で発生します。
- 型情報を必要とするルールを使用していますが、
parserOptions.project
;を指定しませんでした。 - を指定しました
parserOptions.project
、指定しませんでしたcreateDefaultProgram
(将来のバージョンでは削除される予定です)、そしてプロジェクトに含まれていないファイル(例babel.config.js
:metro.config.js
)を lint している場合
ESLint フラット設定 (バージョン >= 9)
ts
TypeScriptルールは、以下の設定を持つファイルでのみ使用できます(ドキュメント):
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: true
typescript-eslint 5.52.0 以降。
設定の詳細については、overrides
公式 ESLint ドキュメントを参照してください。オーバーライドはどのように機能しますか?
特定のファイルをリントしない
エラーに記載されているファイル(例babel.config.js
:)をlintしたくない場合は、そのファイルの名前をファイル.eslintignore
:
babel.config.js
いずれにせよ、上記の手順 (TypeScript ファイルの構成をオーバーライドすることについて) は、プロジェクトに lint する JavaScript ファイルと TypeScript ファイルの両方が含まれている場合に重要です。
また、開発者の依存関係を使用して実行できるため、テストファイル用の異なる構成など、さまざまな状況に合わせて他のオーバーライドを作成することもできます。node
環境browser
、またはバージョン9以降では、 の代わりにを使用することができます。globals
。