4-Step Guide to Setting Up ESLint & Prettier
Get ESLint and Prettier Up & Running in just 2 mins
Get ESLint and Prettier Up & Running in just 2 mins
One of the most common issues when setting up a new Express or React project is setting up ESLint and Prettier to work together.
If you are wondering what is the difference between them,
Prettier is code formatter which takes care of how your code should look like. ESLint is a linter which does more than just formatting. It also helps find code errors which can lead to bugs.
This short guide is dedicated to the countless beginners who might be scratching their heads on this same issue.
Note: We will be using VS Code in this tutorial, but it should pretty much work the same way for other popular code editors.
Step 1. Installing Dev Dependencies
The first step is to install the required npm packages:
npm i eslint eslint-config-prettier eslint-plugin-prettier prettier --save-dev
The --save-dev
flag allows us to add these packages as development dependencies.
Step 2. Configuring ESLint
Now, we are going to configure ESLint to use Prettier for formatting. Create a file .eslintrc.json
in the root of the project folder.This file will contain all our configs for ESLint.
There’s more you can do to configure ESLint — check out the documentation here.
Step 3. Configuring Prettier
However, ESLint and Prettier can disagree on a variety of formatting issues. To tell Prettier what options it should exactly use, we add a .prettierrc.json
file in our root folder.
Here, I have specified what are the formatting styles to be used. For example, semi: true
tells Prettier to add semicolons after each statement and tabWidth: 2
specifies to use 2 spaces for each indent level.
Similarly, you can specify whichever options you prefer to use. For a full list of options, check the documentation from Prettier here.
Step 4. Configuring Auto Format in Editor
We can ask VS Code to format our code every time we save the file. Press Cmd + ,
on macOS or Ctrl + ,
on Windows to bring up the Settings pane.
Search for “Format” in the search field and check the box that says “Editor: Format on Save”.
That’s all folks!
There you go! ESLint + Prettier configuration, done in just 4 easy steps! Give this a try for your next project and create your own customised configuration and rules using .eslintrc.json
and .prettierrc.json
.
JavaScript In Plain English
Did you know that we have four publications and a YouTube channel? Find them all at plainenglish.io and subscribe to our YouTube channel!