VS Code Erweiterungen für HTML

Lassen Sie uns einige Erweiterungen für VS Code betrachten, die das Schreiben und Bearbeiten von HTML (und Sprachen, die im Grunde HTML mit zusätzlichen Funktionen sind) verbessern. Möglicherweise gefallen Ihnen nicht alle davon. Vielleicht spricht Sie die eine oder andere nicht an, löst ein Problem, das Sie nicht haben, oder fühlt sich mehr nach Unordnung an, als Sie benötigen. Das ist in Ordnung. Dies ist nur eine Handvoll, die ich bis zu einem gewissen Grad ausprobiert und gemocht habe.

Ich würde hier mit Emmet beginnen, obwohl es technisch gesehen keine Erweiterung¹ für VS Code ist. Es ist bereits integriert. Sie sollten es jedoch kennen, da es sehr nützlich ist. Es bietet "HTML-Erweiterungen" wie diese, die ich fast jeden Tag meines Lebens nutze.

HTML End Tag Labels

Ich habe davon von Stefan Judis gehört, der neulich darüber gebloggt hat und mich zu dieser Post-Idee inspiriert hat.

Die ganze Idee ist, dass anstatt Kommentare in Ihrem HTML zu hinterlassen, um anzugeben, welches HTML-Element geschlossen wird (eine etwas übliche Praxis, insbesondere für Partial-Dateien, die Elemente schließen, die möglicherweise nicht im selben Dokument geöffnet wurden).

<div class="main">


</div> <!-- / div.main -->

<?php /* / div.main */ ?>
<?php /* Sometimes I'd do it in a server side language so it didn't go over the wire. */ ?>

Diese Erweiterung zeigt Ihnen UI darüber an, was für HTML gerade geschlossen wird.

Auto Close Tag

Sobald Sie das > in einem HTML-Element eingeben, wie z. B. die letzte Klammer in <div>, wird der schließende Tag automatisch für Sie erstellt.

Es kann so konfiguriert werden, dass es nur automatisch schließt, nachdem Sie </ eingegeben haben, um anzuzeigen, dass Sie einen Tag schließen möchten, was eine Standardeinstellung in Sublime Text 3 ist. Wenn Sie übrigens die Sublime Text Keymap installieren, erhalten Sie dies automatisch, plus eine Reihe weiterer nützlicher Tastenkombinationen.

Es gibt auch Close HTML/XML tag, aber es funktioniert nur per Tastenkommando. Mit Auto Close Tag können Sie es beides konfigurieren und es hat aus irgendeinem Grund weitaus mehr Installationen.

Highlight Matching Tag

Hier ist das GIF aus deren Dokumentation.

Ich wollte ein eigenes Video machen, aber ich habe entdeckt, dass selbst wenn diese Erweiterung deaktiviert ist, etwas anderes in meinem VS Code die passenden Tags hervorhebt. Ich bin mir nicht ganz sicher, was es ist, was mich zu der Annahme verleitet, dass es sich jetzt um eine integrierte Funktion handelt.

Nicht spezifisch für HTML, aber wenn Ihnen diese Art von Hilfe bei passenden Elementen gefällt, könnten Sie Bracket Pair Colorizer 2 ausprobieren, was für CSS und JavaScript sehr nützlich sein kann.

Auto Rename Tag

Ich finde diese eine ziemlich nützlich!

Ich glaube, diese Funktionalität ist tatsächlich im kanonischen Emmet integriert, aber VS Code verwendet kein kanonisches Emmet, daher ist diese Funktion nicht vorhanden, weshalb dieses zusätzliche Plugin benötigt wird.

Better Comments

Ich hinterlasse ziemlich freizügig Code-Kommentare, besonders wenn ich neue Dinge entwickle. Eine Konvention, die ich mag, ist, dass ein Kommentar, wenn er mit einem Präfix versehen ist (z. B. TODO), besonders wichtig ist und Aufmerksamkeit erfordert. Better Comments lässt diese visuell unterschiedlich aussehen.

Code Spell Checker

In VS Code gibt es keine Rechtschreibprüfung. Das gefällt mir nicht. Für mich ist dieses Plugin ein Muss, besonders für HTML, da HTML typischerweise Inhalte hat, wie z. B. Wörter, die richtig geschrieben sein sollten. Und genau wie ein Linter gibt Ihnen dieses Plugin Unterstreichungen, wenn etwas falsch ist, und ein Menü, um es zu beheben.

Indent Rainbow

Erfreuen Sie sich an diesem glorreichen Regenbogen, der durch vertiefte Einrückungen erzeugt wird.

Der Punkt ist, dass es Ihnen visuelle Hinweise auf das aktuelle Niveau gibt, auf dem Sie sich befinden. In diesem Sinne ist es ähnlich wie bei Highlight Matching Tag, aber ich mag ehrlich gesagt beide. Es ist am nützlichsten, wenn Sie nach oben oder unten scrollen müssen, um den passenden Tag zu finden.

Prettier

Prettier funktioniert mit HTML, aber ich würde es fast als ein wenig kontrovers bezeichnen. Zum Beispiel bricht es HTML-Attribute auf einzelne Zeilen um, was sich sehr nach JSX anfühlt, aber in rohem HTML weniger verbreitet ist. Aber manchmal gibt es buchstäbliche Nebeneffekte. Wenn Sie z. B. bewusst <ul><li></li><li></li></ul> ohne Leerzeichen eingeben, weil Sie alle Listenelemente auf inline setzen möchten, bricht Prettier sie auf eigene Zeilen um, fügt Leerzeichen ein und ändert das Layout, das Sie beabsichtigen. Sie können es immer mit einem Kommentar für Prettier korrigieren, damit es diese ignoriert (z. B. {/* prettier-ignore */}), aber ich kann mir vorstellen, dass es bei manchen Leuten auf Widerstand stößt. Es gibt sogar Einstellungen dafür unter HTML Whitespace Sensitivity, aber es konnte nie perfekt sein.

Ich habe Prettier für HTML tatsächlich nur für diesen Blogbeitrag zum Laufen gebracht, daher denke ich, dass ich es eine Weile behalten werde, um zu sehen, ob es mir gefällt. Ich weiß bereits, dass mir Prettier für JSX gefällt. Ich bin generell für so viel automatische Formatierung wie möglich.

Snippet

Ich kann mir vorstellen, dass es viele Snippet-Plugins gibt, aber dies ist das einzige, das ich ausprobiert habe und es funktioniert gut. Ich mag es, wie man Snippets direkt aus vorhandenen Dateien erstellt.

Tabnine

Ich habe davon von Kyle Simpson gehört, der, glaube ich, einige bezahlte Beratung mit ihnen gemacht hat oder so etwas. Der Punkt ist, dass es ausgefeilte KI-gestützte Autocomplete-Vorschläge bietet, sogar in HTML. Sehen Sie sich an, wie es einige Attribute errät.

Dies scheint ein ziemlich kommerzielles Produkt zu sein, mit Funktionen, die Sie zu bezahlten Plänen für Teams drängen. Ich möchte mich nicht wirklich damit beschäftigen; es war einfach interessant, ein solches Tool mit HTML arbeiten zu sehen.

axe Accessibility Linter

Dies lintet Ihr HTML auf Zugänglichkeitsprobleme direkt im Editor. Es gibt eine Reihe von Regeln, die es prüft.

---

1. Wussten Sie, dass VS Code zwar Emmet integriert hat, es aber keine Kommunikation zwischen dem Ersteller von Emmet und dem VS Code-Team gibt? Ich habe versucht, diese Verbindung herzustellen, aber bin gescheitert. Der Punkt ist: Emmet in VS Code wäre wahrscheinlich besser, wenn es nicht nur eingeklinkt, sondern aus den offiziellen Paketen integriert wäre. Emmet hat neue Dinge, die VS Code nutzen könnte, wie z. B. Erweiterungsvorschauen. ⮑