ESLint

• Overview
• Getting started
• Configuration
  • Ignoring files
  • Using configuration comments
• Usage
• Rules
• Awesome ESLint
  • Plugins
    • @stylistic
    • ESLint-plugin-compat
    • ESLint-plugin-cypress
    • ESLint-plugin-HTML
    • ESLint-plugin-jest
    • ESLint-plugin-jsdoc
    • ESLint-plugin-json
    • ESLint-plugin-promise
    • ESLint-plugin-unicorn
    • ESLint-plugin-vue
  • VScode extension

Overview

ESLint statically analyzes your code to find problems. Run ESLint as part of your continuous integration pipeline.

• Homepage

Getting started

1. Install ESLint in your project

npm install --save-dev eslint @eslint/js

1. Add eslint.config.js configuration file.

# Create JavaScript configuration file
touch eslint.config.js

1. Add configuration to the eslint.config.js file. See Configure ESLint documentation.

// ./eslint.config.js
import js from "@eslint/js";

export default [
    js.configs.recommended,
   {
       rules: {
           "no-unused-vars": "warn",
           "no-undef": "warn"
       }
   }
];

Configuration

The following are valid configuration file names:

• eslint.config.js
• eslint.config.mjs
• eslint.config.cjs

export default [
    {
        rules: {
            eqeqeq: "off",
            "no-unused-vars": "error",
            "prefer-const": ["error", { "ignoreReadBeforeAssign": true }]
        }
    }
];

Ignoring files

By default, ESLint ignores files using the following patter: ["**/node_modules/", ".git/"] To ignore files (added to the previous pattern):

• On the command-line, use --ignore-pattern
• Inside your config files

// eslint.config.js
import js from '@eslint/js';
import globals from "globals";

export default [
    js.configs.recommended,
    {
        languageOptions: {
            // Set common globals (windows,document...) to prevent "no-undef"
            globals: {
                ...globals.browser,
            }
        },
        ignores: ['node_modules', 'vendor', '.gitlab-ci-local'],
}];

Using configuration comments

Use file comments to dynamically configure rules.

/* eslint eqeqeq: "off", curly: "error" */

To include option settings:

/* eslint quotes: ["error", "double"], curly: 2 */

Add specific descriptions too.

/* eslint eqeqeq: "off", curly: "error"
 * --------
 * This will not work due to the line above starting with a '*' character.
 */

Usage

• Use the command:

npx eslint

• Add a script helper to package.json

  "scripts": {
    "lint:js": "eslint",
    "lint:js:fix": "eslint --fix"
  },

Rules

Rule list

Rules have 3 configurable states:

• off / 0 - turn the rule off.
• warn / 1 - turn the rule on, but do not throw errors.
• error / 2 - turn the rule on, and return an non-zero exit code.

Rule list groups rules as:

• Possible problems
• Suggestions
• Layout & Formatting

Awesome ESLint

Awesome ESLint

Plugins

@stylistic

ESLint extracted formatter rules into separate packages.

Migrated plugins:

• eslint -> @stylistic/eslint-plugin-js Built-in stylistic rules for JavaScript
• @typescript-eslint/eslint-plugin -> @stylistic/eslint-plugin-ts Stylistic rules for TypeScript
• eslint-plugin-react -> @stylistic/eslint-plugin-jsx Stylistic rules for framework-agnostic JSX

Plugins:

• @stylistic/eslint-plugin-plus Other rules introduced by ESLint Stylistic

Unified plugins:

• @stylistic/eslint-plugin All rules from the above 4 plugins

ESLint-plugin-compat

Homepage: eslint-plugin-compat Lint the browser compatibility of your code.

ESLint-plugin-cypress

Homepage: eslint-plugin-cypress Lint the Cypress tests.

ESLint-plugin-HTML

Homepage: eslint-plugin-html Lint and fix inline scripts contained in HTML files.

ESLint-plugin-jest

Homepage: eslint-plugin-jest

Rules and fixes for Jest tests.

ESLint-plugin-jsdoc

Homepage: eslint-plugin-jsdoc JSDoc linting rules for ESLint.

ESLint-plugin-json

Homepage: eslint-plugin-json

ESLint plugin for JSON files.

ESLint-plugin-promise

Homepage: eslint-plugin-promise Enforce best practices for JavaScript promises.

ESLint-plugin-unicorn

Homepage: eslint-plugin-unicorn

More than 100 powerful ESLint rules.

ESLint-plugin-vue

Homepage: eslint-plugin-vue

Official plugin for Vue.

VScode extension

Homepage: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "always"
  },
  "eslint.enable": true
}