How to Use ESLint to Boost Your Programming Skills
Tags: eslint, typescript, javascript, tutorial
Published: 2023-03-13 19:20:02


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80g1ad1e1az7exeuyn0z.png)

In this article I want to talk about a cool tool called code linter! It’s basically like a spell checker, but for code. Its main purpose is to catch any bad coding practices and help make sure that the code looks consistent and easy to read.

If you’re working on a project with other people, a code linter can be super helpful to make sure everyone’s code looks the same. This makes it easier for all of you to understand what each other’s code is doing and work together more efficiently. And if you’re working on a big project, having consistent code syntax is a real game-changer.

It makes it way easier for anyone to read and understand the code, no matter what part of the project they’re working on.

So, in short, a code linter helps minimize bad coding practices and makes sure the code looks consistent and easy to read. And that’s a great thing!

[ESLint](https://eslint.org/) is one of the most popular linters in the JavaScript community. It can help you catch bugs and enforce coding standards, which will make your code more readable and maintainable.

I’m going to start off with a simple project using this command:
```shell
npm init -y
```
Then add a simple JavaScript code like:
```javascript
var example_varaible = "World"
let another_variable = "nothing"

function print(value) {
  const outputResults = 'hello ' + value + "!"
 console.log(outputResults);
}

print(example_varaible)
```
If you run node script.js it works but there are a number of problems that might prevent code like this from your team!

- Semicolons are inconsistent. Some lines have them, others don’t.
- Quotations are inconsistent. Some code uses single, others double.
- Some variable defined but never used
- Some of variables defined in `snake_case` and other defined as `camelCase`

It is actually pretty easy to fix these issues on your own, but it becomes more challenging when you work as a team. That’s why integrating Eslint with your projects is a good idea. It reduces concerns about code quality and makes everything run more smoothly.

## Installation

Now let’s add Eslint to our project with the following command:
```shell
npm install eslint --save-dev
```
Now you need to initialize Eslint with creating a `.eslintrc` file in your root directory of project. You can have it by running the following command which will take you through a little questionnaire in your terminal about your requirement:
```shell
npx eslint --init
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0yeswrv5bphnhfisizwa.png)


And this is `.eslintrc` file
```json
{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest"
    },
    "rules": {
    }
}
```
The `env` section is like telling ESLint which [environment](https://eslint.org/docs/latest/use/configure/language-options#specifying-environments) your code will be running in. If you're writing code for the browser, you can set this to `browser` if its Nodejs use `node`.

`extends` is a cool feature that allows you to use a pre-made list of rules. ESLint comes with a list of recommended rules that you can use.

In `parserOptions`, you can specify which version of JavaScript your code is using. For example, if you set it to 2015, ESLint will give you an error if you use syntax like `const` or `let` instead of `var`. But if you set it to 2016, you can use `const` and `let` without any problems.

The `rules` section is where you can manually set rules for your project. You can choose whether you want ESLint to show a warning or throw an error if it finds a problem.

Now if you look the `scripts.js` file in your editor it shows problems clearly as bellow:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22rbajtbhtlltkymmet8.png)

_My VSC uses Error Lens extensions that highlight errors_

You can also run following command to see all issue in `script.js` file:
```shell
npx eslint script.js
```
Well, Let’s add some rules:
```json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended"],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "quotes": ["error", "double"],
    "semi": ["error", "always"],
    "no-console": "off",
    "indent": ["error", 2]
  }
}
```
I added 4 rules to enforce double quotes, semicolons, removing no-console rule, and two levels of indentation. more rules are [here](https://eslint.org/docs/latest/rules).

Note that each rule can have one of these values:

- "off" or 0 - turn the rule off
- "warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
- "error" or 2 - turn the rule on as an error (exit code will be 1)

## Linting Your Project
With this configuration our `script.js` file has following issues:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zcncimywqdkojvp2nr68.png)

It’s clear that this tool gave us the info we needed to fix our code. It not only tells us about the issues, but it also fixes some of the more basic syntax problems, like quotes and semicolons.

Run the command:
```shell
npx eslint script.js --fix
```
Here is the results:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ep5ujruwyhnfndudhc20.png)

The problems with obvious solutions have been fixed, but sometimes it’s challenging especially when you extends your configuration with other rules.

## Extending Configurations
Let’s take a look at another famous configuration you may need on your projects.

The first one is [Airbnb](https://www.npmjs.com/package/eslint-config-airbnb) which is based on the set of linting rules used by Airbnb software developers. To implement these guidelines for your code, you can easily install it by running the following command:
```shell
npm install eslint-config-airbnb --save-dev
```
and add it into your `.eslintrc` file and inside extends section:
```json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "airbnb"],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "quotes": ["error", "double"],
    "semi": ["error", "always"],
    "no-console": "off",
    "indent": ["error", 2]
  }
}
```
Now if I do this with our example code the result could be like:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3r4snmj9th87e9qf0yq2.png)

As you see, new rules and guides added and works perfectly and give us excellent tips.

## Using ESLint with Prettier
By now, you’ve probably noticed that linters have two kinds of rules:

**Formatting rules**: max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style, …

**Code-quality rules**: no-unused-vars, no-extra-bind, no-implicit-globals, prefer-promise-reject-errors, …

Previously in following article I talk about the power of [Prettier](https://prettier.io/) and its formatting rules that reprint the entire program from scratch in a consistent way.
{% embed https://dev.to/kazemm_dev/transform-your-codebase-with-prettier-a-guide-with-husky-integration-35fk %}
But if you want to use Eslint alongside Prettier most formatting rules of Eslint are unnecessary — even worse they might conflict with Prettier!

Here’s how to turn off rules that conflict with Prettier, or aren’t necessary:

1- Install following packages in your projects:
```shell
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev
```
2- Inside the `.eslintrc` add the following code:
```shell
"extends": ["eslint:recommended", "plugin:prettier/recommended"],
```
3- Add your optional prettier configuration inside `.prettierrc` file:
```json
{
  "printWidth": 80,
  "sem": true,
  "singleQuote": false,
  "tabWidth": 2
}
```
In the following I add prettier to our sample code, as you can see the error is actually from prettier!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xhb0isxw9amt0f2gw8jd.png)

## Using ESLint with React

If you are working with React, you can configure ESLint to work with JSX syntax. Here’s an example of a .eslintrc file for React:
```json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
     "eslint:recommended",
     "plugin:react/recommended"
  ],
  "plugins": [
    "react"
  ]
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "quotes": ["error", "double"],
    "semi": ["error", "always"],
    "no-console": "off",
  }
}
```

## Using ESLint with Vue

And If you are working with Vue, you can configure ESLint to work with Vue templates. Here’s an example of a .eslintrc file for Vue:
```json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
     "eslint:recommended",
     "plugin:vue/recommended"
  ],
  "plugins": [
    "vue"
  ]
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "quotes": ["error", "double"],
    "semi": ["error", "always"],
    "no-console": "off",
  }
}
```

## Using ESLint with Typescript

For Typescripts there are another lints like [tslint](https://github.com/palantir/tslint) (which is deprecated in 2021), also Eslint is a JavaScript linter and doesn’t support Typescripts internally but I strongly recommend that using it.

Sure, here is the steps that you need to configure Eslint with Typescripts:

In our project I add typescript configuration with following command:
```shell
tsc --init
```
The command added `tsconfig.json` into root directory of the project (if you didn’t install typescript just add it by `npm i -g typescript`)

Now I can change `script.js` file into `script.ts`.

Next all the thing you need here is plugin and parser which enable Eslint to support Typescript language:
```shell
npm i typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
```
So you are ready to configure Eslint like this:
```json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
    "no-console": "off",
    "camelcase": "warn"
  }
}
```
I also added prettier in configurations and here is the result:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sek1io64f9qmoqeoe4zn.png)

Spectacular!! we’ve configured Eslint with Typescript and prettier.

## Conclusion

ESLint is a powerful tool that can help you catch bugs and enforce coding standards in your JavaScript, React, Vue, and TypeScript projects. By using ESLint, you can improve the quality and maintainability of your code. If you are new to programming, it may take some time to get used to using ESLint, but the effort is well worth it in the long run.

I am attaching the tutorial code [here](https://github.com/k90mirzaei/eslint-prettier) for your reference.

Happy coding!!!