A quick guide to setup Eslint with Airbnb's style guide and Prettier
Tags: eslint, prettier, airbnb, beginners
Published: 2020-11-16 14:51:00

[Eslint](https://eslint.org/) and [Prettier](https://prettier.io/) are probably the most used tools in web development. Eslint helps to find and fix problems in your JavaScript code whilst Prettier is an opinionated code formatter.

Eslint is very flexible linter. You can customize it as per your needs. But for a beginner, the options provided by Eslint can be overwhelming. And this is where [style guide](https://github.com/airbnb/javascript) provided by AirBnB comes in handy. 

> Note: There are other popular styles guide too like [Standard Style guide](https://github.com/standard/standard) and [Google's Style Guide for JavaScript](https://google.github.io/styleguide/jsguide.html). The process is same if you want to follow these guides instead.

## Eslint

To install Eslint we will use [npm package manager](https://www.npmjs.com/) which comes alongside with Node. Type the following command to create a package.json file with default configuration: 

```bash
npm init -y
```

Now we are ready! Install Eslint with following command.

```bash
npm install eslint --save-dev
```

Eslint requires a configuration file to enforce rules. A easy way to create a configuration file is to simply type the following command

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

This command will give you few options to choose from. 
We'll go with the third options. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/azn6javkhdysiw3q7042.png)

Now press enter and choose other options as per your need. Until you come across this option,

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hp6vmckniuwg885qki82.png)

Here, go with the first option and then choose the Airbnb's style guide next.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q4zkjz7elg6u4coqvf1x.png)

Depending upon what you choosed, your package.json file will look like this:

```json
{
  "name": "eslint",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^7.13.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-plugin-import": "^2.22.1"
  }
}
```

This command also creates a eslint configuration file on your working directory.

```js
module.exports = {
  env: {
    es2021: true,
    node: true,
  },
  extends: [
    'airbnb-base',
  ],
  parserOptions: {
    ecmaVersion: 12,
  },
  rules: {
  },
};
```
Eslint is finally ready to find and fix some bugs. Now you can run Eslint from your terminal but there is an easier option. Install the [eslint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) on VS Code which will directly complain about your mistakes right on your text editor.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fd0n1jwmuh986f3trhyn.png)

## Prettier
Time to bring prettier on the mix, type the following command to install prettier locally

```bash
npm install --save-dev --save-exact prettier
```
Then, create an empty config file to let editors and other tooling know you are using Prettier:

```bash
echo {}> .prettierrc.json
```

This json file holds [rules](https://prettier.io/docs/en/options.html) that prettier will follow to format your code. The basic configuration looks like this:

```json
{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}
```

You can use the Prettier from the commandline, but you get the most from Prettier by running it from your editor. Let's install [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extension for VS Code. After the installation we've to ensure that all our JS file gets formatted by Prettier, so we'll add the following lines in the settings.json file of VS Code.

```json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
```
Now we'll configure VS Code to format our code on each save. On the same settings.json file add these lines:

```json
"editor.formatOnSave": true,
```

## Final Boss
We are nearly done but we've to install one extra npm package i.e [eslint-config-prettier](https://www.npmjs.com/package/eslint-config-prettier) to make Eslint and Prettier play nice with each other. It turns off all ESLint rules that are unnecessary or might conflict with Prettier. Go ahead and install the package.

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

Then, add eslint-config-prettier ( or just prettier) to the "extends" array in your .eslintrc.* file. Make sure to put it last, so it gets the chance to override other configs.

```js
module.exports = {
  env: {
    es2021: true,
    node: true,
  },
  extends: ['airbnb-base', 'prettier'],
  parserOptions: {
    ecmaVersion: 12,
  },
  rules: {},
};
```

That's it!! This was the final step. Now both the eslint and prettier are configured properly. Eslint will complain about the mistakes on your code and Prettier will format it flawlessly.

## Conclusion
This is just tip of the iceberg. There are hundreds of [Eslint Rules](https://eslint.org/docs/rules/) that you can play with. You can also find additional Eslint linting rules for [Node](https://www.npmjs.com/package/eslint-plugin-node), [React](https://www.npmjs.com/package/eslint-plugin-react), [Vue](https://www.npmjs.com/package/eslint-plugin-vue), [Jest](https://www.npmjs.com/package/eslint-plugin-jest) and much more. There is even a package called [eslint-plugin-security](https://www.npmjs.com/package/eslint-plugin-security) that'll help find Security holes on your JavaScript code. I hope this post helped you get started with Eslint and Prettier.