Wie formatiere ich HTML-Code mit Sublime Text 2 neu?

1313

Ich habe einen schlecht formatierten HTML-Code, den ich neu formatieren möchte. Gibt es einen Befehl, der HTML-Code in Sublime Text 2 automatisch neu formatiert, damit er besser aussieht und leichter zu lesen ist?

Ravi Ram
quelle
4
Siehe auch stackoverflow.com/questions/9495007/…
Kristopher Johnson
1
Auch wenn Sie den Vintage-Modus verwenden, können Sie im normalen Modus einfach gg = G verwenden.
Wiktor Mociun
3
Sie können Ihre Zeit damit verschwenden, diese ganze Seite durchzulesen , oder Sie können einfach github.com/akalongman/sublimetext-codeformatter abrufen und wieder an die Arbeit gehen.
Shaneparsons

Antworten:

2080

Sie benötigen dazu keine Plugins. Ctrl AWählen Sie einfach alle Zeilen ( ) aus und wählen Sie dann im Menü Bearbeiten → Zeile → Neu einrücken. Dies funktioniert, wenn Ihre Datei mit einer Erweiterung gespeichert wird, die HTML wie .htmloder enthält .php.

Wenn Sie dies häufig tun, ist diese Schlüsselzuordnung möglicherweise hilfreich:

{ "keys": ["ctrl+shift+r"], "command": "reindent" , "args": { "single_line": false } }

Wenn Ihre Datei nicht gespeichert wird (z. B. Sie haben gerade ein Snippet in ein neues Fenster eingefügt), können Sie die Sprache für den Einzug manuell festlegen, indem Sie das Menü Ansicht → Syntax → language of choiceauswählen, bevor Sie die Option zum erneuten Einrücken auswählen .

Peter
quelle
19
Übrigens funktioniert dies auch für Nicht-HTML-Quellcode, wie z. B. Ruby oder JS
Peter
78
Dies funktioniert hervorragend, wenn im Code nicht mehrere Tags in einer Zeile geöffnet sind, die nicht auch in einer Zeile geschlossen werden, oder umgekehrt.
Charlie Gorichanaz
31
Perfekt! Auf dem Mac benötigen Sie Super für die Cmd-Taste, also: {"keys": ["super + shift + r"], "command": "reindent", "args": {"single_line": false}}
Geert Weening
168
line reindent funktioniert absolut NICHT zum Neuformatieren von beliebigem HTML. Zum Beispiel, wenn es mehrere HTML-Tags ohne Zeilenumbrüche gibt. Die HtmlTidy-Antwort von @anneke ist überlegen. Soweit ich das beurteilen kann, wird die Quell-HTML-Datei unabhängig von Zeilenumbrüchen vollständig und ordnungsgemäß in eine gut eingerückte Quelle umformatiert.
jpw
33
Klicken Sie für Neulinge auf "Einstellungen", wählen Sie "Schlüsselbindung - Benutzer", fügen Sie Peter-Code in die eckigen Klammern ein und speichern Sie die Datei.
Sigmapi13
375

Es gibt ungefähr ein halbes Dutzend Möglichkeiten, HTML in Sublime zu formatieren. Ich habe jedes der beliebtesten Plugins getestet (weitere Informationen finden Sie in meinem Blog ), aber hier ist ein kurzer Überblick über einige der beliebtesten Optionen:

Befehl erneut eingeben

Vorteile:

  • Wird mit Sublime geliefert, daher ist keine Plugin-Installation erforderlich

Nachteile:

  • Löscht keine zusätzlichen Leerzeilen
  • Minimiertes HTML und Zeilen mit mehreren offenen Tags können nicht verarbeitet werden
  • Formatiert <script>Blöcke nicht richtig

Etikett

Vorteile:

  • Unterstützt ST2 / ST3
  • Entfernt zusätzliche Leerzeilen
  • Keine binären Abhängigkeiten

Nachteile:

  • Drosseln an PHP-Tags
  • Behandelt <script>Blöcke nicht richtig

HTMLTidy

Vorteile:

  • Behandelt PHP-Tags
  • Einige Einstellungen zum Optimieren der Formatierung

Nachteile:

  • Benötigt PHP (greift auf den Webdienst zurück)
  • Nur ST2
  • Verlassen?

HTMLBeautify

Vorteile:

  • Unterstützt ST2 / ST3
  • Einfache und keine binären Abhängigkeiten
  • Unterstützung für OS X, Win und Linux

