← Tous les modules

Appearance

Installer ESLint pour JavaScript ​

ESLint est un outil d'analyse statique pour JavaScript qui aide à identifier et corriger les problèmes de syntaxe, de style et de bonnes pratiques dans votre code. Dans le cadre de ce cours, nous utiliserons ESLint pour améliorer la qualité de nos scripts JavaScript.

Prérequis :

Installation rapide (non recommandée si la première fois)

Installation ​

Prérequis : Avoir déjà passé l'installation complète d'ESLint au moins une fois pour un projet JavaScript.

  1. Télécharger et extraire ce contenu à la racine de votre projet : EsLint installation rapide.zip.
  2. Fermer VsCode et le rouvrir pour que les changements prennent effet.

Installation de l'extension ESLint dans VS Code ​

  1. Ouvrez Visual Studio Code.
  2. Allez dans l'onglet Extensions (icône carrée sur la barre latérale gauche, ou Ctrl+Shift+X).
  3. Recherchez "ESLint" dans la barre de recherche.
  4. Sélectionnez l'extension officielle "ESLint" développée par Microsoft.
    1. Lien : ESLint Extension
  5. Cliquez sur "Installer".
  6. Fermer Vs Code, et ouvrir n'importe quel dossier de projet.

Configuration d'ESLint pour votre projet ​

Pour utiliser ESLint dans votre projet, vous devez installer ESLint localement dans votre projet à chaque fois que vous commencez un nouveau projet JavaScript.

Installation locale d'ESLint dans un projet ​

  1. Une fois dans votre projet, à la racine, utiliser le terminal dans VS Code (Ctrl+` ou Terminal > Nouveau terminal).

  2. Assurez-vous d'être dans le répertoire racine de votre projet.

  3. Exécutez la commande suivante pour installer ESLint :

    npm install eslint --save-dev

    Si vous n'avez pas Node.js installé, téléchargez-le depuis nodejs.org.

Erreur possible :

Si tu rencontres cette erreur :

[...] npm.ps1 cannot be loaded because running scripts is disabled on this system.
For more information, see about_Execution_Policies [...]

Fait :

  1. Ouvrir PowerShell en mode administrateur (recherchez "PowerShell" dans le menu Démarrer, clic droit et sélectionnez "Exécuter en tant qu’administrateur").

  2. Exécutez la commande suivante pour autoriser l'exécution de scripts locaux :

    Set-ExecutionPolicy RemoteSigned

  3. Confirmez la modification avec le choix qui mentionne "OUI POUR TOUS".

  4. Fermez PowerShell et réessayez d'exécuter votre commande npm. Cela devrait résoudre le problème et vous permettre d'utiliser npm normalement.

Initialisation d'ESLint ​

Après l'installation, initialisez ESLint dans votre projet :

  1. Dans le terminal, exécutez :

    npx eslint --init

  2. Suivez les invites pour configurer ESLint selon vos besoins :

    • Choisissez le type de projet (JavaScript).
    • How would you like to use ESLint? (To check syntax, find problems)
    • What type of modules does your project use? (None of these)
    • Which framework does your project use? : (None of these)
    • Does your project use TypeScript? : No
    • Where does your code run? : (Browser)
    • Would you like to install them now? : (Yes)
    • Which package manager do you want to use? : (npm)

Cette opération créera un fichier de configuration eslint.config.mjs à la racine de votre projet, qui contiendra les règles et paramètres d'ESLint pour votre projet et télchargera les dépendances nécessaires (dossier node_modules). Vous n'avez pas à toucher ce dossier, mais il doit être présent pour que ESLint fonctionne correctement.

Fichier de configuration eslint.config.mjs ​

Un fichier eslint.config.mjs typique pour ce cours pourrait ressembler à ceci :

javascript
import js from "@eslint/js";
import globals from "globals";
import { defineConfig } from "eslint/config";

export default defineConfig([
  { files: ["**/*.{js,mjs,cjs}"], plugins: { js }, extends: ["js/recommended"], languageOptions: { globals: globals.browser } },
  { files: ["**/*.js"], languageOptions: { sourceType: "script" } },
]);

Finalisation ​

Une fois ces étapes réalisée, fermez et rouvrez votre projet dans VS Code pour que les changements prennent effet. Vous devriez maintenant voir les erreurs et les avertissements d'ESLint directement dans votre éditeur lorsque vous travaillez sur vos fichiers JavaScript.

Par exemple, si vous ajouter ce code dans un fichier .js :

javascript
console.log(x);

ESLint vous signalera une erreur indiquant que x n'est pas défini, ce qui vous aidera à corriger les erreurs de syntaxe et à améliorer la qualité de votre code.

Important :

À chaque fois que vous commencez un nouveau projet JavaScript, n'oubliez pas de répéter les étapes d'installation locale d'ESLint et d'initialisation pour garantir que votre code est correctement analysé et conforme aux normes de qualité. Voici ces étapes :

  1. Ouvrez le terminal dans VS Code.
  2. Assurez-vous d'être dans le répertoire racine de votre projet.
  3. Exécutez npm install eslint --save-dev pour installer ESLint localement.
  4. Exécutez npx eslint --init pour initialiser ESLint
  5. Fermez et rouvrez votre projet pour que les changements prennent effet.