# How to Configure ESLint For Your Project From Scratch

ESLint is a linter that helps to improve the code quality and fix bugs beforehand to avoid them from coming at runtime. It also helps to avoid hard to debug issues in the future.

Knowing how to use ESLint is very important as most companies are actively using it.

There are also other linters available like jslint, jshint but ESLint is the most widely used and popular.

In this article, we will explore what is ESLint is and how to use it.

Let's get started.

ESLint displays warning or error messages when

- We use a variable without declaring it
- We re-declare the variable
- We try to change the constant value
- We add unnecessary parenthesis
- When we use the wrong syntax

ESLint also provides suggestions based on preferred code style and wrong syntaxes.

> Note that ESLint just displays warnings or errors so you can fix them but it does not stop the program from running.

[ESLint](https://eslint.org/) website is really nice and well documented which describes each part in detail with various rules and information related to that.

## Installation:

Create a new folder with the name `eslint-setup` and from inside this folder execute the following command in terminal:

```js
npm init -y

OR

yarn init -y
```

This will create a `package.json` file.

Now, Install the `eslint` package as dev dependency as it's only used for development and not in production.

```js
npm install eslint --save-dev

OR

yarn add eslint --dev
```

This will add `eslint` entry into the `devDependencies` section of the `package.json` file.

## Basic Configuration

Create a new file `index.js` in your `eslint-setup` folder and add the following variable declaration inside it and save it:

```js
var name;
```

You will see that, there is no error shown. This is because we need to do two things.

- Install the eslint VS Code extension
- Create .eslintrc file

So let's do that.

Install the ESLint VS Code Extension as shown below:

![eslint.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1629857907342/vHZgM9Dry.gif)

Now Create a new file `.eslintrc`( doteslintrc) with the following code:

```js
{
 "extends": "eslint:recommended"
}
```

This will add support for basic recommended ESLint rules. Save the file and if you open `index.js`, you will see a red underline for the variable with the message.

![no_unused.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629858147007/2y6UzFKDx.png)

So the ESLint will make sure that you are not creating unnecessary variables which will never be used. 

The name in brackets in the error message (no-unused-vars) is the name of the rule which we can configure in the `.eslintrc` file to either show or hide the message.

If you don't want to see that red underline, you can disable it in your `.eslintrc` file by adding it as a rule:

```js
{
  "extends": "eslint:recommended",
  "rules": {
    "no-unused-vars": "off"
  }
}
```

**With this change, it will not show the red underline but generally, you should not disable the `no-unused-vars` rule as it helps to avoid creating unused variables.**

If you want to disable some rule only for a particular line and don't want to disable it in the `.eslintrc` file, then just add the following line before the line for which you want to disable the rule:

```js
// eslint-disable-next-line max-len
<div className={`${isVisible ? 'show suggestion-box' : 'suggestion-box'}`}>
```

The above line will disable the maximum length eslint error so you'll not see an error for that line if the maximum allocated length for the line exceeds.

Now, let's use some ES6 features in our `index.js` file:

Open `index.js` file and add following code inside it:

```js
const user = 'Harry';
console.log(user);
```

Now, you will see a red underline for the const keyword.

![reserved.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629858372825/A21oupeKh.png)

This is because by default ESLint runs code in an ES5 environment.

To specify ES6 and specify that the code can be run in a browser or node environment, we can add that as another property in the `.eslintrc` file:

```js
{
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 6
  },
  "env": {
    "node": true,
    "browser": true,
    "es6": true
  }
}
```

Here, in `parserOptions`, we specify which ecmaVersion to use.

If you hover over the number 6, you can see additional information about all available versions to use.

![versions.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629858470631/O6UbR5Kli.png)

You can change the value as per your need.

You can see all available environments [HERE](https://eslint.org/docs/user-guide/configuring#specifying-environments).

Navigate to [this URL](https://eslint.org/demo) and click on the Rules Configuration button and you can check and uncheck the environments and verify the code by typing in the textarea.

![eslint_test_areas.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629858810955/Pzb-EH2zb.png)

## Linting as per Airbnb Style guide:

Using `"extends": "eslint:recommended"` inside `.eslintrc` file is fine but it does not cover all styles guidelines. There are more usable and widely used guidelines in all projects provided by Airbnb which you can access [HERE](https://github.com/airbnb/javascript).

These guidelines, help us to

- Avoid creating objects using a new operator when required.
- Also displays a warning when we use let instead of const if the variable is not going to change.
- Helps to add and avoid extra spacing when using operators or functions.
and much much more.

Airbnb provides JavaScript and React linting support.

To use linting for just JavaScript without React, you can install the following dependencies:

```js
npm install eslint-config-airbnb-base@latest eslint-plugin-import --save-dev

OR

yarn add eslint-config-airbnb-base@latest eslint-plugin-import --dev
```

You can find more information about it [HERE](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base).

To setup linting for JavaScript with React, install the following dependencies:

```
npm install eslint-config-airbnb@latest eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y --save-dev

OR

yarn add eslint-config-airbnb@latest eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y --dev
```

You can find more information about it [HERE](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb).

and in the `.eslintrc` file, change

```js
"extends": "eslint:recommended",
```

to

```js
"extends": "airbnb",
```

Now, let's write some React code and we can check the linting.

Now, open the `index.js` file and add the following code inside it:

```js
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => <h1>This is some JSX</h1>;

ReactDOM.render(<App />, document.getElementById('root'));

```

If you save the file, you will see many red underlines saying:
- unable to find packages react, react-dom
- 'App' is never reassigned. Use 'const' instead
- JSX not allowed in files with extension 'js'

![errors_.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629859591705/FooqJiTAh.png)

To fix the first error, install the `react` and `react-dom` packages:

```js
npm install react react-dom

OR

yarn add react react-dom
```

Now, for the second error is we need to change `let` to `const` as it's never changed.

So it’s always recommended to use `const` when its value is not going to change.

As you can see, linting gives helpful suggestions to write better code.

If you want to learn more information about what any error means, you can just copy the rule name displayed in brackets when you mouse hover over the red underline and search in google. Like `prefer-const eslint` and it will show you all the information about how to fix and what issues it causes.

To find more information about any rule and how to disable it, you can search for that rule on the rules page [HERE](https://eslint.org/docs/rules/).

If you mouse over the JSX red underline on line number 6, you can see its rule name "react/jsx-filename-extension".

If you can't find the rule on the rules page [HERE](https://eslint.org/docs/rules/), you can search for it in google as `react/jsx-filename-extension` eslint and you will see the result showing how to fix it as shown [HERE](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md).

So to disable this check, we can add a rule in the `.eslintrc` file:

```js
"rules": {
    "react/jsx-filename-extension": "off"
}
```

![disable_extension_error.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629860039004/UQQWE2zI9.png)

The value is generally one of the following:

- warn: to show as a warning
- error: to show as an error
- off: to not show the red underline

You may find sometimes, error code is used in the documentation, instead of the text warn, error or off.

0 is for off, 1 is for warn and 2 is for error.

Now, if you save the `.eslintrc` file, you will see that, there are no more red underlines in the `index.js` file.

That's it about this article. Hope you learned something new.

### Thanks for reading!

You can find Complete Github Source Code for this article with the additional configuration in .eslintrc for better linting [HERE](https://github.com/myogeshchavan97/eslint-setup).

Check out my recently published [Mastering Redux](https://master-redux.yogeshchavan.dev/) course.

In this course, you will build 3 apps along with food ordering app and you'll learn:

* Basic and advanced Redux
* How to manage the complex state of array and objects
* How to use multiple reducers to manage complex redux state
* How to debug Redux application
* How to use Redux in React using react-redux library to make your app reactive.
* How to use redux-thunk library to handle async API calls and much more

and then finally we'll build a complete [food ordering app](https://www.youtube.com/watch?v=2zaPDfCKAvM) from scratch with stripe integration for accepting payments and deploy it to the production.

[<img src="https://gist.github.com/myogeshchavan97/98ae4f4ead57fde8d47fcf7641220b72/raw/c3e4265df4396d639a7938a83bffd570130483b1/banner.jpg">](https://bit.ly/3w0DGum)

**Want to stay up to date with regular content regarding JavaScript, React, Node.js? [Follow me on LinkedIn](https://www.linkedin.com/in/yogesh-chavan97/).**

[<img src="https://cdn.buymeacoffee.com/buttons/default-yellow.png" >](https://www.buymeacoffee.com/myogeshchavan97)