How to extend CRA ESLint rules with EXTEND_ESLINT environment variable

Question

Recently Facebook's Create React App (CRA) released a new feature which allows you to extend their base ESLint rules.

We recognise that in some cases, further customisation is required. It is now possible to extend the base ESLint config by setting the EXTEND_ESLINT environment variable to true. Setting Up Your Editor

Here is the example given but with no detail such as filename or what "shared-config" is.

{
    "eslintConfig": {
        "extends": ["react-app", "shared-config"],
        "rules": {
            "additional-rule": "warn"
        },
        "overrides": [
            {
                 "files": ["**/*.ts?(x)"],
                 "rules": {
                     "additional-typescript-only-rule": "warn"
                 }
             }
        ]
    }
}

The feature is enabled by added an environment variable.

EXTEND_ESLINT=true

but on the documentation page it also doesn't give any information how to use it - Advanced configuation

I've added their example code to my build in a file called .eslintrc.json but I get a build error:

"Error: ESLint configuration in .eslintrc.json is invalid: - Unexpected top-level property "eslintConfig"."

Has anyone got this working? Does the file need to export a module?

Answer 1

While unclear from the Create-React-App documentation, the example they give is as if the project's ESLint configuration was inside the eslintConfig property of the package.json file.

You need to configure ESLint as described in its documentation. So if you choose the .eslintrc.json way, it must be a valid ESLint configuration file, which doesn't have a eslintConfig property.

The only things that matter in the example are:

• they're extending from "react-app" before any other configuration
• any additional rule is set to "warn" to avoid stopping the project from building
• if using TypeScript, place the specific TS related configuration in the "overrides" section.

A simple .eslintrc.js (notice the extension) configuration file for a CRA project using TypeScript could be as follows:

const defaultRules = [
  'react-app',
  'eslint:recommended',
  // any other plugins or custom configuration you'd like to extend from.
];

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2017,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  env: {
    browser: true,
    node: true,
    es6: true,
    jest: true,
  },
  extends: defaultRules,
  rules: {
    'array-callback-return': 'warn',
    'consistent-return': 'warn',
    'default-case': 'warn',
    // etc.
  },
  overrides: [
    {
      files: ['**/*.ts', '**/*.tsx'],
      plugins: ['@typescript-eslint'],
      extends: [
        ...defaultRules,
        'plugin:@typescript-eslint/recommended',
        // any other TypeScript specific config (from a plugin, or custom)
      ],
      rules: {
        '@typescript-eslint/no-explicit-any': 'warn',
        '@typescript-eslint/no-unused-vars': 'warn',
        '@typescript-eslint/no-unused-expressions': 'warn',
        // etc.
      },
    },
  ],
  settings: {
    react: {
      // React version. "detect" automatically picks the version you have installed.
      version: 'detect',
    },
  },
};