Setup ESLint and Prettier together for react and react-native projects in Visual Studio Code

Kumar Saurav ๐Ÿ˜Ž
Apr 3, 2018 ยท 2 min read

There is a lot of confusion while setting up eslint and prettier together for react and react-native projects. I too faced the same problem when I moved to the javascript/react/vscode world, I wrote this post where few things were right and some were wrong.

So, lets correct those mistakes.

Step 1

Installing eslint and eslint-config-airbnb

  • Install eslint plugin for vscode
  • Install eslint (you can also install this globally but I like to install it locally)
yarn add eslint -D
  • Install eslint-config-airbnb which need few other dependencies as well
yarn add eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react -D
  • Create .eslintrc file in the root directory and add the following lines
{
"extends": [
"airbnb"
]
}

Now, you will start seeing lint errors in your code.

Step 2

Installing prettier for code formatting (If you have prettier plugin installed via vscode plugin, uninstall it as it causes the code formatting twice)

  • Install prettier and related dependencies
yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
  • Update .eslintrc with following lines
.eslintrc

Step 3

VSCode user settings

  • Add following line to user settings
User settings

Now, whenever you save a file the code will be formatted using the eslint config which is airbnb in this case. Please, comment you find any better ways for doing this.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and weโ€™ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium โ€” and support writers while youโ€™re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store