Nachteile:

  • Würgt ein bisschen mit Inline-Kommentaren
  • Erweitert minimierten / komprimierten Code

HTML-CSS-JS verschönern

Vorteile:

  • Unterstützt ST2 / ST3
  • Behandelt HTML, CSS, JS
  • Hervorragende Integration in die Menüs von Sublime
  • Sehr anpassbar
  • Pro-Projekt-Einstellungen
  • Option zum Speichern beim Speichern

Nachteile:

  • Benötigt Node.js.
  • Nicht gut für Embedded PHP

Welches das Beste ist?

HTML-CSS-JS Prettify ist der Gewinner in meinem Buch. Viele tolle Features, nicht viel zu beanstanden.

Josh Earl
quelle
12
2. auf Prettify. Der erneute Einzug funktionierte nicht mit dem HTML, das ich hatte, konnte Tag nicht finden und HtmlTidy tat nichts, als ich es aufrief.
JCollum
2
Ich habe es gerade ausprobiert und HTML-CSS-JS Prettify hat in meinem Anwendungsfall ideal funktioniert (die Bereinigung des HTML-Codes war weitaus besser als bei den integrierten Reindent- oder anderen Reformatter-Paketen)
Mark Essel,
2
Versuchte alle anderen, aber der einzige, der funktionierte (für einen Ausschnitt aus HTML), war HTML-CSS-JS Prettify. Vielen Dank!
Zumek
1
Außerdem wollte ich erwähnen, dass Sie alle Einrückungen entfernen können (z. B. nachdem das Markup bearbeitet wurde), indem Sie einfach die integrierten Funktionen von ST verwenden. Wählen Sie den Block aus und drücken Sie Strg + J.
Zumek
1
Funktioniert dies mit Nicht-HTML-Erweiterungen? Ich habe PHP und andere Vorlagen ausprobiert, es hat nicht funktioniert.
Bsienn
179

Das einzige Paket, das ich finden konnte, ist Tag .

Sie können es mit der Paketsteuerung installieren. https://sublime.wbond.net

Nach der Installation der Paketsteuerung. Gehen Sie zur Paketsteuerung ( Einstellungen -> Paketsteuerung ) und geben Sie ein install, drücken Sie enter. Dann tippe tagund drücke enter.

Markieren Sie nach der Installation von Tag den Text und drücken Sie die Tastenkombination Ctrl+ Alt+ F.

Dardub
quelle
21
Ein besseres Plugin ist Tidy HTML
MatthewFord
1
danke ... wusste gerade über Pakete Bescheid: D. Ich habe auch hier ein paar coole Sachen für erhabenen Text gesehen. arlando.net/blog/…
mars-o
3
Dies ist ehrlich gesagt das einzige, was perfekt mit HTML-Code funktioniert hat, der Hunderte von zufälligen Zeilenumbrüchen enthält, Tags, die falsch verschachtelt wurden. Es hat im Grunde eine der chaotischsten HTML-Seiten aufgeräumt, die ich je gesehen habe!
Justinhartman
1
Ich bin nicht einverstanden mit @ mars-o; Dieses Plugin ist großartig. Tidy macht ein paar Dinge wirklich gut und ist sehr etabliert, aber dieses Plugin macht noch einige andere interessante Dinge. Danke für den Beitrag.
Zedd45
@JonnyLeeds Das tut es irgendwie, aber nicht immer richtig. Versuchen Sie es speziell für XML Indent XMLoder IndentXunter anderem.
Joel Mellon
49

Ich empfehle dieses Plugin: HTML / CSS / JS Prettify , es funktioniert wirklich.

Wählen Sie nach der Installation einfach den Code aus und drücken Sie Ctrl+Shift+H.

Erledigt!

Peter Zhu
quelle
3
Sie benötigen Node.js, um dieses Plugin zu verwenden. Nicht sehr bequem für normale Benutzer.
Nikoskip
4
Im Vergleich zur Nützlichkeit dieses Plugins können wir die Probleme bei der Installation von Node.js ignorieren;)
Peter Zhu
Die Anweisungen zur Installation von packagecontrol.io/packages/HTML-CSS-JS%20Prettify haben hervorragend funktioniert. Vielen Dank.
Sacky San
41

Nur ein allgemeiner Tipp. Um mein HTML automatisch aufzuräumen, habe ich das Paket HTML_Tidy installiert und dann den Standardeinstellungen (die ich verwende) die folgende Tastenkombination hinzugefügt:

{ "keys": ["enter"], "command": "html_tidy" },

