JavaScript

Knowledge Base

JavaScript > Tools

ESLint

ESLint (https://eslint.org/) ist ein JavaScript Linting https://de.wikipedia.org/wiki/Lint_(Programmierwerkzeug) Werkzeug zur statischen Quellcode-Analyse.

Es basiert (mittlerweile) komplett auf Regeln, die durch Plugins hinzugefügt werden können. Regel-Verletzungen können unterschiedlich behandelt werden (ignorieren / warnung / error / reparieren).

Zur Vereinfachung gibt es auch Gruppen von voreingestellten Regeln - in ESLint leider "Extends" genannt.

Installiert mit

npm i -D eslint

Plugins

npm i -D eslint-plugin-react eslint-plugin-react-hooks

Parser

npm i -D babel-eslint

Beispiel:

.eslintrc.js (ohne Prettier)

module.exports = {
    // Defines globals which are used within the environment
    env: {
        browser: true,
        es6: true,
        node: true, // Allow node globals (e. g. in dev packaging files)
        jest: true, // Allow jest globals (in test files)
    },
 
    // Defines preset rules (which can be overwritten or extended in the rules section)
    extends: [
        "eslint:recommended",
        "plugin:react/recommended",
    ],
 
    // Adds additional set of rules
    plugins: ["react", "react-hooks"],
 
    // Uses the parser which understands the same as the babel transpiler
    parser: "babel-eslint",
 
    parserOptions: {
        // ESLint expects valid <= JS 2018 code (not sure if this has an effect with babel-eslint parser)
        ecmaVersion: 2018,
 
        // Javascript code is separated into ECMAScript modules
        sourceType: "module",
 
        // ESLint expects additional features - here JSX code
        ecmaFeatures: {
            jsx: true,
        },
    },
 
    // No additional globals (exept those defined via env section)
    globals: {},
 
    // Additional settings for react plugin
    settings: {
        react: {
            //Automatically detect react version
            version: "detect",
        },
    },
 
    // Additional rules which will overwrite the preset rules of "extends" section
    rules: {
        // require destructuring from arrays and/or objects
        "prefer-destructuring": [
            2,
            {
                VariableDeclarator: {
                    array: true,    // default: true
                    object: true, // default: true
                },
                AssignmentExpression: {
                    array: false, // default: true
                    object: false, // default: true
                },
            },
        ],
        // warning for use of console
        "no-console": "warn",
 
        // error in case of == and != instead of === and !==
        eqeqeq: "error",
 
        // Curly for any block (even for single lines)
        curly: "error",
 
        // Error in case of hook rules not fulfilled
        "react-hooks/rules-of-hooks": "error",
        "react-hooks/exhaustive-deps": "warn",
 
        // Enforce curly brackets for props -> propname={"Hello"} instead of propname="Hello"
        "react/jsx-curly-brace-presence": ["error", { props: "always", children: "ignore" }],
    },
};