ESLint + Prettier in 5 Minutes

README.md

ESLINT + Prettier in 5 Minutes

This short guide is meant to get you going with ESLint and Prettier quickly and pain-free. This guide also assumes that you have Node and, by extension, npm installed. If that is not the case, you can head over here to download and install: https://nodejs.org/en/download/.

Why Use a Linter?

Code quality and maintainability is important. Part of code quality is ensuring that code is easy to read, so we can make use of ESLint and Prettier to help accomplish this. ESLint allows us to set a style and automatically fix any code that doesn't conform to that style. Prettier is a more powerful formatter that supplements ESLint very nicely.

Setting Up (TL;DR)

Navigate to your project directory in the terminal, run npm init if you haven't already to set up your project, and run the following commands in your terminal:

1. npm install eslint --save-dev

2. ./node_modules/.bin/eslint --init

3. Select the following:

   • use a popular style guide
   • Airbnb
   • y if using React, N if not
   • JSON

4. npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

5. Replace contents of .eslintrc.json with the following:

{
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": [
      "error",
      { "singleQuote": true, "trailingComma": true }
    ]
  }
}

NOTE: If you're not using React then you will need to change airbnb under the extends property to airbnb-base.

You're done! Create a file with a .js extension and test out your new linter.

Setting Up

Navigate to your project directory in the terminal, run npm init if you haven't already to set up your project, and run the following commands in your terminal:

1. ESLint recommends a local install. I find this is generally better practice as you have a greater chance of running into versioning issues with global installs.

   • npm install eslint --save-dev

2. Set up a configuration file.

   • ./node_modules/.bin/eslint --init

3. You are presented with a series of options:

   • I recommend selecting use a popular style guide as they each have plenty of documentation.
   • I generaly prefer the Airbnb style guide.
   • I tend to set up React projects so I answer y to the question: Are you using React?.
   • Set format for config file to JSON. Any of these work, I just find this easiest to work with.

Now that we've installed ESLint, we need to install Prettier and set it up so that it plays nicely with whatever style guide we selected in our ESLint set-up. In situations where Prettier conflicts with ESLint, we will want to default to Prettier, so we will set this up as well.

4. Install the following:

   • npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

5. We need to modify our .eslintrc.json to default to Prettier when in conflict with ESLint. Ensure that your .eslintrc.json looks like the following:

{
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": [
      "error",
      { "singleQuote": true, "trailingComma": true }
    ]
  }
}

NOTE: If you're not using React then you will need to change airbnb under the extends property to airbnb-base.

Congrats! You now have a working ESLint set-up. Anytime you have a conflict between ESLint and Prettier you can modify the rules in your .eslintrc.json file. You can now create a file with a .js extension and watch your code get magically formatted!