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?
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:
"react-app"
before any other configuration"warn"
to avoid stopping the project from building"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',
},
},
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.