Setup ESLint for React and VSCode

setup.md

---

This setup has been merged and moved to https://github.com/xypnox/JSsick/blob/master/React/README.md and will be subsequently updated there. The content below may become out of date as such.

---

Installation

VSCode Specific

Install ESLint plugin for VSCode: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Project Specific

This must be run on a per project basis. Although you can install it globally as well.

yarn add eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react  prettier eslint-config-prettier eslint-plugin-prettier -D

Configuration files

.eslintrc

This file should be located at the root directory of your react project and is used as settings for eslint. These settings work well for me. Modify them as you please.

{
  "extends": [
    "airbnb",
    "prettier",
    "prettier/react"
  ],
  "rules": {
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [
          ".js",
          ".jsx"
        ]
      }
    ],
    "no-console": 0,
    "react/no-unused-state": 1,
    "prettier/prettier": [
      "warn",
      {
        "trailingComma": "es5",
        "singleQuote": true,
        "printWidth": 100
      }
    ]
  },
  "parser": "babel-eslint",
  "plugins": [
    "prettier"
  ]
}

VSCode / settings.json

These are the settings for VSCode. They can e edited by going to settings (Ctrl + ` ) then clicking the {} icon.

{
  // ... Other Settings ...
  
  
  // ESLint
  // formatting using eslint
  // let editor format using prettier for all other files
  "editor.formatOnSave": true,
  // disable editor formatting, so eslint can handle it
  "[javascript]": {
      "editor.formatOnSave": false,
  },
  // available through eslint plugin in vscode
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
}

Reference

https://medium.com/appstud/setup-eslint-and-prettier-together-for-react-and-react-native-projects-in-visual-studio-code-78772d58358d