What and Why ESLint

ESLint is a code analyzer, it will prevent errors by finding and fixing problems in our codebase from variable to syntax

Configuration

My configuration

I just use the default configuration from command eslint --init.

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {}
}

To use

• Just as my post about prettier, we need to install ESLint with flag --save-dev. You can reach to the first step of part To Use in the last post to get an answer for question why we need the flag.

# for npm
npm install --save-dev eslint 

# for yarn
yarn add --dev eslint 

• After installing the package, we initialize the configuration file for the project.

# for npm
$ npx eslint --init

# for yarn
$ yarn run eslint --init

• Then, it will ask us a lot of questions to generate a suitable config.

Notes:

• Because I've already installed @typescript-eslint\eslint-plugin and @typescript-eslint\parser, I selected No for the question Would you like to install them now with npm.
• ESLint also supports pretty much formats of the configuration file. Configuartion Files

Other Options

ESLint is a great tool for us, and well worth for our digging into the Documentation. To understand more how it behaves, you can test ESLint on demo. By clicking on Rules Configuration, you can change the configuration.

After enjoy while playing around, ESLint allows us to download the current config.

Paypal.

Now, we already have tsconfig, prettier and eslint, I hope they can you guys with your current projects. I am really happy to receive your feedback on this article. Thanks for your precious time reading this.