DEV Community

Cover image for Configuration for ESLint
Dantis Mai
Dantis Mai

Posted on • Updated on

Configuration for ESLint

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": {}
}
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode
  • After installing the package, we initialize the configuration file for the project.
# for npm
$ npx eslint --init

# for yarn
$ yarn run eslint --init
Enter fullscreen mode Exit fullscreen mode
  • Then, it will ask us a lot of questions to generate a suitable config. init process

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.
image

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

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.

Discussion (0)