Comment pelucher et formater du code avec ESLint dans Visual Studio Code

Introduction

Lorsque vous écrivez du JavaScript avec un éditeur tel que Visual Studio Code, vous pouvez vous assurer de différentes manières que votre code est syntaxiquement correct et conforme aux meilleures pratiques actuelles. Vous pouvez utiliser un linter pour ce faire. Les Linters vérifient votre code pour les erreurs de syntaxe et mettent en évidence les erreurs pour vous assurer que vous pouvez les trouver et les corriger rapidement. ESLint est un linter que vous pouvez intégrer à votre configuration Visual Studio Code pour garantir l'intégrité du code.

ESLint peut à la fois formater votre code et l'analyser pour faire des suggestions d'amélioration. Il est également configurable. Cela signifie que vous pouvez personnaliser la façon dont votre code est évalué.

Dans ce didacticiel, vous allez configurer ESLint sur Visual Studio Code et implémenter une configuration personnalisée pour gérer les instructions de journal lors du débogage. Vous configurerez également ESLint pour corriger les erreurs de syntaxe lorsque vous enregistrez automatiquement vos fichiers.

Conditions préalables

Pour réaliser ce tutoriel, vous aurez besoin des éléments suivants :

• La dernière version de Visual Studio Code installée sur votre ordinateur.
• La dernière version de Node installée sur votre ordinateur. Vous pouvez y parvenir en suivant Comment installer Node.js et créer un environnement de développement local pour votre machine.

Ce didacticiel a été vérifié avec Visual Studio Code v1.62.3, ESLint Extension v2.2.2, Node.js v17.2.0, npm v8.1.4 et eslint v8.3.0.

Étape 1 — Création du code de démarrage JavaScript

Vous devez commencer par un projet de démonstration. Créez un répertoire pour votre projet avec la commande suivante :

mkdir vscode-eslint-example

Maintenant que votre dossier de projet est créé, passez au répertoire vscode-eslint-example :

cd vscode-eslint-example

Dans le répertoire vscode-eslint-example, créez un fichier JavaScript portant le nom app.js :

touch app.js

Ouvrez app.js dans Visual Studio Code. Écrivez le code JavaScript suivant dans votre fichier app.js :

const name = 'James'

const person = {first: name}

console.log(person)

