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

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?

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 .

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.

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.

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!

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 :)

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.

Es gibt ein Plugin namens SublimeHtmlTidy, das ziemlich gut funktioniert

https://github.com/welovewordpress/SublimeHtmlTidy

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

Einfach gehen zu

Bearbeiten -> Tag -> Tags im Dokument automatisch formatieren

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

Ich denke, das ist, wonach Sie suchen:

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

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]--> 

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.

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.

Sie können die Tastenkombination F12einfach einstellen !!!

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

siehe Detail hier .