ESLint

Find and fix problems in your JavaScript code.

Installation

npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier

Configuration

This can be in the form of an .eslintrc.* file or an eslintConfig field in a package.json file, both of which ESLint will look for and read automatically.

ES5 (EcmaScript5)

{
    "env": {
        "browser": true,
        "node": true
    },
    "parserOptions": {
        "ecmaVersion": 5,
        "sourceType": "script"
    },
    "extends": [
        "eslint:recommended",
        "plugin:prettier/recommended"
    ],
    "ignorePatterns": [
        "**/*.min.js"
    ],
    "rules": {
        "prettier/prettier": "error",
        "arrow-body-style": "off",
        "prefer-arrow-callback": "off",
        "no-unused-vars": "off",
        "no-shadow-restricted-names": "off"
    }
}
  

Dependencies

eslint-config-prettier
Turns off all rules that are unnecessary or might conflict with Prettier.
eslint-plugin-prettier
ESLint plugin for Prettier formatting.

ES6 (EcmaScript6)

{
    "env": {
        "browser": true,
        "node": true
    },
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "extends": [
        "eslint:recommended",
        "plugin:import/recommended",
        "plugin:prettier/recommended"
    ],
    "ignorePatterns": [
        "**/*.min.js"
    ],
    "rules": {
        "prettier/prettier": "error",
        "arrow-body-style": "off",
        "prefer-arrow-callback": "off",
        "no-unused-vars": "off",
        "no-shadow-restricted-names": "off"
    }
}
  

Dependencies

eslint-plugin-import
ESLint plugin with rules that help validate proper imports.

React

{
    "env": {
        "browser": true,
        "node": true
    },
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "extends": [
        "eslint:recommended",
        "plugin:import/recommended",
        "plugin:react/recommended",
        "plugin:react-hooks/recommended",
        "plugin:prettier/recommended"
    ],
    "ignorePatterns": [
        "**/*.min.js"
    ],
    "rules": {
        "prettier/prettier": "error",
        "arrow-body-style": "off",
        "prefer-arrow-callback": "off",
        "no-unused-vars": "off",
        "no-shadow-restricted-names": "off"
    }
}
  

Dependencies

eslint-plugin-react
React specific linting rules for eslint.
eslint-plugin-react-hooks
This ESLint plugin enforces the Rules of Hooks.

Integration with visual studio code

Install through vscode extensions. Search for ESLint.

settings.json

{
    "javascript.format.enable": false,
    "javascript.validate.enable": false,

    "eslint.format.enable": true,
    "eslint.validate": ["javascript", "javascriptreact"],

    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.tabSize": 2,
        "editor.formatOnSave": false,
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true
        },
    },
}
  

Enable/disable default JavaScript formatter.

{
    "javascript.format.enable": false,
}
  

Enable/disable JavaScript validation.

{
    "javascript.validate.enable": false,
}
  

Enables ESLint as a formatter.

{
    "eslint.format.enable": true,
}
  

An array of language ids which should be validated by ESLint. If not installed ESLint will show an error.

{
    "eslint.validate": ["javascript", "javascriptreact"],
}
  

Configure settings to be overridden for the javascript language.

{
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.tabSize": 2,
        "editor.formatOnSave": false,
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true
        },
    },
}
  

Integration with Git Hooks

Javascript requires the husky and lint-staged packages to be installed.

{
    "lint-staged": {
        "*.{js, jsx}": [
            "eslint --fix"
        ]
    }
}
  

To use Python, you need to install the pre-commit package.

repos:
  - repo: https://github.com/pre-commit/mirrors-eslint
    rev: v8.17.0
    hooks:
      - id: eslint
        additional_dependencies:
          - eslint@8.13.0
          - eslint-config-prettier@8.5.0
          - eslint-plugin-import@2.26.0
          - eslint-plugin-prettier@4.0.0
        language: node
        files: \.(js|jsx)$
        types: [file]
        args: ["--fix"]
  