Wie setze ich das HTML-Format für den automatischen Einzug auf Sublime Text 3?

Question

Ich habe eine Frage, während ich HTML-Code auf Sublime Text 3 schreibe. Ich möchte nur das automatische Einzugformat von HTML festlegen. Zum Beispiel, wenn ich p-Tag wie unter Code schreibe, funktioniert die Einrückung so.

<p> 
Hello world! 
</p> 

Aber ich möchte wie unter Code anstelle von oben schreiben.

<p> 
    Hello world! 
</p> 

Und nicht nur p-Tag auch ul, ol und etc.

Wie kann ich automatischen Einzug Format von HTML auf Sublime Text 3?

Answer 1

Eine Option ist, [command] + [shift] + [p] (oder das Äquivalent) einzugeben und dann 'indentation' einzugeben. Das beste Ergebnis sollte "Eindendation: Reindent Lines" sein. Drücken Sie [Enter] und das Dokument wird formatiert.

Eine weitere Option ist die Installation des Emmet-Plugins (http://emmet.io/), das nicht nur eine bessere Formatierung bietet, sondern auch eine Vielzahl anderer unglaublicher Funktionen. Um die Ausgabe zu erhalten Sie suchen Sublime Text 3 mit dem Emmet-Plugin erfordert nur die folgenden:

p [tab][enter] Hello world! 

Wenn Sie p geben Sie [Tab] Emmet erweitert es:

<p></p> 

Durch Drücken von [ Enter] dann weiter expandiert zu:

Mit dem Cursor eingerückt und auf der Linie zwischen den Tags. Bedeutung, dass in Textergebnissen eingeben:

<p> 
    Hello, world! 
</p> 

Answer 2

Dies wurde mich auch nervt, da dies ein Standard-Feature in Sublime Text 2, war aber irgendwie automatischer Einzug nicht mehr in Sublime Text 3 für HTML-Dateien gearbeitet.

Meine Lösung war, die Miscellaneous.tmPreferences Datei von Sublime Text 2 zu finden (gefunden unter% AppData%/Roaming/Sublime Text 2/Packages/HTML) und diese Einstellungen in die gleiche Datei für ST3 zu kopieren.

Jetzt ist die Handhabung von Paketen für ST3 schwieriger geworden, aber glücklicherweise können Sie die Dateien nur Ihrem Ordner% AppData%/Roaming/Sublime Text 3/Pakete hinzufügen und die Standardeinstellungen im Installationsverzeichnis überschreiben. Speichern Sie diese Datei einfach als "% AppData%/Roaming/Sublime Text 3/Pakete/HTML/Miscellaneous.tmPreferences" und der automatische Einzug funktioniert wieder wie in ST2.

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> 
<plist version="1.0"> 
<dict> 
    <key>name</key> 
    <string>Miscellaneous</string> 
    <key>scope</key> 
    <string>text.html</string> 
    <key>settings</key> 
    <dict> 
     <key>decreaseIndentPattern</key> 
      <string>(?x) 
      ^\s* 
      (&lt;/(?!html) 
       [A-Za-z0-9]+\b[^&gt;]*&gt; 
      |--&gt; 
      |&lt;\?(php)?\s+(else(if)?|end(if|for(each)?|while)) 
      |\} 
      )</string> 
     <key>batchDecreaseIndentPattern</key> 
      <string>(?x) 
      ^\s* 
      (&lt;/(?!html) 
       [A-Za-z0-9]+\b[^&gt;]*&gt; 
      |--&gt; 
      |&lt;\?(php)?\s+(else(if)?|end(if|for(each)?|while)) 
      |\} 
      )</string> 
     <key>increaseIndentPattern</key> 
      <string>(?x) 
      ^\s* 
      &lt;(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^&gt;]*/&gt;) 
       ([A-Za-z0-9]+)(?=\s|&gt;)\b[^&gt;]*&gt;(?!.*&lt;/\1&gt;) 
      |&lt;!--(?!.*--&gt;) 
      |&lt;\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1) 
      |\{[^}"']*$ 
      </string> 
     <key>batchIncreaseIndentPattern</key> 
      <string>(?x) 
      ^\s* 
      &lt;(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^&gt;]*/&gt;) 
       ([A-Za-z0-9]+)(?=\s|&gt;)\b[^&gt;]*&gt;(?!.*&lt;/\1&gt;) 
      |&lt;!--(?!.*--&gt;) 
      |&lt;\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1) 
      |\{[^}"']*$ 
      </string> 
     <key>bracketIndentNextLinePattern</key> 
     <string>&lt;!DOCTYPE(?!.*&gt;)</string> 
    </dict> 
</dict> 
</plist> 

Answer 3

erstellen KeyBinding

Um den automatischen Einzug auf Sublime Text 3 mit einem Schlüssel binden versuchen,

gehen

Einstellungen> Tastenbelegungen - Benutzer

Und das Hinzufügen dieser Code zwischen den eckigen Klammern

{"keys": ["alt+shift+f"], "command": "reindent", "args": {"single_line": false}} 

es setzt shift + alt + f, um Ihre vollständige Seite Auto Einzug sein.

Quelle here

Hinweis: wenn dies nicht richtig funktioniert, dann sollten Sie Ihre Vertiefung zu Tabs konvertieren. Auch Kommentare in Ihrem Code können Ihren Code auf die falsche Einrückungsebene verschieben und müssen möglicherweise manuell verschoben werden.

Answer 4

Dies ist eine Anpassung der obigen Antwort, sollte aber vollständiger sein.

Um klar zu sein, ist dies zu führen Sie frühere Auto-Einzug Features wieder ein, wenn HTML-Dateien in Sublime Text geöffnet sind. Wenn Sie also ein Tag abschließen, wird automatisch auf das nächste Element eingetippt.

Windows-Benutzer

-C:\Program Files\Sublime Text 3\Packages Extrakt gehen HTML.sublime-package, als ob es sich um eine Zip-Datei in ein Verzeichnis ist.

öffnen Miscellaneous.tmPreferences und kopieren Sie diese Inhalte in die Datei

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> 
<plist version="1.0"> 
<dict> 
    <key>name</key> 
    <string>Miscellaneous</string> 
    <key>scope</key> 
    <string>text.html</string> 
    <key>settings</key> 
    <dict> 
     <key>decreaseIndentPattern</key> 
      <string>(?x) 
      ^\s* 
      (&lt;/(?!html) 
       [A-Za-z0-9]+\b[^&gt;]*&gt; 
      |--&gt; 
      |&lt;\?(php)?\s+(else(if)?|end(if|for(each)?|while)) 
      |\} 
      )</string> 
     <key>batchDecreaseIndentPattern</key> 
      <string>(?x) 
      ^\s* 
      (&lt;/(?!html) 
       [A-Za-z0-9]+\b[^&gt;]*&gt; 
      |--&gt; 
      |&lt;\?(php)?\s+(else(if)?|end(if|for(each)?|while)) 
      |\} 
      )</string> 
     <key>increaseIndentPattern</key> 
      <string>(?x) 
      ^\s* 
      &lt;(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^&gt;]*/&gt;) 
       ([A-Za-z0-9]+)(?=\s|&gt;)\b[^&gt;]*&gt;(?!.*&lt;/\1&gt;) 
      |&lt;!--(?!.*--&gt;) 
      |&lt;\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1) 
      |\{[^}"']*$ 
      </string> 
     <key>batchIncreaseIndentPattern</key> 
      <string>(?x) 
      ^\s* 
      &lt;(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^&gt;]*/&gt;) 
       ([A-Za-z0-9]+)(?=\s|&gt;)\b[^&gt;]*&gt;(?!.*&lt;/\1&gt;) 
      |&lt;!--(?!.*--&gt;) 
      |&lt;\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1) 
      |\{[^}"']*$ 
      </string> 
     <key>bracketIndentNextLinePattern</key> 
     <string>&lt;!DOCTYPE(?!.*&gt;)</string> 
    </dict> 
</dict> 
</plist> 

dann wieder zip die Datei als HTML.sublime-package und ersetzen Sie die vorhandene HTML.sublime-package mit dem Sie gerade erstellt.

Schließen und öffnen Sie Sublime Text 3 und fertig!