reactjs – Latest way on updating an ESLint config file (2024)

Trying to create a new React project with vite. I usually setup ESLint via the npx eslint --init and then get an .eslintrc.cjs file which I afterwards modify for my preferred formatters. Once done, I get a config similar to the following:

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,
  },
};

However, after updating my npm version and running the ESLint config command, I now seem to get an eslint.config.js instead with the following contents:

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,
];

The format for this config is very different than the one I got used to. How do I modify this updated ESLint config file such that I could configure it to follow rules for formatters from other packages?

P.S.: I just discovered that I could still get an .eslintrc.cjs if I just run npm init @eslint/config instead, but would also still want to know how to format the updated ESLint config file.