loading...
Cover image for How I set eslint and prettier for a React project on vs code

How I set eslint and prettier for a React project on vs code

mendoza profile image David Mendoza (He/Him) Updated on ・2 min read

Hello guys, so I was just taking a look on some of the most recent post, and more that any other thing I saw "How i set my tests for react" but I think one of the most important parts of setting a new react app, its the linting and the styles.

Lets install everything

So we are going to need some packages, well... they are a lot(7 to be precise)... but all of them are going to be in your devDependencies so it wont matter for your deploy.

You are going to need to execute this command on your react project root

npm install --save-dev babel-eslint eslint@^6.6.0 eslint-config-airbnb eslint-plugin-react eslint-config-prettier eslint-plugin-prettier prettier
Enter fullscreen mode Exit fullscreen mode

Perfect, so once you have the 7 packages installed you are going to need to set prettier and eslint on two separate files for the executors.

.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, "jest": 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"]
  }
}
Enter fullscreen mode Exit fullscreen mode

.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"
}
Enter fullscreen mode Exit fullscreen mode

That should be all, now we just need to set vs code.

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)

Either use ctrl+shift+p to excute the command "ext install "
or just look for them on the store.

to style your code you just need to use ctrl+shift+i (alt+shift+f on windows) on the .js or .jsx file you need to style

That should be all, if you need any kind of help with this just leave a comment and I will try help you out.

Discussion

pic
Editor guide
Collapse
brandon_wie profile image
Brandon Wie

Hi David,
I am new to this ESlint-airbnb setting and Prettier "set-up" thing, but so far, this is the most recent one and has no error come up. Thank you so much for your post. I joined this community just to thank you for saving my time. Thanks again.

Collapse
mendoza profile image
David Mendoza (He/Him) Author

Oh man... You melt my heart, I hope this helps you a lot, thanks for your comments and appreciations ❤️

If you ever have a problem with js try and reach me I will try to help you

Collapse
brandon_wie profile image
Brandon Wie

Will do. Thanks. Wish you all the best 👍🏻 :)

Collapse
patarapolw profile image
Collapse
mendoza profile image
David Mendoza (He/Him) Author

You need to add mocha on your env key on the . eslintrc