Dadurch wird HTML Tidy bei jeder Eingabe ausgeführt. Das mag Nachteile haben, ich bin selbst ziemlich neu bei Sublime, aber es scheint zu tun, was ich will :)

Anneke
quelle
2
Ich kann mir vorstellen, dass dieses Plugin bei großen Dateien etwas intensiver wird, was träge werden kann, wenn es jedes Mal ausgeführt wird, wenn Sie die Eingabetaste drücken.
Rikki
2
Ich habe die ENTER-Tastenkombination ungefähr einen Tag lang verwendet und sie dann entfernt. Es war zu langsam und bewegte den Cursor in Version 2 weiter nach oben.
Ravi Ram
22

Obwohl die Frage HTML betrifft, möchte ich zusätzlich Informationen darüber geben, wie Sie Ihren Javascript-Code für Sublime Text 2 automatisch formatieren können .

Sie können Ihren gesamten Code auswählen ( ctrl+ A) und die In-App-Funktionalität verwenden, reindent ( Edit-> Line-> Reindent), oder Sie können das JsFormat-Formatierungs-Plugin verwenden, Sublime Text 2wenn Sie mehr anpassbare Einstellungen zum Formatieren Ihres Codes wünschen die Standardeinstellungen für Tabulatoren / Einrückungen des erhabenen Textes.

https://github.com/jdc0589/JsFormat

Sie können einfach installieren JsFormat mit Paketsteuerung mit ( Preferences-> Package Control) öffnet Paketsteuerung dann installieren Typen, Hitenter . Dann tippe js formatund drücke enter, du bist fertig. (Der Paketcontroller zeigt den Status der Installation mit Erfolg und Fehlern in der unteren linken Leiste von an. Sublime)

Fügen Sie Ihren Tastenkombinationen die folgende Zeile hinzu ( Preferences-> Key Bindings User)

{ "keys": ["ctrl+alt+2"], "command": "js_format"}

Ich verwende ctrl+ alt+ 2, Sie können diese Tastenkombination beliebig ändern. Bisher JsFormatist ein gutes Plugin einen Versuch wert!

Hoffe das wird jemandem helfen.

Gokhan Panzer
quelle
13

Für mich war die HTML PrettifyLösung extrem einfach. Ich ging zur HTML Prettify-Seite .

  1. Benötigte die Sublime Package Manager
  2. Die Anweisungen befolgt den Paket - Manager für die Installation von hier
  3. eingegeben cmd + shift + p, um das Menü aufzurufen
  4. Eingetippt prettify
  5. Wählen Sie die HTML prettifyAuswahl im Menü

Boom. Erledigt. Sieht großartig aus

insaineyesay
quelle
Diese Lösung funktionierte genau so, wie ich es wollte und dauert bis auf 2 Sekunden, wenn Sie die PM bereits installiert haben. Vielleicht möchten Sie hinzufügen, dass Sie das Prettify-Paket installieren müssen.
Google
Hinweis: Für alle Interessierten erfordert das Plugin in dieser Antwort die Installation von node.js.
Gefälschter Name
Funktioniert nicht richtig; Nur der HTML-Code wurde bis zu einem bestimmten Einrückungsgrad eingerückt / durch Zeilenumbrüche unterbrochen und der Rest wurde nicht eingerückt und in derselben Zeile angezeigt.
Jonathan
11

Einfach gehen zu

Bearbeiten -> Tag -> Tags im Dokument automatisch formatieren

Ricardo Martins
quelle
6
Ich sehe diese Menüoption Sublime Text 2 Version 2.0.1, Build 2217auf dem Mac nicht. Sind Sie sicher, dass dies eine Standardfunktion ist?
Ostergaard
1
Sie müssen Tag über den Paketmanager installieren. Aber ich habe ein Problem damit. Wenn <b>somthing</b>ein Komma folgt, wird das Komma in eine neue Zeile gesetzt, was in einer Browseransicht zu einem Leerzeichen zwischen etwas und dem Komma führt.
Reitermarkus
9

Ich habe ein Paket namens HTMLBeautify erstellt , das HTML ordentlich neu formatiert. Ich habe es auf der Grundlage eines Perl-Skripts erstellt, das ich 1997 gefunden habe. Ich habe es aktualisiert, um mit allen neuen modernen Tags zu arbeiten. :) :)

Probieren Sie es aus und lassen Sie mich wissen, was Sie denken!

https://github.com/rareyman/HTMLBeautify

