Wie können Sie in Sublime Text Code abkürzen?

9

Ich entschuldige mich, aber ich weiß nicht, wie es heißt, ob dies gefragt wurde oder für welche Stack-Site dies am besten geeignet ist. Ich habe mehrere Videos darüber gesehen, wie Leute Sublime verwenden, um schnellere Tags zu erstellen, und ich möchte lernen, wie dies richtig funktioniert, wenn es eine Dokumentation gibt oder was ich in meiner Codierung schneller tun kann.

In mehreren Videos sehe ich Leute, die Dinge tun wie:

div.classund es wird <div class="class"></div>nach erstellen tab.

sublime-text-2 DᴀʀᴛʜVᴀᴅᴇʀ
quelle
Sie können auch Ihre eigenen benutzerdefinierten Snippets erstellen. docs.sublimetext.info/en/latest/extensibility/snippets.html
Abdessamad Idrissi
Der obige Link ist nicht mehr gültig. Gibt es einen offiziellen Link, der angibt, wie wir unsere eigenen benutzerdefinierten Snippets erstellen können?
Anjanesh

Antworten:

11

Die von Ihnen beschriebene Funktion ist standardmäßig Teil von Sublime Text 2. Stellen Sie sicher, dass Ihr Dokument HTML-Syntax verwendet ( Ansicht »Syntax» HTML ).

Geben Sie ein foo.bar, drücken TabSie und Sie erhalten <foo class="bar"></foo>. Es gibt auch foo#bar(für idstatt class). Beide sind implementiert in .Packages/HTML/html_completions.py

Daniel Beck
quelle
Gibt es eine Dokumentation zum Erstellen von aTags und Ähnlichem li? Ist das nur für HTML? und +1.
DᴀʀᴛʜVᴀᴅᴇʀ
@Gramps Ich bin mir nicht sicher, was Sie meinen, aber beachten Sie, dass ich auf das Skript hingewiesen habe, in dem diese Funktion implementiert ist (wählen Sie den Menüpunkt Pakete durchsuchen… , um zu dem von mir erwähnten Verzeichnis zu gelangen). Sie können beispielsweise das vorhandene Skript erweitern, um z. B. zusätzliche Trennzeichen zu unterstützen. Sublime Text 2-Skripte sind in Python implementiert. Hier ist die Python-Dokumentation . Diese Seite enthält die Dokumentation zu Sublime Text 2.
Daniel Beck
Ich habe jemanden gesehen, div#main.containeraber Sublime spuckt ein mainElement mit einer Klasse aus, containerwenn ich es versuche?
Taco
7

Emmet / Zen-Codierung

Emmet ist ein Plugin, mit dem Sie die Grundstruktur CSS-selektorartig schreiben und vom Editor erweitern lassen. Sie können das Paket auf GitHub finden und über den Paketmanager installieren.


(Quelle: smashingmagazine.com )

Dieses Smashing Magazine hat einen Artikel darüber . Zum Beispiel,

(.foo>h1)+(.bar>h2)

wird mit Tabzu erweitern

<div class="foo">
  <h1></h1>
</div>
<div class="bar">
  <h2></h2>
</div>

Auswahl in Tags einschließen

Sie können auch drücken AltShiftW, um ein offenes Tag zu erstellen oder die aktuelle Auswahl in ein Tag zu verpacken (siehe Bearbeiten »Tag» Aktuelle Auswahl in Tag umbrechen ).

Standardmäßig wird Folgendes erstellt:

<p></p>

mit dem ausgewählten Tag-Namen, damit Sie ihn überschreiben können.

Durch Drücken von Tabgelangen Sie weiter in das Tag hinein. Wenn Sie drücken Space, können Sie auch Attribute erstellen, zum Beispiel:

  • AltShiftW(unter Windows / Linux) oder CtrlShiftWunter OS X.
  • A
  • Space
  • Geben Sie href="..."dann einTab
  • Das Ergebnis ist, <a href="..."></a>wenn sich der Cursor innerhalb des Tags befindet
slhck
quelle