Kann VS Code Emmet?

Meinen Sie, funktioniert Visual Studio Code, der kostenlose Code-Editor von Microsoft, mit Emmet, dem kostenlosen und Open-Source-Code-Erweiterungstool? Die Antwort ist natürlich! Tatsächlich müssen Sie nichts tun, um es zum Laufen zu bringen. Emmet ist in VS Code integriert.

Werfen wir einen Blick darauf, was Emmet kann und einige VS-Code-spezifische Dinge, um das Beste daraus zu machen.

In diesem Artikel verwende ich ⌘, um die Befehlstaste auf Apple und die Steuerungstaste unter Windows zu bezeichnen. Ich werde auch ⇧ für die Umschalttaste verwenden.

Was ist Emmet?

Emmet ist ein Code-Erweiterungstool, das entwickelt wurde, um die Erstellung von HTML und CSS dramatisch zu beschleunigen.

Es funktioniert so. Sagen wir, Sie wollten ein div erstellen. Normalerweise würden Sie jeden Buchstaben tippen

< … d … i … v … >

Ihr Texteditor hilft Ihnen vielleicht sogar dabei, diesen Tag-Namen automatisch zu vervollständigen. Dann, um ihn zu schließen, müssen Sie vielleicht nur eine neue spitze Klammer (<) tippen und er wird anbieten, den schließenden Tag zu vervollständigen.

Das ist keine schlechte Methode, um HTML zu erstellen, aber wenn Sie in HTML arbeiten, schreiben Sie wahrscheinlich viele weitere Tags als diese, was bedeutet, dass Sie viele spitze Klammern öffnen und schließen. Diese spitzen Klammern können Sie wirklich verlangsamen und die Erstellung von HTML mühsam machen.

Hier kommt Emmet ins Spiel.

Emmet erlaubt Ihnen, einfach div einzugeben und die Tabulatortaste zu drücken. Es wird automatisch in einen vollständigen HTML-div-Tag erweitert.

Das funktioniert für jeden HTML-Tag. Sie können eine ID mit einem #, eine Klasse mit einem . und Attribute mit [foo] hinzufügen. Es tut mehrere von jedem!

Tatsächlich müssen Sie, wenn Sie mit einem div arbeiten, nicht einmal den div-Tag angeben. Sie können einfach mit der ID oder Klasse beginnen und Sie erhalten standardmäßig ein div. Emmet ist sogar schlau genug, das in ein <span> zu ändern, wenn Sie sich innerhalb eines anderen standardmäßig Inline-Elements befinden.

Ziemlich komplexe Markups können auf diese Weise erstellt werden. Sie können > verwenden, um eine Ebene tiefer zu gehen, und +, um Elemente auf derselben Ebene anzugeben. Nehmen wir zum Beispiel eine Bootstrap-Navbar. Das Markup einer Navbar könnte so aussehen

<nav class="navbar">
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="navbar-nav">
    <a class="nav-item nav-link" href="#">Home</a>
    <a class="nav-item nav-link" href="#">Features</a>
    <a class="nav-item nav-link" href="#">Pricing</a>
  </div>
</nav>

Wir können diesen gesamten Block mit Emmet wie folgt generieren

Da steckt viel Emmet-Syntax drin. Der beste Weg, sie zu lernen, ist, sich das Emmet Syntax Cheat Sheet zu schnappen.

Sie können auch Lorem Ipsum einbauen, falls nötig.

Sie haben wahrscheinlich bemerkt, dass ich 3 Anker-Tags automatisch generieren konnte und dass, als ich alles in HTML expandierte, ich Tabulatoren auf all meinen Anker-Tags und href-Attributen hatte. Dies ermöglicht es Ihnen, schnell einen Block von HTML zu erstellen und dann spezifische Details zu jedem Element hinzuzufügen.

Es gibt jedoch einen anderen (kann ich sagen cooleren) Weg, dies zu tun 😎. Er heißt "Wrap Individual Lines".

Zeilen einzeln mit Abkürzung umschließen

Wenn wir zum obigen Beispiel zurückkehren, möchten wir eigentlich eine Navbar mit Links für Home, Features und Pricing haben. Wir können diesen Text hinzufügen, nachdem wir das Markup mit Emmet generiert haben, oder wir können es vorher tun, indem wir den Befehl "Wrap Individual Lines With Abbreviation" verwenden.

Rufen Sie die Befehlspalette auf (⌘ + ⇧ + P) und wählen Sie "Wrap Individual Lines". Wir geben die exakt gleiche Emmet-Syntax ein wie zuvor, stoppen diesmal aber bei *, da Emmet hier unsere Zeilen einfügen wird.

