reactjs - Senaste sättet att uppdatera en ESLint-konfigurationsfil (2024)

Försöker skapa ett nytt React-projekt med vite. Jag brukar ställa in ESLint via npx eslint --init och får sedan en .eslintrc.cjs-fil som jag efteråt modifierar för mina föredragna formatterare. När det är klart får jag en konfiguration som liknar följande:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb',
    'airbnb/hooks',
    'airbnb-typescript',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended',
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: './tsconfig.json',
  },
  plugins: ['@typescript-eslint', 'react', 'prettier'],
  rules: {
    'react/react-in-jsx-scope': 0,
  },
};

Men efter att ha uppdaterat min npm-version och kört kommandot för ESLint-konfiguration verkar jag nu få en eslint.config.js istället med följande innehåll:

import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginReact from 'eslint-plugin-react';

export default [
  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
  { files: ['**/*.js'], languageOptions: { sourceType: 'commonjs' } },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
];

Formatet för denna konfiguration är mycket annorlunda än det jag är van vid. Hur ändrar jag denna uppdaterade ESLint-konfigurationsfil så att jag kan konfigurera den att följa regler för formatterare från andra paket?

P.S.: Jag upptäckte just att jag fortfarande kan få en .eslintrc.cjs om jag bara kör npm init @eslint/config istället, men vill ändå fortfarande veta hur man formaterar den uppdaterade ESLint-konfigurationsfilen.

Svar #1

ESLint ändrade nyligen standardkonfigurationsformatet. Det gamla .eslintrc-filformatet är inte längre aktiverat som standard. Istället använder det nya ("flat") konfigurationsformatet en fil som eslint.config.js. Du kan läsa mer om detta på:

  • https://eslint.org/docs/latest/use/configure/configuration-files: den nya dokumentationen för konfigurationsfiler
  • https://eslint.org/docs/latest/use/configure/migration-guide: är en migrationsguide

För typescript-eslint specifikt visar dokumentationen på https://typescript-eslint.io både de platta och de gamla konfigurationerna. Du kan läsa om dem på:

  • https://typescript-eslint.io/getting-started: för den grundläggande 'komma igång'-guiden
  • https://typescript-eslint.io/getting-started/typed-linting: för att lägga till typad linting
  • https://typescript-eslint.io/packages/typescript-eslint#config: för den valfria tseslint.config-hjälpfunktionen för att få typinformation och lite bättre extends-stöd

Relaterade artiklar