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 commandeslint --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 aboutprettier, we need to installESLint with flag--save-dev. You can reach to the first step of partTo Use in the last post to get an answer for questionwhy we need the flag.

# for npmnpm install --save-dev eslint # for yarnyarn 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 selectedNo for the questionWould 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 theDocumentation. To understand more how it behaves, you can test ESLint ondemo. By clicking onRules Configuration, you can change the configuration.

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

Paypal.

Now, we already havetsconfig,prettier andeslint, 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.