Es gibt auch "Wrap With Abbreviation", das eine einzelne Zeile umschließt, ohne dass etwas ausgewählt werden muss. Das ist besonders nützlich beim Umschließen von Links. Fügen Sie einfach eine URL ein, rufen Sie den Befehl auf, drücken Sie "a" und dann Enter.

🔥 Heißer Tipp

Ordnen Sie dem Befehl "Wrap With Abbreviation" eine Tastenkombination zu. Das macht es super schnell, Dinge wie Anker zu erstellen.

Emmet in anderen Dateitypen

Standardmäßig funktioniert Emmet mit HTML und CSS – und das schließt Präprozessoren/Template-Sprachen mit ein. Out-of-the-box erhalten Sie Unterstützung in html, haml, jade, slim, jsx, xml, xsl, css, scss, sass, less und stylus. Die Dokumentation erwähnt auch, dass es in jedem Dateityp funktioniert, der von den obigen Dateitypen erbt – wie z. B. PHP.

CSS

Emmet funktioniert auch in CSS. Es verwendet eine Suchtechnik namens Fuzzy Search, die mit wenigen Zeichen das übereinstimmt, was Sie ausdrücken möchten. Zum Beispiel erweitert sich df zu display: flex; und w100p zu width: 100%;.

Diese funktionieren in verschiedenen CSS-Dateitypen, wie Sass, wo es weiß, dass es in der `.sass`-Syntax keine Semikolons einfügen soll.

Vererbung von Dateitypen

Leider gibt es keine Möglichkeit zu wissen, welche Dateien von einem vorhandenen Sprachtyp erben. Markdown-Dateien sind beispielsweise kein Fall für Emmet, da Markdown nicht von bekannten Typen erbt. Auch wenn HTML in Markdown-Dateien perfekt gültig ist.

Um dies zu beheben, können wir eine Sprachzuordnung hinzufügen, damit Emmet weiß, wie es sich in Markdown-Dateien verhalten soll. Fügen Sie die folgende Zeile zu Ihrer Benutzer-Einstellungen hinzu.

Um schnell zu den Benutzereinstellungen zu gelangen, drücken Sie ⌘, (Befehl-Komma).

"emmet.includeLanguages": {  
    "markdown": "html"
}

Jetzt haben wir Markdown HTML zugeordnet, damit Emmet weiß, wie die Datei behandelt werden soll. Naja, fast. Wenn wir eine Markdown-Datei öffnen, werden Sie feststellen, dass Emmet funktioniert, aber nicht wie erwartet. Wenn ich div tippe und Tab drücke, passiert nichts. Wenn ich div und dann ein * tippe, versucht Emmet, über das Vorschlagsmenü zu starten.

Das ist nicht gut, denn Markdown verwendet Sternchen für Überschriften. Emmet wird diese jedes Mal abfangen. Der Grund dafür ist, dass VS Code versucht zu verhindern, dass die Tabulatortaste eine andere Funktion beeinträchtigt, die sie in einem Dokument dieses Typs haben könnte.

Um dies zu umgehen, können wir die folgende Zeile zu unseren Benutzereinstellungen hinzufügen

"emmet.triggerExpansionOnTab": true

Jetzt funktioniert die div-Erweiterung per Tab, aber die Sternchen lösen immer noch das Emmet-Vorschaufenster aus. Mein Vorschlag ist, dieses Fenster mit der folgenden Zeile in den Benutzereinstellungen komplett auszuschalten

"emmet.showExpandedAbbreviation": "never"

Das funktioniert auch für Sprachen wie React und Vue. Obwohl Emmet standardmäßig in JSX-Dateien funktioniert, können wir es auch in JSX in normalem JavaScript zum Laufen bringen. Fügen Sie diese Zuordnung zu Ihren Benutzereinstellungen hinzu

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
}

Eigene Snippets erstellen

Sie können auch Ihre eigenen Emmet-Snippets erstellen.

Zum Beispiel könnten Sie Emmet's SVG-Fähigkeiten erweitern, indem Sie ein benutzerdefiniertes Snippet wie rect erstellen, das auf rect[x][y][width][height] abgebildet wird und somit expandiert zu

<rect x="" y="" width="" height=""></rect>

Mehr Informationen dazu finden Sie in der offiziellen VS Code Dokumentation. So funktionieren auch CodePen Custom Snippets!

Weitere Emmet-Ressourcen

Wenn Sie mehr über Emmet erfahren möchten, finden Sie hier einige weitere Ressourcen für den Einstieg

• Emmet Snippets Cheat Sheet
• Emmet Dokumentation
• VS Code und Emmet