Skip to content

Instantly share code, notes, and snippets.

@danielwrobert
Last active August 19, 2019 17:26
Show Gist options
  • Save danielwrobert/31160b75ba6d9bcfda62750afbc7266a to your computer and use it in GitHub Desktop.
Save danielwrobert/31160b75ba6d9bcfda62750afbc7266a to your computer and use it in GitHub Desktop.
My ESLint configurations
{
"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" ]
}
]
}
}
{
"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"
]
}
]
},
}
{
"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"
}
}
}
@danielwrobert
Copy link
Author

danielwrobert commented May 6, 2018

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.

@danielwrobert
Copy link
Author

danielwrobert commented Jul 24, 2018

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".

@danielwrobert
Copy link
Author

danielwrobert commented Jul 25, 2018

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.

@danielwrobert
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment