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.

ESLint and Prettier working on Visual Studio Code with create-react-app

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.