Ross
quelle
3
Ich habe es installiert, aber wenn ich HTMLBeautify für die Demo-Datei ausführe, tut es nichts. Eine Meldung Zeigt an, dass die Datei verschönert ist, aber mit dem Dateiinhalt nichts passiert.
Sam
Ich vermute, Sie verwenden Windows ...? Unter Windows müssen Sie SublimeText 2 neu starten, damit das Skript verfügbar ist. Versuchen Sie das und lassen Sie mich wissen, was passiert. :)
Ross
Ich habe es getan, das Skript war verfügbar, es hat einfach nichts in der Datei geändert.
Sam
Seltsam. Ich gehe davon aus, dass alle anderen Plugins / Pakete normal funktionieren. Ich kann dieses Problem in meinen Testumgebungen scheinbar nicht replizieren. Daher bin ich mir nicht sicher, was ich Ihnen sagen soll. :(
Ross
Abgesehen von der Formatierung funktioniert alles so, wie ich es erwartet hätte - vielleicht liegt es daran, dass ich eine deutsche Version von Windows verwende?
Sam
7

Ich denke, das ist, wonach Sie suchen:

https://github.com/victorporof/Sublime-HTMLPrettify

Allen Bargi
quelle
Ich habe die Anweisungen befolgt, aber es hat nicht funktioniert. Das Plugin gibt mir Fehler. "'{' wird nicht als interner oder externer Befehl, bedienbares Programm oder Batchdatei erkannt."
Ravi Ram
Ich glaube, dass für ein bestimmtes Paket die Installation von Node erforderlich ist, was ein zusätzliches Unterfangen darstellt ... dandean.com/nodejs-npm-express-osx ignoriert den NPM und drückt
bgreater
@Allan Funktioniert das unter Windows? Ich habe node.js auf meinem Computer installiert.
Anirudha Gupta
7

Ich habe noch nicht das Privileg zu kommentieren, daher handelt es sich lediglich um zusätzliche Informationen zu @ peters Antwort über der Antwort.

Ich habe festgestellt, dass HTML nicht wie erwartet ausgerichtet wurde, wenn bedingte IE- Kommentare in der Kopfzeile nicht vollständig inline waren, z. B. linksbündig:

<!--[if lt IE 7]>
<p class='chromeframe'>Your browser is <em>unsupported</em>. <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p>
<![endif]-->
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 
Newtriks
quelle
7

Es gibt ein nettes Open-Source- CodeFormatter-Plugin , das (zusammen mit der erneuten Eingabe) schmutzigen Code verschönern kann, selbst wenn alles in einer Zeile steht.

side2k
quelle
Hinweis: Dies erfordert eine lokale PHP-Installation.
Gefälschter Name
Ich habe festgestellt, dass dies das einzige gute Plugin ist. Und ich habe fast alle ausprobiert.
shaneparsons
Sieht so aus, als hätte dieser Einstellungen zum Formatieren von HTML-Attributen. Ich sehe keine der anderen Plugins, die das tun? Oder vermisse ich einen?
Basil
4

Ich benutze ordentlich zusammen mit einem benutzerdefinierten Build-System, um HTML zu verschönern.

Ich habe HTMLTidy.sublime-build in meinem Paket / Benutzer / Verzeichnis:

{
  "cmd": ["tidy", "-config", "$packages/User/tidy_config.cfg", "$file"]
}

und tidy_config.cfg Datei im selben Verzeichnis:

indent: auto
tab-size: 4
show-warnings: no
write-back: yes
quiet: yes
indent-cdata: yes
tidy-mark: no
wrap: 0

Wählen Sie einfach Build System und drücken Sie ctrl+ boder cmd+b um den Dateiinhalt neu zu formatieren. Ein kleines Problem dabei ist, dass ST2 die Datei nicht automatisch neu lädt. Um die Ergebnisse zu sehen, müssen Sie zu einer anderen Datei und zurück (oder zu einer anderen Anwendung und zurück) wechseln.

Auf einem Mac habe ich macports verwendet, um tidy zu installieren. Unter Windows müssten Sie es selbst herunterladen und das Arbeitsverzeichnis im Build-System angeben, in dem sich tidy befindet:

"working_dir": "c:\\HTMLTidy\\"

oder füge es dem PFAD hinzu.

rchl
quelle
4

Sie können die Tastenkombination F12einfach einstellen !!!

{ "keys": ["f12"], "command": "reindent" , "args": { "single_line": false } }

siehe Detail hier .

Sumeta Pongpanna
quelle
6
Wertlose Antwort; Dies ist ein Duplikat der akzeptierten Antwort.
Mark Amery