Initialiser eslint sur un projet JavaScript

Mis à jour le lundi 7 juin 2021 par johackim

Pour initialiser eslint sur un projet JavaScript il existe la commande suivante :

npm init @eslint/config@v0.4.6
npm pkg set scripts.lint="eslint ."

Personnellement j'ajoute les règles suivantes au fichier .eslintrc.json :

// .eslintrc.json
"rules": {
    "indent": [2, 4, { "SwitchCase": 1 }],
    "max-len": [0],
    "object-curly-newline": [0],
    "import/no-extraneous-dependencies": [0],
    "import/prefer-default-export": [0],
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "react/jsx-props-no-spreading": [0],
    "react/jsx-indent-props": [2, 4],
    "react/jsx-indent": [2, 4],
    "react/prop-types": [0],
    "react/no-unescaped-entities": [0],
    "react/function-component-definition": [0],
    "react/react-in-jsx-scope": [0],
    "no-restricted-syntax": [0],
    "complexity": [2, 6],
    "max-depth": [2, 2]
}

Si jamais vous rencontrez une erreur File ignored by default pour un fichier qui se situe dans un dossier caché (ex: .storybook), ajoutez la ligne suivante à votre fichier .eslintrc.json :

"ignorePatterns": ["!.storybook"],

Si vous souhaitez ignorer une ligne de code, ajoutez le commentaire // eslint-disable-line.

Et pour plusieurs lignes de code :

/* eslint-disable */
console.log('Mon code javascript');
/* eslint-enable */

// Ou une règle particulière

/* eslint-disable max-lines-per-function */
console.log('Mon code javascript');
/* eslint-enable */

// Ou

/* eslint-disable-next-line complexity */
console.log('Mon code javascript');

Si vous voulez définir des exceptions, ajoutez une ligne overrides :

{
    "rules": {
        "max-lines-per-function": ["error", 25],
    },
    "overrides": [
        {
            "files": ["components/**"],
            "rules": {
                "max-lines-per-function": ["error", 120]
            }
        }
    ]
}