javascript - How to extend CRA ESLint rules with EXTEND_ESLINT environment variable - Stack Overflow

admin管理员组

文章数量:1252714

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?

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?

• javascript
• npm
• create-react-app
• eslint

Share Improve this question Follow edited Mar 30, 2020 at 22:44 Emile Bergeron 17.4k55 gold badges8585 silver badges131131 bronze badges asked Jan 23, 2020 at 12:47 sidonaldsonsidonaldson 25.3k1010 gold badges6060 silver badges6464 bronze badges 3

• 1 I'm also curious about this. I'm working on TypeScript project created with Create React App, and I'm trying to figure out how to get rid of process is not defined lint error. I can access env variables without any issues, but I just don't want to make a disable lint ment everywhere I access env variables with process.env... So I though extending so called "shared config" might help, but couldn't figure out how exactly one can extend it. – Vladislav Kovechenkov Commented Jan 29, 2020 at 17:10
• @VladislavKovechenkov you probably need to set node: true in the env object of your ESLint configuration. – Emile Bergeron Commented Mar 30, 2020 at 22:40
• 1 - shared-config is an example there is no module with this name, you can use any module eslint instead of. - if you want to create a shareable configs you can follow these steps eslint/docs/developer-guide/shareable-configs – anass belaicher Commented Sep 12, 2020 at 18:02

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 14

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:remended',
  // 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/remended',
        // 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',
    },
  },
};

本文标签： javascriptHow to extend CRA ESLint rules with EXTENDESLINT environment variableStack Overflow