Eine bessere Möglichkeit, Fehler in VS Code mit Error Lens zu sehen

Sie schreiben eine React-Komponente, ESLint meldet ein Problem, und Sie bemerken es erst, wenn Sie zufällig in die Statusleiste schauen – oder schlimmer noch, wenn der Build fehlschlägt. Die Standard-Fehleranzeige von VS Code verlässt sich auf wellenförmige Unterstreichungen und das Problems-Panel, die beide beim schnellen Programmieren leicht übersehen werden. Error Lens behebt dies, indem es Diagnosemeldungen direkt in Ihre Editor-Ansicht bringt – in der Zeile, in der das Problem auftritt.

Hier erfahren Sie, was es leistet, wie es funktioniert und worauf Sie vor der Installation achten sollten.

Was VS Code Error Lens tatsächlich leistet

Error Lens ist eine VS Code-Erweiterung, die die Fehlersichtbarkeit verbessert, indem sie Diagnosemeldungen inline anzeigt – direkt am Ende der betroffenen Zeile – anstatt sie hinter Hover-Tooltips oder dem Problems-Panel zu verstecken.

Wenn ein Language Server oder Linter ein Problem meldet, führt Error Lens Folgendes aus:

• Hebt die gesamte Zeile hervor mit einem farbcodierten Hintergrund (rot für Fehler, gelb für Warnungen, blau für Informationen)
• Fügt die Diagnosemeldung als Text am Ende dieser Zeile hinzu
• Zeigt Symbole im Gutter neben Ihren Zeilennummern an (optional)
• Zeigt eine Zusammenfassung in der Statusleiste an (optional)

Das Wichtigste dabei: Error Lens generiert keine eigenen Diagnosen. Es macht sichtbar, was Ihr Language Server, TypeScript-Compiler, ESLint oder andere Linting-Tools bereits melden. Wenn ein Tool kein Problem meldet, zeigt Error Lens auch keines an.

Warum VS Code Inline-Fehler für Frontend-Workflows wichtig sind

Frontend-Entwicklung bewegt sich schnell. Sie jonglieren mit TypeScript-Typen, ESLint-Regeln, CSS-in-JS und Component-Props – oft über mehrere Dateien gleichzeitig. Die Standard-VS-Code-Erfahrung verlangt von Ihnen, entweder über Unterstreichungen zu hovern oder ein Auge auf das Problems-Panel zu haben. Beides ist nicht ideal, wenn Sie im Flow sind.

Mit VS Code Inline-Fehlern, die direkt im Editor sichtbar sind, bemerken Sie Probleme in dem Moment, in dem sie auftreten. Ein falsch geschriebener Prop-Name, eine fehlende Abhängigkeit in einem useEffect, ein nicht verwendeter Import, der von ESLint gemeldet wird – all das wird sofort im Kontext angezeigt, ohne dass Sie Ihren Fokus unterbrechen müssen, um woanders nachzusehen.

Diese engere Feedback-Schleife ist der Punkt, an dem Error Lens seinen Platz in einem Frontend-Workflow verdient.

Konfigurierbare Diagnosestufen und Anzeigeoptionen

Error Lens gibt Ihnen Kontrolle darüber, was angezeigt wird und wie. Die Einstellung errorLens.enabledDiagnosticLevels akzeptiert jede Kombination von "error", "warning", "info" und "hint". Wenn Meldungen auf Hint-Ebene Ihren Bildschirm überladen, können Sie sie vollständig aus der Liste entfernen.

Einige Einstellungen, die Sie kennen sollten:

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

• messageBackgroundMode steuert, ob die gesamte Zeile oder nur der Meldungstext hervorgehoben wird. Die Einstellung auf "message" reduziert visuelles Rauschen erheblich.
• followCursor auf "activeLine" gesetzt zeigt Inline-Meldungen nur für die Zeile an, auf der sich Ihr Cursor befindet – eine gute Option, wenn Sie die Hervorhebung der gesamten Datei überwältigend finden.
• delay fügt eine Pause (in Millisekunden) hinzu, bevor Dekorationen erscheinen, was bei großen Dateien hilft, bei denen ständiges Neurendern ablenkend wirken kann.

Sie können auch bestimmte Dateien mit Glob-Mustern über errorLens.excludePatterns ausschließen oder Diagnosen von bestimmten Tools mit errorLens.excludeBySource unterdrücken.

Bessere Fehlersichtbarkeit ohne das Rauschen

Die häufigste Beschwerde über die Error Lens Extension für VS Code ist Informationsüberflutung – besonders bei Dateien mit vielen bestehenden Warnungen. Die Lösung besteht nicht darin, sie zu deinstallieren, sondern sie anzupassen.

Beginnen Sie nur mit Fehlern und Warnungen. Verwenden Sie "followCursor": "activeLine", wenn die Vollansicht zu viel ist. Erweitern Sie schrittweise, was Sie anzeigen, wenn Sie sich damit wohlfühlen. Die meisten Entwickler finden innerhalb von ein oder zwei Tagen eine Konfiguration, die sich natürlich anfühlt.

Fazit

Die integrierten Diagnosen von VS Code sind funktional, aber passiv. Error Lens macht sie aktiv – indem es die Meldung dort platziert, wo Ihre Augen bereits sind. Für Frontend-Entwickler, die schnelleres, klareres Feedback von ESLint, TypeScript und anderen Language-Tools wünschen, ist es eine der praktischsten Erweiterungen, die Sie Ihrem Setup hinzufügen können.

Installieren Sie es aus dem VS Code Marketplace, belassen Sie die Standardeinstellungen für einen Tag und passen Sie es dann von dort aus an.

FAQs

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.