Setting up ESLint & Prettier for React Development in VSCode

Hayk Baghdasaryan
Nov 19, 2019 · 2 min read

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:

A config file for ESLint.

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

A config file for Prettier.

That’s it. We did it!

Here are some notes though.


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 :)

Hayk Baghdasaryan

Written by

Full-Stack Web Developer. Tech Enthusiast.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade