wake-up-neo.com

VS Code HTML-Fehlerprüfung/-validierung

Ich bin gerade zu Visual Studio Code für die Webentwicklung von Netbeans gewechselt und finde mich zurecht. Wenn ich in Netbeans vergessen habe, die schließende Klammer an einem Tag zu schließen, wird dies meinen Fehler mit roter, unterstrichener Unterstreichung und die Warnung am linken Rand anzeigen.

Ich hätte gedacht, dass Fehlerüberprüfung eine grundlegende Funktion in einem Web-Entwickler-Editor wie vs code ist. Vielleicht finde ich einfach nicht die richtige Option oder Erweiterung.

Wie kann ich dasselbe HTML-, CSS-Fehlerüberprüfungsverhalten in VS Code erreichen?

8
Marc

VSCode verfügt standardmäßig nicht über eine HTML-Validierung. Sie können jedoch Erweiterungen hinzufügen und diese Funktionen aktivieren. 

Um HTML-Validierung (Flinting) hinzuzufügen, öffnen Sie VSCode, drücken Sie dann Ctrl + P und fügen Sie ext install HTMLHint ein, und drücken Sie die Eingabetaste. Es wird ein HTML-Validator installiert. Möglicherweise müssen Sie VSCode erneut laden, um die Erweiterung zu laden.

Wenn Sie nun dasselbe HTML-Dokument öffnen, in dem Sie den Syntaxfehler hatten, sollte in der Statusleiste unten ein Problem angezeigt werden :) und es werden auch die Fehler in diesen Zeilen angezeigt. 

17
Nimeshka Srimal

VS Code unterstützt standardmäßig die Formatierung des Codes und verfolgt den syntaktischen Fehler. Wenn Sie eine neue Datei erstellen und direkt versuchen, den Code zu schreiben, kann VS Code nicht verstehen, welche Sprache oder welcher Syntaxtyp der Benutzer formatieren/korrigieren möchte. Daher muss zuerst die neue Datei mit der richtigen Erweiterung gespeichert werden, bevor Visual Studio die Syntax richtig erkennt.

Die Code-Formatierung ist in VS Code über die folgenden Verknüpfungen verfügbar:

  • Unter Windows Shift + Alt + F
  • Auf dem Mac Shift + Option + F
  • Auf Ubuntu Ctrl + Shift + I

Sie können Auto Close Tag über den VS Code-Marktplatz hinzufügen.

Starten Sie VS Code Quick Open (Strg + P), fügen Sie den folgenden Befehl ein und drücken Sie die Eingabetaste.

  1. Fügen Sie automatisch HTML/XML-Close-Tag hinzu, genau wie Visual Studio IDE oder Sublime Text

    ext install auto-close-tag
    
  2. VS-Code-Integration für HTMLHint - Ein Tool zur statischen Code-Analyse für HTML

    ext install HTMLHint
    
  3. Bietet die Vervollständigung des CSS-Klassennamens für das HTML-Klassenattribut basierend auf den CSS-Dateien in Ihrem Arbeitsbereich. Unterstützt auch das className-Attribut von React.

    ext install html-css-class-completion
    
4
eigenharsha

Der VS-Code unterstützt dies standardmäßig. Außerdem ist die Emmet-Unterstützung standardmäßig aktiviert, sodass Sie sich keine Gedanken über das Schließen von HTML-Tags machen müssen. Das schließende Tag wird automatisch hinzugefügt.

1
Ganesh

Dies ist keine integrierte Funktionalität von VsCode ... 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 folgendem Befehl installieren: ext install HTMLHintBefehl

0
user8197826

Ich habe festgestellt, dass diese Erweiterung (obwohl Sie die integrierten Regeln nicht erweitern lassen) besser als HTMLHint für die Überprüfung der HTML-Gültigkeit funktioniert.

Name: W3C-Validierung

Id: umoxfo.vscode-w3cvalidation 

Beschreibung: Fügt Unterstützung für W3C-Validierung zu Visual Studio-Code hinzu. 

Version: 2.3.0 

Herausgeber: Umoxfo VS 

Marktplatz-Link: https://marketplace.visualstudio.com/items?itemName=umoxfo.vscode-w3cvalidation

0
ChekTek

Es gibt eine Erweiterung für VS-Code: HTMLHint.
Sie können das folgendermaßen installieren
1. So öffnen Sie die Nebenstellen: Drücken Sie auf marketplace Ctrl + Shift + X
2. Geben Sie HTMLHint in das Feld für die Sucherweiterung ein
3. Klicken Sie im Suchergebnis auf die Schaltfläche Installieren, um HTMLHint anzuzeigen, das von "Mike Kaufman" entwickelt wurde.

0
Riswan