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?