Freigeben über

Linting JavaScript in Visual Studio

  • Artikel

Das Linting von JavaScript und TypeScript in Visual Studio wird von ESLintunterstützt. Wenn ESLint neu für Sie ist, können Sie beginnen, indem Sie sich mit der zugehörigen Dokumentation vertraut machen.

Aktivieren der Lintingunterstützung

Um die Linting-Unterstützung in Visual Studio 2022 oder höheren Versionen zu aktivieren, aktivieren Sie die Einstellung "ESLint aktivieren" in Tools > Optionen > Text-Editor > JavaScript/TypeScript > Linting-.

Screenshot: Seite unter „Extras > Optionen“ für das Linten

Auf der Seite „Optionen“ können Sie auch die Gruppe der Dateien ändern, die Sie linten möchten. Standardmäßig wird für alle Dateierweiterungen, für die Linting ausgeführt werden kann (.js, .jsx, .ts, .tsx, .vue, .html), ein Lintingvorgang ausgeführt. Der HTML-LSP-basierte Editor muss für das Linting von Vue- und HTML-Dateien aktiviert sein. Die entsprechende Einstellung finden Sie in Tools > Options > Environment > Preview Features>HTML LSP-basierter Editor.

Sie können diese Optionen in einigen Projekttypen außer Kraft setzen, z. B. die eigenständige React-Projektvorlagen. In diesen Projekten können Sie die Einstellungen auf der Tools > Optionen Seite mit den Projekteigenschaften außer Kraft setzen:

Screenshot: Projekteigenschaften für das Linten

Installieren von ESLint-Abhängigkeiten

Sobald linting aktiviert ist, müssen die erforderlichen Abhängigkeiten installiert werden. Abhängigkeiten umfassen das ESLint npm Paket und andere Plug-Ins, die für Ihr Projekt gelten. Dieses Paket kann lokal in jedem Projekt installiert werden, in dem Sie die Linierung aktivieren möchten, oder Sie können es global mit npm install -g eslintinstallieren. Eine globale Installation wird jedoch nicht empfohlen, da Plug-Ins und gemeinsam nutzbare Konfigurationen immer lokal installiert werden müssen.

Ab Visual Studio 2022, Version 17.7 Preview 2, können Sie auch die einstellung ESLint Path in Tools >> Optionen > Text-Editor > JavaScript/TypeScript > Linting verwenden, um ein Verzeichnis anzugeben, aus dem ESLint geladen werden soll. Diese Einstellung ist nützlich, wenn ESLint global installiert wird, wo Sie möglicherweise den entsprechenden Pfad auf C:\Program Files\nodejs\node_modulesfestlegen.

Je nach den Dateien, die Sie linten möchten, sind möglicherweise andere ESLint Plugins erforderlich. Beispielsweise benötigen Sie möglicherweise TypeScript ESLint, wodurch ESLint auf TypeScript-Code ausgeführt werden kann und Regeln enthält, die für die zusätzlichen Typinformationen spezifisch sind.

Wenn ESLint aktiviert ist, aber das ESLint-npm-Paket nicht gefunden wird, wird ein Goldbalken angezeigt. Mit dieser Meldung können Sie ESLint als lokale npm Entwicklungsabhängigkeit installieren.

Screenshot: Goldene Leiste zum Installieren von „ESLint“

Ebenso wird ein Goldbalken angezeigt, wenn eine .eslintrc- Datei nicht gefunden wird. Mit dieser Meldung können Sie einen Konfigurations-Assistenten ausführen, der die auf das aktuelle Projekt anwendbaren Plug-Ins installiert.

Screenshot: Goldene Leiste zum Ausführen des ESLint-Assistenten

Deaktivieren von Lintingregeln und automatische Korrekturen

Sie können Lintingfehler in einer bestimmten Zeile oder Datei deaktivieren. Sie können die Fehler mithilfe des Schnellaktionen-Glühbirnenmenüs deaktivieren:

Screenshot: Schnelle Aktionen für das Linten

Die folgende Abbildung zeigt das Ergebnis, wenn Sie einen Lintingfehler für die ausgewählte Codezeile deaktivieren.

Screenshot: Deaktivierte Lintingregel

Darüber hinaus können Sie mit Aktionen zum automatischen Korrigieren von Code eine automatische Korrektur zur Behebung des betreffenden Lintingfehlers anwenden.

Fehlerbehebung

Sie können den Bereich ESLint Language Extension im Ausgabefenster öffnen, um Fehlermeldungen oder andere Protokolle anzuzeigen, die das Problem möglicherweise erklären.