My ESLint configurations

.eslintrc

{
	"root": true,
	"extends": [ "react-app", "plugin:jsx-a11y/recommended" ],
	"plugins": [ "jsx-a11y" ],
	"parser": "babel-eslint",
	"parserOptions": {
		"ecmaVersion": 8,
		"ecmaFeatures": {
			"experimentalObjectRestSpread": true,
			"impliedStrict": true,
			"classes": true
		}
	},
	"env": {
		"browser": true,
		"node": true,
		"jquery": true,
		"jest": true
	},
	"rules": {
		"no-debugger": 0,
		"no-unused-vars": [
			1,
			{
				"argsIgnorePattern": "res|next|^err"
			}
		],
		"no-unused-expressions": [
			2,
			{
				"allowTaggedTemplates": true
			}
		],
		"no-param-reassign": [
			2,
			{
				"props": false
			}
		],
		"camelcase": 0,
		"no-console": 0,
		"import/prefer-default-export": 0,
		"import": 0,
		"func-names": 0,
		"space-before-function-paren": 0,
		"block-spacing": [ 2, "always" ],
		"space-in-parens": [ 2, "always" ],
		"object-curly-spacing": [ 2, "always" ],
		"template-curly-spacing": [ 2, "always" ],
		"array-bracket-spacing": [ 2, "always" ],
		"comma-dangle": 0,
		"max-len": 0,
		"import/extensions": 0,
		"no-underscore-dangle": 0,
		"consistent-return": 0,
		"react/display-name": 0,
		"react/react-in-jsx-scope": 0,
		"react/prefer-stateless-function": 0,
		"react/forbid-prop-types": 0,
		"react/no-unescaped-entities": 0,
		"react/jsx-curly-spacing": [ 2, "always" ],
		"react/jsx-filename-extension": [
			1,
			{
				"extensions": [ ".js", ".jsx" ]
			}
		],
		"radix": 0,
		"quotes": [
			2,
			"single",
			{
				"avoidEscape": true,
				"allowTemplateLiterals": true
			}
		],
		"jsx-a11y/accessible-emoji": 0,
		"jsx-a11y/href-no-hash": "off",
		"jsx-a11y/anchor-is-valid": [
			"warn",
			{
				"aspects": [ "invalidHref" ]
			}
		]
	}
}

.eslintrc-airbnb

{
	"extends": "airbnb",
	"parser": "babel-eslint",
	"parserOptions": {
		"ecmaVersion": 8,
		"ecmaFeatures": {
			"experimentalObjectRestSpread": true,
			"impliedStrict": true,
			"classes": true
		}
	},
	"env": {
		"browser": true,
		"node": true,
		"jquery": true,
		"jest": true
	},
	"rules": {
		"no-debugger": 0,
		"no-unused-vars": [
			1,
			{
				"argsIgnorePattern": "res|next|^err"
			}
		],
		"arrow-body-style": [
			2,
			"as-needed"
		],
		"no-unused-expressions": [
			2,
			{
				"allowTaggedTemplates": true
			}
		],
		"no-param-reassign": [
			2,
			{
				"props": false
			}
		],
		"camelcase": 0,
		"no-console": 0,
		"import/prefer-default-export": 0,
		"import": 0,
		"func-names": 0,
		"space-before-function-paren": 0,
		"block-spacing": [2, "always"],
		"space-in-parens": [2, "always"],
		"object-curly-spacing": [2, "always"],
		"template-curly-spacing": [2, "always"],
		"array-bracket-spacing": [2, "always"],
		"comma-dangle": 0,
		"max-len": 0,
		"import/extensions": 0,
		"no-underscore-dangle": 0,
		"consistent-return": 0,
		"react/display-name": 0,
		"react/react-in-jsx-scope": 0,
		"react/prefer-stateless-function": 0,
		"react/forbid-prop-types": 0,
		"react/no-unescaped-entities": 0,
		"react/jsx-curly-spacing": [2, "always"],
		"react/jsx-filename-extension": [
			1,
			{
				"extensions": [
					".js",
					".jsx"
				]
			}
		],
		"radix": 0,
		"no-shadow": [
			2,
			{
				"hoist": "all",
				"allow": [
					"resolve",
					"reject",
					"done",
					"next",
					"err",
					"error"
				]
			}
		],
		"quotes": [
			2,
			"single",
			{
				"avoidEscape": true,
				"allowTemplateLiterals": true
			}
		],
		"jsx-a11y/accessible-emoji": 0,
		"jsx-a11y/href-no-hash": "off",
		"jsx-a11y/anchor-is-valid": [
			"warn",
			{
				"aspects": [
					"invalidHref"
				]
			}
		]
	},
}

.eslintrc-base.json

{
	"extends": [
		"eslint:recommended",
		"plugin:import/errors",
		"plugin:react/recommended",
		"plugin:jsx-a11y/recommended",
		"prettier",
		"prettier/react"
	],
	"rules": {
		"react/prop-types": 0,
		"no-console": 1,
		"react-hooks/rules-of-hooks": 2,
		"react-hooks/exhaustive-deps": 1
	},
	"plugins": ["react", "import", "jsx-a11y", "react-hooks"],
	"parserOptions": {
		"ecmaVersion": 2018,
		"sourceType": "module",
		"ecmaFeatures": {
			"jsx": true
		}
	},
	"env": {
		"es6": true,
		"browser": true,
		"node": true
	},
	"settings": {
		"react": {
			"version": "detect"
		}
	}
}

For the .eslintrc-airbnb file, run the following command if working on a new project from scratch:

npm i --save-dev eslint-config-airbnb eslint eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y babel-eslint eslint-config-prettier eslint-plugin-prettier prettier.

Or, if you're running NPM version 5+:

npx install-peerdeps --dev eslint-config-airbnb

You can find full installation instructions in the docs of the Airbnb repo. Note that this file here in this gist is just my settings/modifications on top of that Airbnb config.

The currnet .eslintrc file is for projects using Create React App. You may not need to install the additional dependencies, CRA should have them included by default. If not, you can view the docs for the eslint-config-react-app module as a reference - which also provides setup instructions for projects not using CRA or those that have been "ejected".

Worth exploring and extending Automattic's wpcalypso configurations as well. There's also the wpcalypso/react for React projects included in that repo - see README. From there, I may only need to make minor adjustments. See the Calypso's .eslintrc file as an example of a project that extends these configs and adds a small handful of overrides.

The .eslintrc-base.jsonfile is a simple and flexible configuration for most React projects.

Referenced from the Frontend Masters course Complete Intro to React, v5 by Brian Holt.

Requires the following installations:

• "babel-eslint"
• "eslint"
• "eslint-config-prettier"
• "eslint-plugin-import"
• "eslint-plugin-jsx-a11y"
• "eslint-plugin-react"
• "eslint-plugin-react-hooks"

Run npm i -D babel-eslint eslint eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks