Eslint-config-react-app
lastmod 2023-03-07created 2023-03-072 edits
Dependencies
- @typescript-eslint/parser
- @typescript-eslint
- @babel/eslint-parser
What this sucker does behind the scenes
To cut to the chase, the @typescript-eslint/parser parser setting is applied,
and ['import', 'flowtype', 'jsx-a11y', 'react-hooks'] are applied as plugins.
The plugin overridden for TypeScript files is @typescript-eslint.
Additionally, in #base.js the react plugin and the @babel/eslint-parser parser are configured.
index.js
module.exports = {
extends: [require.resolve('./base')],
plugins: ['import', 'flowtype', 'jsx-a11y', 'react-hooks'],
overrides: [
{
files: ['**/*.ts?(x)'],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
// typescript-eslint specific options
warnOnUnsupportedTypeScriptVersion: true,
},
plugins: ['@typescript-eslint'],
// If adding a typescript-eslint version of an existing ESLint rule,
// make sure to disable the ESLint rule here.
rules: {
// ........................
},
},
],
// NOTE: When adding rules here, you need to make sure they are compatible with
// `typescript-eslint`, as some rules such as `no-array-constructor` aren't compatible.
rules: {
// ........................
},
};
base.js
'use strict';
// Fix eslint shareable config (https://github.com/eslint/eslint/issues/3458)
require('@rushstack/eslint-patch/modern-module-resolution');
// This file contains the minimum ESLint configuration required for Create
// React App support, and is used as the `baseConfig` for `eslint-loader`
// to ensure that user-provided configs don't need this boilerplate.
module.exports = {
root: true,
parser: '@babel/eslint-parser',
plugins: ['react'],
env: {
browser: true,
commonjs: true,
es6: true,
jest: true,
node: true,
},
parserOptions: {
sourceType: 'module',
requireConfigFile: false,
babelOptions: {
presets: [require.resolve('babel-preset-react-app/prod')],
},
},
settings: {
react: {
version: 'detect',
},
},
rules: {
'react/jsx-uses-vars': 'warn',
'react/jsx-uses-react': 'warn',
},
};
See also
Pages that link here