Setting up ESLint & Prettier for React Development in VSCode

Hayk Baghdasaryan

·

Follow

2 min read

·

Nov 19, 2019

--

1

Listen

Share

Struggling with this whole ESLint & Prettier thing, eh?

Let me guess. Spent hours trying to set up the project, when you should’ve had pushed your first commit already? I feel you. That’s why I won’t be torturing you with long paragraphs filled with stories about depressed developers and their unborn projects.

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:

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

That’s it. We did it!

Here are some notes though.

• You may need to reload VSCode window for changes to take place. To do so press Ctrl+Shift+P to open command palette, and type Reload Window or just press Ctrl+R.
• Some of the rules in both config files are optional, because I’ve adjusted them according to my needs. You can modify them as you wish.
• This article is missing details, because the initial aim was to provide fast and straightforward solution for the task of setting up the project. You can find additional info about installed packages and specified rules on the world wide web.

PS. I’ve got a gift for you.

Here’s a link to the github repo with the project already setup. Feel free to use it for your own needs.

Thanks for reading :)