Linting JavaScript dans Visual Studio

Le linting JavaScript et TypeScript dans Visual Studio est effectué par ESLint. Si vous débutez avec ESLint, vous pouvez commencer par consulter sa documentation.

Activation de la prise en charge du linting

Pour activer la prise en charge du linting dans Visual Studio 2022 ou versions ultérieures, activez le paramètre Activer ESLint dans Outils > Options > Éditeur de texte > JavaScript/TypeScript > Linting.

Dans la page d’options, vous pouvez également modifier l’ensemble de fichiers à ajouter au linting. Par défaut, toutes les extensions de fichier qui peuvent faire l’objet d’une validation Lint (.js, .jsx, .ts, .tsx, .vue, .html) sont ajoutés au linting. L’éditeur HTML LSP doit être activé pour le linting des fichiers Vue et HTML. Le paramètre respectif se trouve dans Outils > Options > Environnement > Fonctionnalités en préversion.

Vous pouvez remplacer ces options dans certains types de projet, comme les modèles de projet React autonomes. Dans ces projets, vous pouvez remplacer les paramètres de la page Outils > Options en utilisant les propriétés du projet :

Installation des dépendances ESLint

Une fois le linting activé, les dépendances nécessaires doivent être installées. Les dépendances sont le package npm ESLint et d’autres plug-ins applicables à votre projet. Ce package peut être installé localement dans chaque projet où vous souhaitez activer le linting, ou vous pouvez l’installer globalement avec npm install -g eslint. Toutefois, une installation globale n’est pas recommandée, car les plug-ins et les configurations partageables doivent toujours être installés localement.

À partir de Visual Studio 2022 version 17.7 Preview 2, vous pouvez également utiliser le paramètre Chemin d’accès ESLint dans Outils > Options > Éditeur de texte > JavaScript/TypeScript > Linting pour spécifier un répertoire à partir duquel charger ESLint. Cela est utile quand ESLint est installé globalement, où vous pouvez définir le chemin d’accès correspondant sur C:\Program Files\nodejs\node_modules.

Selon les fichiers que vous voulez ajouter au linting, d’autres plug-ins ESLint peuvent être nécessaires. Par exemple, vous pouvez avoir besoin de TypeScript ESLint, qui permet à ESLint de s’exécuter sur du code TypeScript et comprend des règles propres aux informations de type supplémentaires.

Quand ESLint est activé, mais que le package npm ESLint est introuvable, une barre dorée s’affiche pour vous permettre d’installer ESLint comme dépendance de développement npm locale.

De même, quand un fichier .eslintrc est introuvable, une barre dorée s’affiche pour exécuter un Assistant de configuration qui installe les plug-ins applicables au projet actuel.

Désactivation des règles de linting et des correctifs automatiques

Vous pouvez désactiver les erreurs de linting sur une ligne ou un fichier spécifique. Vous pouvez désactiver les erreurs en utilisant le menu Ampoule des Actions rapides :

L’illustration suivante montre le résultat si vous désactivez une erreur de linting pour la ligne de code sélectionnée.

Par ailleurs, les actions de correction automatique du code vous permettent d’appliquer un correctif automatique pour résoudre l’erreur de linting correspondante.

Dépannage

Vous pouvez ouvrir le volet Extension de langage ESLint dans la fenêtre Sortie pour voir les messages d’erreur ou d’autres journaux susceptibles d’expliquer le problème.