"parserOptions.project" telah diatur untuk @typescript-eslint/parser

Saya membuat proyek React Native baru dengan --template typescript

Saya menghapus direktori template yang merupakan bagian dari boilerplate.

Saya kemudian melanjutkan untuk menambahkan ESLint:

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

Namun, ketika saya membuka babel.config.js, saya mendapatkan kesalahan ini

Kesalahan parsing: "parserOptions.project" telah disetel untuk @typescript-eslint/parser.

File tidak sesuai dengan konfigurasi proyek Anda: /Users/Dan/site/babel.config.js.

File harus disertakan dalam setidaknya satu dari proyek yang disediakan.eslint

Jawaban #1

Aturan lint yang berbeda untuk file JavaScript dan TypeScript

Masalah terjadi karena salah satu alasan di bawah ini:

  1. Anda menggunakan aturan yang memerlukan informasi type dan tidak menentukan parserOptions.project;
  2. Anda menentukan parserOptions.project, tidak menentukan createDefaultProgram (ini akan dihapus di versi mendatang), dan Anda sedang melakukan lint pada file yang tidak termasuk dalam proyek (misalnya babel.config.js, metro.config.js)

Konfigurasi datar ESLint (versi >= 9)

Anda dapat menggunakan aturan TypeScript hanya pada file ts dengan konfigurasi berikut (juga, lihat dokumentasinya):

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',
    }
  }
]

Konfigurasi warisan ESLint (versi <= 8)

Untuk menyelesaikannya, perbarui konfigurasi ESLint Anda untuk menggunakan aturan TypeScript hanya pada file TypeScript:

{
  // ...
  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
      },
    },
  ],
  // ...
}

Anda dapat mengatur project: true sejak typescript-eslint 5.52.0.

Anda dapat membaca lebih lanjut tentang konfigurasi overrides di dokumentasi resmi ESLint: Bagaimana cara kerja overrides?

Jangan lint file tertentu

Jika Anda tidak ingin melakukan lint pada file yang disebutkan dalam kesalahan (misalnya babel.config.js), Anda dapat mengabaikannya dengan menambahkan namanya ke file .eslintignore:

babel.config.js

Ngomong-ngomong, langkah di atas (tentang menimpa konfigurasi untuk file TypeScript) penting jika proyek Anda berisi file JavaScript dan TypeScript yang ingin Anda lint.

Anda juga dapat membuat override lain untuk situasi yang berbeda, misalnya konfigurasi yang berbeda untuk file uji, karena dapat menggunakan dependensi pengembang dan dijalankan di lingkungan node, alih-alih browser, atau pada versi >= 9 Anda dapat menggunakan globals.

Jawaban #2

Anda dapat membuat file konfigurasi TypeScript terpisah (tsconfig.eslint.json) yang ditujukan untuk konfigurasi eslint. File tersebut memperluas konfigurasi tsconfig dan mengatur kunci include untuk file-file yang harus dilint.

.eslint.js:

// ...
parserOptions: {
  // ...
  project: "./tsconfig.eslint.json",
  // ...
},
// ...

tsconfig.eslint.json:

{
  "extends": "./tsconfig.json",
  "include": [
    // ...
    "babel.config.js"
  ]
}

Atau jika Anda ingin mengabaikannya, Anda dapat memasukkannya ke dalam .eslintignore.

.eslintignore:

// ...
babel.config.js

Jawaban #3

Tambahkan satu baris di ".eslintignore":

.eslintrc.js

Jawaban #4

Dalam konfigurasi ESLint saya, saya memiliki konfigurasi berikut:

.eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
  },
  globals: {
    Promise: "readonly"
  },
  parser: "@typescript-eslint/parser",
  parserOptions: {
    sourceType: "module",
    tsconfigRootDir: __dirname,
    project: ["./tsconfig.eslint.json"],
  },
  plugins: ["@typescript-eslint"],
  extends: [
    "eslint:recommended",
    "prettier/@typescript-eslint",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
  ],
}

Pembaruan Bagian kunci dari perbaikan ini adalah ini:

parser: "@typescript-eslint/parser"

dan ini:

parserOptions: {
    sourceType: "module",
    tsconfigRootDir: __dirname,
    project: ["./tsconfig.eslint.json"], // could be tsconfig.json too
}

Jangan lupa untuk menyertakan file itu atau direktori file tersebut dalam array include di tsconfig.json.

Jawaban #5

Anda perlu menambahkan file itu ke array include di tsconfig Anda. Lihat typescript-eslint/typescript-eslint#967 untuk detail lebih lanjut.

Jawaban #6

  1. Jalankan npm i -D @types/node

  2. Sertakan dukungan TypeScript untuk berkas *.config.js:

tsconfig.json:

{
  "include": [
    "**/*.config.js" // for *.config.js files
  ]
}

Dan kemudian muat ulang IDE Anda!

Jawaban #7

Cukup instruksikan eslint untuk mengabaikannya dengan menambahkan opsi ignorePatterns ke .eslintrc.js Anda:

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json',
  },
  ignorePatterns: ["babel.config.js"],
  ...

Karena tidak banyak nilai dalam memeriksa file konfigurasi proyek Anda, Anda dapat mengabaikannya dengan aman.

Selain itu, saya tidak akan menjadikannya bagian dari tsconfig.json Anda atau membuat file tsconfig.eslint.json khusus, hanya untuk tujuan linting.

Jawaban #8

Cukup tambahkan kode di bawah ini ke dalam file .eslintrc.js.

ignorePatterns: ['.eslintrc.js']

Artikel terkait