Let’s dive in!

But first, some quick info.

ESLint

A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease. [source]

Prettier

What is Prettier? An opinionated code formatter; Supports many languages; Integrates with most editors; Has few options [source]

VSCode

Visual Studio Code is a source-code editor developed by Microsoft for Windows, Linux and macOS. [source]

0. Create your app using CRA (create-react-app)

… if you haven’t already. If you have, you can skip this step.

> npx create-react-app my-project

I named the project my-project. You can use the name of your project instead.

1. Install required dependencies:

> npm i -D eslint@6.6.0 prettier babel-eslint eslint-plugin-react eslint-plugin-import eslint-config-prettier eslint-config-airbnb eslint-plugin-prettier

Specifying -D flag will make dependencies appear under “devDependencies” in package.json .

2. Install VSCode extensions for ESLint and Prettier:

Launch VS Code Quick Open ( Ctrl+P ), paste the following commands, and press enter.

For ESLint:

ext install dbaeumer.vscode-eslint

For Prettier:

ext install esbenp.prettier-vscode

OR

Search for extensions directly in VSCode by navigating to Extensions section of activity bar and install using Install button.

3. Create .eslintrc.js file in a root folder of your project with the following content:

A config file for ESLint.

4. Create .prettierrc.js file in a root folder of your project with the following content: