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


Ich habe 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 einfacher zu lesen ist?


1178
2018-01-12 17:49


Ursprung


Antworten:


Sie benötigen dazu keine Plugins. Wählen Sie einfach alle Zeilen (Strg EIN) und dann aus dem Menü Bearbeiten → Zeile → Reind. Dies funktioniert, wenn Ihre Datei mit einer Erweiterung wie HTML gespeichert wird .html oder .php.

Wenn Sie dies häufig tun, können Sie diese Schlüsselzuordnung nützlich finden:

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

Wenn Ihre Datei nicht gespeichert wird (z. B. wenn Sie einen Ausschnitt in ein neues Fenster eingefügt haben), können Sie die Sprache für den Einzug manuell festlegen, indem Sie das Menü Ansicht → Syntax → auswählen language of choice bevor Sie die Reindent-Option auswählen.


1927
2018-06-04 21:47



Es gibt ein halbes Dutzend Möglichkeiten, HTML in Sublime zu formatieren. Ich habe jedes der beliebtesten Plugins getestet (siehe write-up habe ich auf meinem Blog gemacht für alle Details), aber hier ist ein kurzer Überblick über einige der beliebtesten Optionen:

Befehl erneut eingeben

Vorteile:

  • Wird mit Sublime ausgeliefert, sodass keine Plugin-Installation erforderlich ist

Nachteile:

  • Löscht keine zusätzlichen Leerzeilen
  • Kann nicht mit minimiertem HTML, Zeilen mit mehreren offenen Tags umgehen
  • Formatiert nicht richtig <script> Blöcke

Etikett

Vorteile:

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

Nachteile:

  • Drosseln auf PHP-Tags
  • Behandelt nicht <script> blockiert richtig

HTMLTidy

Vorteile:

  • Verarbeitet PHP-Tags
  • Einige Einstellungen, um die Formatierung zu optimieren

Nachteile:

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

HTMLBeautify

Vorteile:

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

Nachteile:

  • Chokes ein wenig mit Inline-Kommentaren
  • Erweitert den minimierten / komprimierten Code

HTML-CSS-JS Prettify

Vorteile:

  • Unterstützt ST2 / ST3
  • Griffe HTML, CSS, JS
  • Große Integration in die Menüs von Sublime
  • In hohem Grade kundengerecht
  • Einstellungen pro Projekt
  • Format bei Speicheroption

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 Funktionen, nicht viel zu meckern.


351
2018-01-18 16:29



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

Sie können es mithilfe des Paketsteuerelements installieren. https://sublime.wbond.net

Nach der Installation der Paketsteuerung. Gehe zur Paketkontrolle (Einstellungen -> Paketsteuerung) dann tippen Sie ein install, schlagen eingeben. Dann tippe ein tag und hit eingeben.

Nach der Installation von Tag, markieren Sie den Text und drücken Sie die Verknüpfung Strg+Alt+F.


172
2018-01-13 23:12



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

Nach der Installation wählen Sie einfach den Code und drücken Sie Strg + Umschalt + H.

Erledigt!


45
2018-01-07 03:22



Nur ein allgemeiner Tipp. Was ich getan habe, um meinen HTML-Code automatisch aufzuräumen, war, das Paket HTML_Tidy zu installieren und dann die folgenden Tastaturkürzel zu den Standardeinstellungen hinzuzufügen (die ich verwende):

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

Dies führt HTML Tidy mit jeder Eingabe. Es kann einige Nachteile haben, ich bin ziemlich neu in Sublime, aber es scheint zu tun, was ich will :)


38
2017-11-01 15:17



Obwohl die Frage für HTML ist, würde ich auch gerne Informationen darüber geben, wie Formatieren Sie Ihren Javascript-Code für Sublime Text 2;

Sie können Ihren gesamten Code auswählen (Strg + EIN) und verwenden Sie die In-App-Funktionalität, reindent (Edit -> Line -> Reindent) oder Sie können JsFormat Formatierungs-Plugin für verwenden Sublime Text 2 Wenn Sie weitere anpassbare Einstellungen wünschen, wie Sie Ihren Code zusätzlich zu den Standard-Tabulator- / Einzugseinstellungen des Sublime Text formatieren können.

https://github.com/jdc0589/JsFormat

Sie können es einfach installieren JsFormat mit Package Control (Preferences -> Package Control) Öffnen Sie die Paketsteuerung dann Tippe install, tippe ein eingeben. Dann tippe ein js format und hit eingeben, Sie sind fertig. (Der Paket-Controller zeigt den Status der Installation mit Erfolg und Fehlern in der unteren linken Leiste von an Sublime)

Fügen Sie Ihrer Tastenbelegung folgende Zeile hinzu (Preferences -> Key Bindings User)

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

Ich benutze Strg + alt + 2, können Sie diese Tastenkombination ändern, was auch immer Sie wollen. Bisher, JsFormat ist ein gutes Plugin, es lohnt sich, es auszuprobieren!

Hoffe, das wird jemandem helfen.


20
2018-06-24 11:34



Es gibt ein Plugin namens SublimeHtmlTidy, das ziemlich gut funktioniert

https://github.com/welovewordpress/SublimeHtmlTidy


11
2017-09-08 11:00



Gehe einfach zu

Bearbeiten -> Tag -> Tags im Dokument automatisch formatieren


9
2017-10-09 00:23