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 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 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.
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.
Top comments (0)