Setting Up ESLint with Prettier for Individual Projects

30 Jan 2021 Last modified at: 2021-02-06

I provide directions for configuring Prettier & ESLint in VS Code on a project basis

This post is intended for students at Thinkful.

Date	Change
2/1/2021	Added a prerequisite step, #3, adding a setting to settings.json
2/4/2021	1. Updated React GitHub gist, 2. Created edits table
2/5/2021	1. Updated the copy buttons 2. Gave each script a file name
2/6/2021	1. Updated react gist to download as I added more rules to turn off 2. Removed the embedded gist, and linked directly to gist

edits to this post

This post just shows you how to set up you class projects, in the future, I will be creating a post so you can set up Prettier and ESLint to work together the way you want for your own projects. Which, isn’t actually that hard, or time consuming. For now we want to focus on good practices.

1. Prerequisites
2. Installation instructions
   1. Pre-React
   2. React
   3. Backend with Node

So there is this extension, ESLint, with over twelve million installs, is the most popular Javascript extension. Also there is Prettier, which you should have installed at Thinkful’s suggestion, happens to be the second most popular VS Code extension. These two are popular for a good reason!

ESLint will do what we call code linting actively, as you code, check your syntax, find common coding bugs, and additionally enforce styles. All of the ESLint options are highly configurable.

It will:

• Auto fix well-known issues or style goofs on save. If configured, or when the Format Document command is run.
• Warn you with identified issues in two ways:
  1. Using squiggly lines beneath the offending code
  2. Update the Problems panel, which is in the same area as the debug panel

To use both together requires some setup. Below we will tell ESLint to use it’s rules unless Prettier has an identical rule, in which case Prettier takes precedence.

There are many pre-configured ESLint style configs that people use, if they don’t create their own. You can see some well known ESLint style rules here. We will be using Airbnb JavaScript Style Guide

Prerequisites

1. If not already added to your VS Code, install ESLint and/or Prettier
2. Let us configure VS Code to use code formatters on save. go to Settings>Text Editor>Formatting and make sure that Format On Save has a check

3. Let us configure VS Code to fix some identified eslint issues by adding the following to VS Code’s settings.json

   "editor.codeActionsOnSave": {
     // For ESLint
     "source.fixAll.eslint": true,
   }
   

4. Ensure your project has a package.json

Installation instructions

1. Choose the correct environment and copy the single chained command chain by clicking the button. Run the command from the in Git Bash or the Mac terminal while in the project’s root
2. If VS Code is running, reload or restart VS Code, sometimes the changes won’t take effect until you do.

&& will cause a command to wait on the prior command then execute. \ will allow the command to continue on the next line

In all 3 of the following variations of the command will:

• Install Prettier and ESLint npm packages along with required packages to make them work together and in the environment selected.
• Install the AirBnB’s Style npm package and related packages
• Download the appropriate .eslintrc.js file which will:
  • Configure ESLint to work with Prettier and AirBnB style guide
  • Turn on the rule that a variable can’t be less than 2 characters
  • Make an exception for the _ variable as certain packages like lodash and underscore have conventionally been assigned to the _ variable.

At the end of the post I have all 3 variations of the ESLint config files that we will be using which I suggest taking a look at.

Pre-React

In addition to installing NPM packages, this command will auto download browser-pre-react.eslintrc.js, which you can find in this gist on Github and saves it as .eslintrc.js

# file: "pre-react.sh"
npm i -D prettier eslint eslint-config-airbnb-base eslint-config-prettier \
         eslint-plugin-import \
&& curl \
"https://gist.githubusercontent.com/brainomite/d259b1d17b1d70959ab5c6f6ecd019a9/raw/d9e331cc63a943298132ab7ee4a150330d636a37/browser-pre-react.eslintrc.js" \
--output .eslintrc.js

React

Having warnings during install of these packages are normal

In addition to installing NPM packages, this command will auto download react.eslintrc.js, which you can find in this gist on GitHub and saves it as .eslintrc.js

# file: "react.sh"
npm i -D prettier eslint-plugin-react eslint-config-airbnb eslint \
         eslint-plugin-import eslint-plugin-jsx-a11y \
         eslint-plugin-react-hooks eslint-config-prettier \
&& curl \
"https://gist.githubusercontent.com/brainomite/d259b1d17b1d70959ab5c6f6ecd019a9/raw/88d1a0361b1bf5120361a4b664ae0ba73167f03c/react.eslintrc.js" \
--output .eslintrc.js

Backend with Node

In addition to installing NPM packages, this command will auto download backend.eslintrc.js, which you can find below in this gist on Github and saves it as .eslintrc.js

# file: "backend.sh"
npm i -D prettier eslint-config-airbnb-base eslint eslint-plugin-import \
         eslint-config-prettier \
&& curl \
"https://gist.githubusercontent.com/brainomite/d259b1d17b1d70959ab5c6f6ecd019a9/raw/d9e331cc63a943298132ab7ee4a150330d636a37/backend.eslintrc.js" \
--output .eslintrc.js