How to set up eslint and prettier on a react project for vs code

eslint and prettier.md

Lets install everything

npm install --save-dev babel-eslint eslint eslint-config-airbnb eslint-plugin-react eslint-config-prettier eslint-plugin-prettier prettier

.eslintrc

So we need a file on our react project's root called ".eslintrc". Now here we are going to write as a common JSON file, lots of people have different eslint settings, but I have come to see that this ones are easy and straight forward.

// This is your .eslintrc file
{
  "parser": "babel-eslint",
  "parserOptions": {
    "sourceType": "module",
    "allowImportExportEverywhere": false,
    "codeFrame": false
  },
  "extends": ["airbnb", "prettier"],
  "plugins": ["react", "prettier"],
  "env": { "browser": true,"es6": true},
  "rules": {
    "max-len": ["error", { "code": 100 }],
    "prefer-promise-reject-errors": ["off"],
    "react/jsx-filename-extension": ["off"],
    "react/jsx-closing-bracket-location": [1, "tag-aligned"],
    "react/prop-types": ["off"],
    "no-return-assign": ["off"]
  }
}

.prettierrc

Once again we need a file on our react project's root called ".prettierrc". And here too we are going to write as a common JSON file, lots of people have different prettier settings, but I have come to see that this ones are easy and straight forward.

// This is your .prettierrc file
{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": false,
  "jsxBracketSameLine": true,
  "trailingComma": "es5"
}

vs code set up

Actually this is the shortest of all the blog, you just need to install to extensions to your vs code.

1. Eslint (dbaeumer.vscode-eslint)
2. Prettier (esbenp.prettier-vscode)