Skip to content

Instantly share code, notes, and snippets.

@yuradmt
Last active September 27, 2019 13:11
Show Gist options
  • Save yuradmt/3529e09baeb6220cb91b1c9cfe11f3df to your computer and use it in GitHub Desktop.
Save yuradmt/3529e09baeb6220cb91b1c9cfe11f3df to your computer and use it in GitHub Desktop.
Using AirBnb style guide with React
  1. yarn add eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-react eslint-plugin-react-hooks

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

  3. eslint --init

  4. In .eslintrc.json:

{
  "parser": "babel-eslint",
  "parserOptions": {
    "sourceType": "module",
    "allowImportExportEverywhere": true
  },
  "extends": [
    "airbnb",
    "plugin:react/recommended",
    "eslint:recommended",
    "prettier"
  ],
  "env": {
    "browser": true,
    "node": true
  },
  "rules": {
    "prefer-destructuring": "off",
    "arrow-parens": ["off"],
    "arrow-body-style": "off",
    "consistent-return": "off",
    "comma-dangle": "off",
    "no-shadow": "off",
    "react/no-array-index-key": "off",
    "generator-star-spacing": "off",
    "import/no-named-as-default": "off",
    "import/no-named-as-default-member": "off",
    "import/no-useless-path-segments": "off",
    "import/no-unresolved": "error",
    "import/no-extraneous-dependencies": "off",
    "jsx-a11y/anchor-is-valid": "off",
    "jsx-a11y/no-static-element-interactions": "off",
    "jsx-a11y/click-events-have-key-events": "off",
    "lines-between-class-members": "off",
    "no-console": "off",
    "no-use-before-define": "off",
    "no-multi-assign": "off",
    "no-nested-ternary": "off",
    "react/destructuring-assignment": "off",
    "react/jsx-one-expression-per-line": "off",
    "react/jsx-wrap-multilines": "off",
    "react/no-access-state-in-setstate": "off",
    "react/no-did-update-set-state": "off",
    "react/prop-types": "off",
    "react/sort-comp": [
      "error",
      {
        "order": [
          "type-annotations",
          "static-methods",
          "lifecycle",
          "everything-else",
          "render"
        ]
      }
    ],
    "react/jsx-no-bind": "off",
    "react/jsx-filename-extension": [
      "error",
      { "extensions": [".js", ".jsx"] }
    ],
    "react/prefer-stateless-function": "off",
    "react/require-default-props": "off"
  },
  "plugins": ["prettier", "react", "react-hooks"]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment