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