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.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and youโ€™ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer โ€” welcome home. Itโ€™s easy and free to post your thinking on any topic. Write on Medium

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