const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`);
};

Vous avez peut-être remarqué qu'il existe des problèmes de formatage qui pourraient être améliorés :

• Utilisation incohérente des guillemets
• Utilisation incohérente des points-virgules
• Espacement

Avec ce fichier JavaScript en place, vous pouvez maintenant initialiser ce projet. Pour ce faire, revenez à votre ligne de commande et dans le répertoire vscode-eslint-example, exécutez la commande suivante :

npm init -y

L'utilisation de la commande npm init pour initialiser votre projet créera un fichier package.json dans le répertoire vscode-eslint-example. Le package.json stockera les dépendances de votre projet et d'autres paramètres de configuration importants pour votre projet.

Maintenant que votre projet JavaScript est correctement configuré, vous pouvez désormais configurer ESLint.

Étape 2 - Configuration d'ESLint

Avant de configurer ESLint pour votre projet, vous devrez d'abord installer ESLint :

npm install eslint --save-dev

Il est important d'inclure l'indicateur --save-dev car cela enregistre le package en tant que dépendance pour une utilisation en développement uniquement. Dans ce cas, eslint est un package qui n'est nécessaire que lorsque vous travaillez activement et apportez des modifications à votre projet. Une fois votre projet lancé ou en production, eslint ne sera plus nécessaire. L'utilisation de l'indicateur --save-dev garantit que eslint sera répertorié dans votre fichier package.json en tant que dépendance de développement uniquement.

Maintenant qu'ESLint est installé, vous pouvez initialiser une configuration ESLint pour votre projet à l'aide de la commande suivante :

./node_modules/.bin/eslint --init

Un élément important de cette commande est l'indicateur --init. La section ./node_modules/.bin/eslint de la commande est le chemin d'accès à ESLint dans votre projet. L'utilisation de l'indicateur --init active ESLint pour votre projet. L'activation ou l'initialisation d'ESLint créera un fichier de configuration ESLint qui vous permettra de personnaliser le fonctionnement d'ESLint avec votre projet.

Avant de pouvoir accéder à votre fichier de configuration ESLint, différentes questions vous seront posées sur votre projet. Ces questions sont posées pour garantir que la configuration initialisée pour votre projet correspond le mieux à vos besoins.

La première invite sera :

? How would you like to use ESLint? …
  To check syntax only
❯ To check syntax and find problems

Choisissez l'option Pour vérifier la syntaxe et trouver des problèmes.

L'invite suivante sera :

 What type of modules does your project use? …
  JavaScript modules (import/export)
❯ CommonJS (require/exports)
  None of these

Choisissez l'option CommonJS pour utiliser les variables globales CommonJS.

L'invite suivante dira :

? Which framework does your project use? …
  React
  Vue.js
❯ None of these

Choisissez l'option Aucun de ces éléments.

L'invite suivante demandera :

? Does your project use TypeScript? › No / Yes

Choisissez l'option Non.

L'invite suivante dira :

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
  Node

Choisissez l'option Navigateur.

L'invite suivante dira :

The config that you've selected requires the following dependencies:

eslint, globals, @eslint/js
? Would you like to install them now? > No / Yes

Choisissez l'option Oui pour installer les dépendances avec npm.

Si vous êtes invité à installer des packages supplémentaires, choisissez oui.

Après avoir répondu à toutes les invites, vous remarquerez qu'un fichier nommé .eslintrc.json a été ajouté à votre répertoire vscode-eslint-example. ESLint est maintenant installé. Le code dans app.js n'a pas encore changé. En effet, ESLint doit être intégré à Visual Studio Code.

Étape 3 — Installation de l'extension ESLint

Pour intégrer ESLint dans Visual Studio Code, vous devrez installer l'extension ESLint pour Visual Studio Code. Revenez à Visual Studio Code et recherchez ESLint dans l'onglet Extensions. Cliquez sur Installer une fois que vous avez localisé l'extension :

Une fois ESLint installé dans Visual Studio Code, vous remarquerez un soulignement coloré dans votre fichier app.js mettant en évidence les erreurs. Ces marqueurs sont codés par couleur en fonction de la gravité. Si vous survolez votre code souligné, vous verrez un message qui vous explique l'erreur. De cette façon, ESLint nous aide à trouver et à supprimer les erreurs de code et de syntaxe.

ESLint peut faire encore plus pour vous. ESLint peut être modifié pour corriger automatiquement les erreurs chaque fois qu'un fichier est enregistré.

Étape 4 — Formatage lors de l'enregistrement

Pour configurer ESLint afin qu'il corrige automatiquement les problèmes de syntaxe et de formatage à chaque fois que vous enregistrez, vous devrez ouvrir le menu des paramètres.

Pour rechercher les paramètres dans Visual Studio Code, utilisez la palette de commandes pour ouvrir Préférences : Ouvrir les paramètres utilisateur (JSON).

Le fichier settings.json s'ouvrira dans votre éditeur de code. Pour qu'ESLint corrige les erreurs lorsque vous enregistrez votre fichier, vous devrez écrire le code suivant dans settings.json :

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": ["javascript"]
}

Avec ce code dans votre fichier settings.json, ESLint corrigera désormais automatiquement les erreurs et validera JavaScript lors de l'enregistrement.

Revenez à votre fichier app.js et enregistrez-le. Vous verrez quelques changements, notamment un soulignement moins coloré. Certains des problèmes de formatage résolus par ESLint incluent :

• Utilisation cohérente des guillemets simples
• Indentation appropriée à l'intérieur de la fonction
• Utilisation cohérente des points-virgules

ESLint résoudra désormais automatiquement les erreurs de syntaxe chaque fois que vous enregistrerez app.js. Il reste encore quelques messages d'erreur. Ceux-ci peuvent être corrigés en personnalisant la configuration ESLint pour détecter ou ignorer des erreurs spécifiques et des problèmes de formatage.

Étape 5 — Personnalisation des règles ESLint

En l'état, ESLint produit un message en surbrillance pour toutes les instructions console.log() dans app.js. Dans certains cas, la suppression des instructions console.log peut ne pas être une priorité. Vous pouvez personnaliser la configuration ESLint pour autoriser les instructions console.log sans produire de message d'erreur. Les règles de configuration ESLint peuvent être modifiées dans le fichier .eslintrc.json.

Ouvrez le fichier .eslintrc.json. Voici le code que vous verrez dans ce fichier :

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true
    },
    "extends": [
        "airbnb-base"
    ],
    "parserOptions": {
        "ecmaVersion": 12
    },
    "rules": {
    }
}

Au bas du fichier .eslintrc.json, vous verrez un objet "rules". Pour personnaliser les erreurs qui déclenchent ESLint ou pour désactiver la réponse d'ESLint à certains morceaux de code, vous ajouterez des paires clé-valeur à l'objet "rules". La clé correspondra au nom de la règle que vous souhaitez ajouter ou modifier. La valeur correspondra au niveau de gravité du problème. Vous avez trois choix pour le niveau de gravité :

• erreur - produit un soulignement rouge
• warn - produira un soulignement jaune
• off - n'affichera rien.

Si vous ne souhaitez pas générer de messages d'erreur pour les instructions console.log, vous pouvez utiliser le nom de la règle no-console comme clé. Saisissez off comme valeur pour no-console :

"rules" : {
    "no-console": "off"
}

Cela supprime les messages d'erreur de vos instructions console.log dans app.js :

Certaines règles nécessitent plusieurs informations, notamment un niveau de gravité et une valeur. Pour préciser le type de guillemets que vous souhaitez utiliser dans votre code, vous devez transmettre à la fois le type de guillemets choisi et le niveau de gravité :

"rules" : {
    "no-console": "off",
    "quotes": [
        "error",
        "double"
    ]
}

Désormais, si vous incluez des guillemets simples dans votre devis, ESLint générera une erreur.

Conclusion

Ce didacticiel présente certaines de ce que vous pouvez faire avec le peluchage à l'aide d'ESLint sur Visual Studio Code. Les outils de linting comme ESLint peuvent vous aider à gagner du temps pour des tâches plus complexes en automatisant et en simplifiant la façon dont vous vérifiez la syntaxe et les meilleures pratiques.

Si vous souhaitez plus d'informations sur les règles et les paires clé-valeur que vous pouvez utiliser pour personnaliser vos règles ESLint, vous pouvez consulter cette documentation.