Add Eslint, Prettier, and Airbnb Style Guide to Your Project.
Tags: javascript, tutorial
Published: 2021-04-19 06:11:54

## 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.

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

## ESLint

[ESLint](https://github.com/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](https://www.npmtrends.com/)

![ESLint donwload graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4l9jnxf2rluf0ietq7m.png)

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

```bash
npx eslint --init
```

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

![Seting up eslint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w70nlezoe4b9srh2o2bh.gif)

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

```js
// .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.

![Select airbnb style guide](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pum28tsc74cjdjwmwlt1.png)

**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](https://github.com/airbnb/javascript) 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](https://github.com/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

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

```

Now let's add prettier to .eslintrc.js

```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](https://code.visualstudio.com/)

![Installing eslint and prettier extension for vscode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kf4ffcm0q7n298chmv44.gif)

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

```json
  "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

```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.

![Selecting React framework while setting up eslint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zyg9xwfsdgq0kzxo50g5.png)

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.

![Removing React](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kppv55m9lwwo2kh796q.gif)


## 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?_