Setup ESLint

What is ESLint?

ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code. It was created by Nicholas C. Zakas in 2013. Rules in ESLint are configurable, and customized rules can be defined and loaded. ESLint covers both code quality and coding style issues.

You can install ESLint and its config plugins using npm

npm install eslint elsint-config-next

ESLint Config

ESLint supports configuration files in several formats:

• JavaScript - use .eslintrc.js and export an object containing your configuration.
• JavaScript (ESM) - use .eslintrc.cjs when running ESLint in JavaScript packages that specify "type":"module" in their package.json. Note that ESLint does not support ESM configuration at this time.
• YAML - use .eslintrc.yaml or .eslintrc.yml to define the configuration structure.
• JSON - use .eslintrc.json to define the configuration structure. ESLint’s JSON files also allow JavaScript-style comments.
• package.json - create an eslintConfig property in your package.json file and define your configuration there.

Depending on what kind of project you are working on, you can then install the corresponding ESLint config plugin (ex: for NextJS project you can install eslint-config-next) and put it in the extends config. Or you can use eslint:recommended to use ESLint recommended rules.

You can also override the default config by using rules property, see ESLint Rules for all available default and recommended rules.

{
  "extends": ["eslint:recommended", "next/core-web-vitals"],
  "env": {
    "es6": true,
    "browser": true
  },
  "rules": {
    "indent": ["warn", 2],
    "quotes": ["warn", "double"],
    "semi": ["warn", "never"],
    "react/prop-types": 0
  }
}