Setup ESLint and Prettier VS Code extensions for React app

Introduction

This is a quick beginner's guide to setup ESLint and Prettier in VS Code. This guide only covers installing VS Code extensions and editor settings. The following are the benefits for setting up your code editor:

  • Both ESLint and Prettier are pluggable extensions
  • Increases productivity by enabling automatic formatting
  • Reduces chances of potential bugs
  • Helps in writing clean and readable code

ESLint

ESLint is a javascript linter. It is a static code analyzer that helps in identifying problematic patterns in your code. For example, one popular ESLint rule is no-unused-vars which ensures there are no unnecessary variable declarations. With no-unused-vars, the code below would be incorrect: prettier-1.gif You have to just remove the declaration for variable "x" to correct it: eslint-2.png

Prettier

Prettier is a opinionated code formatter. It parses the code and automatically reprints it according to the coding style such as maximum length of line and wrapping the code when necessary.

Prerequisites

The following are the prerequisites for this setup:

  • VS Code is already installed.
  • [OPTIONAL] Create a new React app using create-react-app. This is the easiest way to start a new React project. create-react-app.png NOTE: You can try out the editor settings with your existing JS projects as well.

Setup VS Code

Follow the steps below to install and setup ESLint and Prettier in VS Code:

  • Install ESLint and Prettier VS Code extensions.
  • Open editor settings(Press CTRL + ,) and enable Format On Save format.PNG or you can put the line mentioned below in settings.json. formatonsave.png

Now, try to format any javascript file and check. prettier.gif

Subha Chanda's photo

I think prettier is enough for basic editing. I am using prettier. And format on save is available on it. And react also gives the warning 'no unused vars.' 😊

Rutik Wankhade's photo

I am learning react and didn't know about these awesome extensions. This is very helpful. Saves a lot of time. Thanks for sharing.

Bolaji Ayodeji's photo

Really insightful!

Victoria Lo's photo

Nice! I didn't know about the extensions and now I'm using it :)

Faith Gaiciumia's photo

I couldn't find my format on save but now I do. Thanks 😍

Faith Gaiciumia's photo

Front-End Developer

I also liked how you used create-react-app to generate code that we could use. However, I think it'd be cooler if you could mention that the create-react-app is for generating code we could use and not really a necessity to use ESLint and Prettier.

Rahul Kumar Borah's photo

Faith Gaiciumia Thanks for the suggestion. I will update it accordingly.

Edidiong Asikpo's photo

This is just what I was looking for. Thank you for sharing.