Webux Lab

Par Studio Webux

Home / DevOps / ESLint

ESLint

TG
Tommy Gingras Studio Webux S.E.N.C 2021-04-15

Introduction

ESLint est un outil complet et facile à utiliser pour lint le code source. Il analyse le code source et cherche à corriger les erreurs de style et de code pour prévenir les erreurs.

Comment l’utiliser

Les commandes sont lancées avec Git Bash

Dans votre module NodeJS, lancer ce qui suit,

Il est très important de lancer la commande en utilisant le --save-dev pour seulement installer les packages suivant en mode développement. C’est important pour des raisons d’optimisation et de sécurité.

npm install --save-dev eslint \
    eslint-config-airbnb-base \
    eslint-config-prettier \
    eslint-plugin-import \
    eslint-plugin-jest \
    eslint-plugin-prettier

# Pour installer jest et prettier
npm install --save-dev jest prettier

La configuration utilisée est airbnb Ces modules installés ont tout le nécessaire pour utiliser eslint avec 2 plug-ins (Prettier et Jest)

Cet article couvrira en surface Prettier et Jest

Créer le fichier de configuration de ESLint

Méthode 1

Il se peut que votre projet utilise plusieurs modules (exemples: serverless, microservices, monorepo) et que vous vouliez utiliser eslint pour chacune d’elles et bien sûr standardiser la configuration, Et vous voulez éviter de devoir modifier tous les fichiers par module,

vous pouvez faire comme ceci:

Dans chaque module,

.eslintrc.json

{
  "extends": [
    "airbnb-base",
    "plugin:jest/recommended",
    "prettier",
    "../.eslintrc.json"
  ],
  "plugins": ["jest", "prettier"]
}

Puis dans le répertoire parent,

.eslintrc.json

{
  "env": {
    "commonjs": true,
    "es2021": true,
    "node": true,
    "jest/globals": true
  },
  "parserOptions": {
    "ecmaVersion": 12
  },
  "rules": {
    "prettier/prettier": "error"
  },
  "settings": {
    "jest": {
      "version": 26
    }
  }
}

J’ai omis les rules.

Cette configuration de base permet de partager la configuration de eslint à travers vos modules. De plus, celle-ci va fonctionner avec Jest & Prettier

Pour configurer Prettier et Jest, je vous invite à regarder les autres articles à la section : Conclusion

Structure

packages/
    module1/
        .eslintrc.json
        package.json
    module2/
        .eslintrc.json
        package.json
    module3/
        .eslintrc.json
        package.json
    .eslintrc.json
Méthode 2

Dans chacun de vos modules, créer le fichier suivant, Cette approche utilise une configuration spécifique par module.

.eslintrc.json

{
  "extends": ["airbnb-base", "plugin:jest/recommended", "prettier"],
  "plugins": ["jest", "prettier"],
  "env": {
    "commonjs": true,
    "es2021": true,
    "node": true,
    "jest/globals": true
  },
  "parserOptions": {
    "ecmaVersion": 12
  },
  "rules": {
    "prettier/prettier": "error"
  },
  "settings": {
    "jest": {
      "version": 26
    }
  }
}

Structure

packages/
    module1/
        .eslintrc.json
        package.json
    module2/
        .eslintrc.json
        package.json
    module3/
        .eslintrc.json
        package.json
Méthode 3

À la racine du projet, créer le fichier suivant,

.eslintrc.json

{
  "extends": ["airbnb-base", "plugin:jest/recommended", "prettier"],
  "plugins": ["jest", "prettier"],
  "env": {
    "commonjs": true,
    "es2021": true,
    "node": true,
    "jest/globals": true
  },
  "parserOptions": {
    "ecmaVersion": 12
  },
  "rules": {
    "prettier/prettier": "error"
  },
  "settings": {
    "jest": {
      "version": 26
    }
  }
}

Structure

api/
    actions/
        action1/
            index.js
            package.json
        action2/
            index.js
            package.json
    .eslintrc.json

Puis peu importe la méthode choisie, vous devez ajouter cette commande à votre package.json

package.json

{
  "name": "@webuxlab/package-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "lint": "eslint *.js",
  },
  "author": "Studio Webux",
  "license": "ISC",
  "dependencies": {},
  "peerDependencies": {},
  "devDependencies": {
    "eslint": "^7.23.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^23.20.0",
    "eslint-plugin-prettier": "^3.3.1",
    "prettier": "^2.2.1",
  }

L’IDE

J’utilise VS Code,

Il faut tout simplement installer 2 plug-ins,

En utilisant ces deux outils, vous allez être en mesure de corriger les erreurs au fur et à mesure.

Pour appliquer le linter au moment de la sauvegarde du fichier :

File > Preferences > Settings

Puis chercher eslint et cliquer sur le premier lien Edit in settings.json

Il faut ajouter ce JSON :

...,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
...

Sauvegarder le fichier et préférablement redémarrer VS Code.

À Partir de maintenant vous pouvez utiliser Shift + Alt + F ou Shift + Command +F pour linter vos fichiers.

Conclusion

Voir les articles suivants pour plus d’information:

Recherche