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

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.