Une meilleure façon de visualiser les erreurs dans VS Code avec Error Lens

Vous écrivez un composant React, ESLint signale un problème, et vous ne le remarquez qu’en jetant un œil à la barre d’état — ou pire, lorsque la compilation échoue. L’affichage par défaut des erreurs dans VS Code repose sur des soulignements ondulés et le panneau Problèmes, deux éléments faciles à manquer lors d’un développement rapide. Error Lens corrige cela en affichant les messages de diagnostic directement dans votre éditeur, sur la ligne où se trouve le problème.

Voici ce qu’il fait, comment il fonctionne, et ce qu’il faut garder à l’esprit avant de l’installer.

Ce que fait réellement VS Code Error Lens

Error Lens est une extension VS Code qui améliore la visibilité des erreurs en affichant les messages de diagnostic en ligne — directement à la fin de la ligne concernée — au lieu de les cacher derrière des infobulles au survol ou dans le panneau Problèmes.

Lorsqu’un serveur de langage ou un linter signale un problème, Error Lens :

• Met en surbrillance la ligne entière avec un arrière-plan coloré (rouge pour les erreurs, jaune pour les avertissements, bleu pour les informations)
• Ajoute le message de diagnostic sous forme de texte à la fin de cette ligne
• Affiche des icônes dans la gouttière à côté de vos numéros de ligne (optionnel)
• Présente un résumé dans la barre d’état (optionnel)

Le point essentiel à comprendre : Error Lens ne génère pas de diagnostics par lui-même. Il met en évidence ce que votre serveur de langage, le compilateur TypeScript, ESLint ou d’autres outils de linting signalent déjà. Si un outil ne signale pas de problème, Error Lens n’en affichera pas non plus.

Pourquoi les erreurs en ligne dans VS Code sont importantes pour les workflows frontend

Le développement frontend avance rapidement. Vous jonglez avec les types TypeScript, les règles ESLint, le CSS-in-JS et les props de composants — souvent à travers plusieurs fichiers simultanément. L’expérience par défaut de VS Code vous demande soit de survoler les soulignements, soit de garder un œil sur le panneau Problèmes. Aucune de ces options n’est idéale lorsque vous êtes concentré sur votre code.

Avec les erreurs en ligne de VS Code visibles directement dans l’éditeur, vous remarquez les problèmes dès qu’ils apparaissent. Un nom de prop mal orthographié, une dépendance manquante dans un useEffect, une importation inutilisée signalée par ESLint — tout cela s’affiche immédiatement, en contexte, sans avoir à détourner votre attention ailleurs.

C’est cette boucle de rétroaction plus serrée qui justifie la place d’Error Lens dans un workflow frontend.

Niveaux de diagnostic configurables et options d’affichage

Error Lens vous donne le contrôle sur ce qui est affiché et comment. Le paramètre errorLens.enabledDiagnosticLevels accepte n’importe quelle combinaison de "error", "warning", "info" et "hint". Si les messages de niveau hint encombrent votre écran, vous pouvez les retirer complètement de la liste.

Quelques paramètres à connaître :

{
  "errorLens.enabledDiagnosticLevels": ["error", "warning"],
  "errorLens.messageBackgroundMode": "message",
  "errorLens.followCursor": "activeLine",
  "errorLens.delay": 500
}

• messageBackgroundMode contrôle si la ligne entière ou seulement le texte du message est mis en surbrillance. Le définir sur "message" réduit considérablement le bruit visuel.
• followCursor défini sur "activeLine" affiche les messages en ligne uniquement pour la ligne où se trouve votre curseur — une bonne option si vous trouvez la mise en surbrillance du fichier entier trop envahissante.
• delay ajoute une pause (en millisecondes) avant l’apparition des décorations, ce qui aide sur les fichiers volumineux où le rendu constant peut sembler distrayant.

Vous pouvez également exclure des fichiers spécifiques en utilisant des motifs glob avec errorLens.excludePatterns, ou supprimer les diagnostics d’outils spécifiques en utilisant errorLens.excludeBySource.

Une meilleure visibilité des erreurs sans le bruit

La plainte la plus courante concernant l’extension Error Lens pour VS Code est la surcharge d’informations — en particulier sur les fichiers comportant de nombreux avertissements existants. La solution n’est pas de la désinstaller, mais de l’ajuster.

Commencez avec uniquement les erreurs et les avertissements. Utilisez "followCursor": "activeLine" si la vue du fichier entier est trop envahissante. Élargissez progressivement ce que vous affichez au fur et à mesure que vous vous habituez. La plupart des développeurs trouvent une configuration qui leur semble naturelle en un jour ou deux.

Conclusion

Les diagnostics intégrés de VS Code sont fonctionnels mais passifs. Error Lens les rend actifs — en plaçant le message là où vos yeux se trouvent déjà. Pour les développeurs frontend qui souhaitent un retour plus rapide et plus clair d’ESLint, TypeScript et d’autres outils de langage, c’est l’une des extensions les plus pratiques que vous puissiez ajouter à votre configuration.

Installez-la depuis le VS Code Marketplace, laissez les paramètres par défaut pendant une journée, puis ajustez-les ensuite.

FAQ

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.