Add Eslint, Prettier, and Airbnb Style Guide to Your Project.

Why even use ESLint.

As we all know Javascript is a dynamic language i.e, there is a lot of room to make errors and write bad code. So to prevent some of these errors we have ESLint with us.

Creating a Project

I assume you have nodejs installed on your system.
Now open your terminal.

Let's create a sample vite project in which we are going to install ESLint (NOTE: You can add ESLint in any javascript project).

You can create a vite project by running the following commands.

npm init @vitejs/app eslint-app --template vanilla
cd eslint-app
npm i

ESLint

ESLint is a Javascript tool used for linting common errors and anti-patterns in your code. It is used by javascript devs all around the world.

Here is a graph from npmtrends.com

After reading this post you are going to be one of those devs.

Installing ESLint

Now we can add ESLint to our app. It is as easy as running

npx eslint --init

Now ESLint will ask you some questions related to your app.

Eslint has generated a .eslintrc.js file, this file is the file used to configure ESLint.

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["airbnb-base"],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
  },
  rules: {},
};

Airbnb

When we set ESLint in our app we can choose to use the Airbnb style guide.

So what is the Airbnb style guide. Airbnb style guide is a set of guidelines and some common best practices for writing good code.

The Airbnb style guide is one of the most stared style guides on Github.

NOTE: eslint-config-airbnb-base does not comes with linting rules for react, if you do want rules for react consider using eslint-config-airbnb

Now finally let's add prettier

Prettier another tool used by developers to format their code.

Don't get confused between ESLint and prettier, ESLint is a linter that finds errors in your code on the other hand prettier is a code formatted.

Installing Prettier

So to add prettier to our project run the following commands

npm i eslint-config-prettier eslint-plugin-prettier prettier -D

Now let's add prettier to .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["airbnb-base", "prettier"],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
  },
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error",
  },
};

Some Pro tips:

Here are some tips to make your experience better.

1: Install prettier and ESLint extension for VSCode

2: Add the following lines in your setting.json (VSCode only).

  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }

This automatically formats and fixes all fixable errors in your code on save.

3: Add a lint and format script in package.json

// ...

  "scripts": {

    "lint": "eslint --fix main.js",

    "format": "prettier -w ."

  }

  // ...

NOTE for React Apps

You might have some problem (I had some) if you choose to use react as a framework while setting up ESLint and then add prettier then.

It is because both react style guide and prettier try to format and lint your code.

So, I recommend removing the react plugin from the .eslintrc.js (don't remove prettier) because the eslint-config-airbnb (Airbnb's style guide) also has rules and guidelines for React.

Conclucsion

Writing maintainable javascript is hard but with help tool
like ESLint, prettier, and typescript, we can make it a lot easier.

Had any problem comment down below?

Comments

[devluxv20]

Thank you! Thank you! Thank you! This whole Prettier and linting matter is so obfuscated by an over abundance of options. Config options, plugin options, extension options, and then Prettier AND linting options... Ugh! There are plenty of walkthroughs that try to make things easy, but fail to to include the "why" underwriting the "how". This ultimately makes things that much more complicated when something goes wrong down the road, because a list of steps is only information, not practice knowledge. Thank you for taking the time to 'teach' and provide resources along the way. This is top notch. I followed the steps and my code lit-up like Las Vegas. I can see now that I have some extra work to do on my code, so I better get to it. I look forward to digging through your other posts, and I will gladly be passing this article along to my entire cohort. Cheers!

[Zarv]

Glad you loved this so much I will try writing more this month, and also update this post.

[FGibi]

Hi, may I ask what theme are you using?

[Zarv]

Sorry for replying so late, I am using Shades of Purple

[Justin Golden]

Saw there are no comments and just figured someone should thank you for this. This helped me fix my problem with prettier going against my airbnb eslint setup : )

[Youssef elkobi]

Thank you for making our life easier !

[Marv]

This is really good, thank you Saurabh!