Wie kann ich die HTML-Fehlerprüfung und -validierung von Visual Studio Code aktivieren?

Ich bin gerade für die Webentwicklung von Visual Studio Code auf Visual Studio Code umgestiegen NetBeans und finde mich zurecht. Wenn ich in NetBeans die schließende Klammer eines Tag-Namens vergesse, wird mein Fehler mit einer roten verschnörkelten Unterstreichung und der Warnung am linken Rand angezeigt.

Ich hätte gedacht, dass die Fehlerprüfung eine grundlegende Funktion in einem Webentwicklungseditor wie Visual Studio Code ist. Vielleicht finde ich einfach nicht die richtige Option oder Erweiterung.

Wie kann ich dasselbe Verhalten bei der HTML- und CSS-Fehlerprüfung in Visual Studio Code erreichen?

Visual Studio Code hat standardmäßig keine HTML-Validierung. Sie können jedoch Erweiterungen hinzufügen und diese Funktionen aktivieren.

Um eine HTML-Validierung (Linting) hinzuzufügen, öffnen Sie Visual Studio Code und drücken Sie dann Strg + P. Dann einfügen ext install HTMLHint darin, und drücken Sie Eingeben. Es wird ein HTML-Validator installiert. Möglicherweise müssen Sie Visual Studio Code neu laden, um die Erweiterung zu laden.

Wenn Sie jetzt dasselbe HTML-Dokument öffnen, in dem Sie den Syntaxfehler hatten, sollten Sie sehen, dass in der Statusleiste unten ein Problem angezeigt wird :), und es zeigt Ihnen auch die Fehler in diesen Zeilen.

Visual Studio Code unterstützt standardmäßig die Codeformatierung und verfolgt syntaktische Fehler. Wenn Sie eine neue Datei erstellen und direkt versuchen, den Code zu schreiben, kann Visual Studio Code nicht verstehen, welche Sprache oder Art von Syntax der Benutzer formatieren oder korrigieren möchte.

Man muss also zuerst die neue Datei mit der richtigen Erweiterung speichern, und dann kann Visual Studio Code die Syntax richtig identifizieren.

Die Codeformatierung ist in Visual Studio Code über die folgenden Verknüpfungen verfügbar:

• Unter Windows Schicht + Alt + F
• Auf dem Mac Schicht + Möglichkeit + F
• Auf Ubuntu Strg + Schicht + ICH

Du kannst hinzufügen Auto-Close-Tag aus dem Visual Studio Code Marketplace.

Starten Sie Visual Studio Code Quick Open (Strg + P), fügen Sie den folgenden Befehl ein und drücken Sie Eingeben.

1. Fügen Sie automatisch das HTML/XML-Schließtag hinzu, das gleiche wie in der Visual Studio-IDE oder Erhabener Text

   ext install auto-close-tag
   

2. Visual Studio Code-Integration für HTMLHint – Ein statisches Codeanalysetool für HTML

   ext install HTMLHint
   

3. Stellt die Vervollständigung des CSS-Klassennamens für das HTML-Klassenattribut basierend auf den CSS-Dateien in Ihrem Arbeitsbereich bereit. Es unterstützt auch Reagieren‘s className-Attribut.

   ext install html-css-class-completion
   

Dies ist keine integrierte Funktion von Visual Studio Code … Es stehen jedoch viele Plugins zur Verfügung. Ich würde Ihnen das HTMLHint-Plugin empfehlen. Das habe ich benutzt.

Sie können es mit installieren ext install HTMLHint Befehl.

Ich fand, dass die Erweiterung W3C-Validierung (wobei Sie die eingebauten Regeln nicht erweitern können) funktioniert besser als HTMLHint zum Überprüfen der HTML-Gültigkeit.

ID: umoxfo.vscode-w3cvalidation

Beschreibung: Fügt W3C-Validierungsunterstützung zu Visual Studio Code hinzu.

Version: 2.3.0

Verlag: Umoxfo VS

Es gibt eine Erweiterung für Visual Studio Code, nämlich HTMLHint.
Sie können dies installieren, indem Sie die folgenden Anweisungen befolgen.

1. Um den extensions:marketplace zu öffnen, drücken Sie Strg + Schicht + X
2. Geben Sie HTMLHint in das Sucherweiterungsfeld ein
3. Klicken Sie im Suchergebnis auf die Schaltfläche „Installieren“, die den von „Mike Kaufman“ entwickelten HTMLHint anzeigt.

Da HTMLHint hier als problematisch gemeldet wird (viele Bugs, wenig Updates), habe ich es gefunden und ausprobiert HTML-validierendie eine hat Visual Studio Code-Erweiterung.

Letzteres soll eigenständig sein, aber als ich es installierte, beschwerte es sich und sagte mir, ich solle HTML-Validate global installieren; Ich habe es getan, und die Erweiterung scheint ziemlich gut zu funktionieren und eine gute Anpassungsfähigkeit zu haben, wie z ESLint Zum Beispiel.