Wie kann ich den HTML -Code mit Sublime Text 2 neu formatieren?

StackOverflow https://stackoverflow.com/questions/8839753

Frage

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

War es hilfreich?

Lösung

Sie brauchen dafür keine Plugins. Wählen Sie einfach alle Zeilen aus (Strg EIN) und dann im Menü wählen Sie → Zeile → Reindent. Dies funktioniert, wenn Ihre Datei mit einer Erweiterung gespeichert wird, die HTML -Like enthält .html oder .php.

Wenn Sie dies oft tun, finden Sie möglicherweise diese wichtige Zuordnung nützlich:

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

Wenn Ihre Datei nicht gespeichert ist (z. B. Sie haben gerade in einem Snippet in ein neues Fenster eingefügt), können Sie die Sprache manuell für die Eindrücke einstellen, indem Sie die Menüansicht → Syntax → auswählen → language of choice Vor der Auswahl der Reindent -Option.

Andere Tipps

Es gibt ungefähr ein halbes Dutzend Möglichkeiten, HTML in Sublime zu formatieren. Ich habe jedes der beliebtesten Plugins getestet (siehe das Ich habe in meinem Blog geschrieben, die ich gemacht habe Für alle Details), aber hier finden Sie einen kurzen Überblick über einige der beliebtesten Optionen:

Reindent -Befehl

Profis:

  • Schiffe mit erhabenem, also kein Plugin -Installation benötigt

Nachteile:

  • Löscht keine extra leeren Zeilen
  • Kann nicht abgestimmte HTML, Zeilen mit mehreren offenen Tags verarbeiten
  • Formatiert nicht richtig <script> Blöcke

Schild

Profis:

  • Unterstützt ST2/ST3
  • Entfernt extra leere Zeilen
  • Keine binären Abhängigkeiten

Nachteile:

  • Drosseln auf PHP -Tags
  • Handle nicht <script> Blöcke richtig

Htmltidy

Profis:

  • Griff PHP -Tags
  • Einige Einstellungen zur Optimierung der Formatierung

Nachteile:

  • Benötigt PHP (fällt zurück zum Webdienst)
  • Nur ST2
  • Verlassen?

Htmlbeautify

Profis:

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

Nachteile:

  • Erstickt ein bisschen mit Inline -Kommentaren
  • Erweitert minimierten/komprimierten Code

HTML-CSS-JS Prettify

Profis:

  • Unterstützt ST2/ST3
  • Griff HTML, CSS, JS
  • Tolle Integration in Sublimes Menüs
  • Hoch anpassbar
  • Einstellungen pro projekt
  • Format bei Speichernoption

Nachteile:

  • Benötigt Node.js
  • Nicht großartig für eingebettete PHP

Welches das Beste ist?

HTML-CSS-JS Prettify ist der Gewinner in meinem Buch. Viele großartige Funktionen, nicht viel zu beschweren.

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

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

Nach der Installation der Paketsteuerung. Gehen Sie zur Packungssteuerung (Vorlieben -> Paketsteuerung) Geben Sie dann ein install, Schlag Eintreten. Geben Sie dann ein tag und schlagen Eintreten.

Heben Sie nach dem Installieren des Tags den Text hervor und drücken Sie die Verknüpfung Strg+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 Strg+Verschiebung+h.

Fertig!

Nur ein allgemeiner Tipp. Was ich getan habe, um mein HTML automatisch zu machen, war die Installation des Pakets HTML_TIDY und dann den folgenden Schlüsselbindungen zu den Standardeinstellungen (die ich verwende):

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

Dies führt bei jeder Eingabetaste mit HTML ordentlich. Es mag Nachteile dazu geben, ich bin ziemlich neu, um selbst zu erhaben, aber es scheint zu tun, was ich will :)

Die Frage ist für HTML, ich möchte auch außerdem Informationen darüber geben, wie es geht Formatieren Sie Ihren JavaScript-Code für Sublime Text 2 automatisch.;

Sie können Ihren gesamten Code auswählen (Strg + EIN) und verwenden Sie die In-App-Funktionalität, Reinindent (Edit -> Line -> Reindent) oder Sie können JSFormat -Formatierungs -Plugin für verwenden Sublime Text 2 Wenn Sie anpassbarere Einstellungen zum Formatieren Ihres Codes für die Registerkarte "Standard -Text"/den Einstellungen des Sublime Text erhalten möchten.

https://github.com/jdc0589/jsformat

Sie können einfach installieren JSFORMAT mit der Verwendung von Paketsteuerung (Preferences -> Package Control) Dann öffnen Sie die Paketsteuerung Geben Sie installieren, drücken Eintreten. Geben Sie dann ein js format und schlagen Eintreten, Sie sind fertig. (Der Paketcontroller zeigt den Status der Installation mit Erfolg und Fehlern auf der unteren linken Stange von an Sublime)

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

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

Ich benutze Strg + Alt + 2, Sie können diesen Abkürzungschlüssel ändern, was auch immer Sie wollen. Bis jetzt, JsFormat ist ein gutes Plugin, es wert, es zu versuchen!

Hoffe das wird jemandem helfen.

Es gibt ein Plugin namens SublimeHtmltidy, das ziemlich gut funktioniert

https://github.com/welovewordpress/sublimehtmltidy

Für mich die HTML Prettify Die Lösung war extrem einfach. Ich ging zum HTML Prettify -Seite.

  1. Brauchte die Sublime Package Manager
  2. Folgte den Anweisungen zur Installation des Paketmanagers hier
  3. tippt CMD + Shift + P. Um das Menü aufzurufen
  4. Tippt prettify
  5. Wählte die HTML prettify Auswahl im Menü

Boom. Fertig. Sieht großartig aus

Gehen Sie einfach zu

Bearbeiten -> Tag -> automatische Format -Tags auf dem Dokument

Ich habe ein Paket namens erstellt Htmlbeautify Das macht eine anständige Aufgabe, HTML neu zu formatieren. Ich habe es von einem Perl -Skript gestützt, das ich 1997 gefunden habe. :)

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

https://github.com/rareyman/htmlbeautify

Ich habe noch das Privileg, Kommentare abzugeben. Dies sind einfach zusätzliche Informationen zu @Peter Antworten Oben Antwort.

Ich fand, dass HTML nicht wie erwartet ausgerichtet ist, wenn dh Bedingte Kommentare Im Kopf waren nicht vollständig in der Linie, z. B. links bü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 eine schöne Open Source CodeFormatter -Plugin, was (entlang der Reinindenting) schmutzigen Code verschönern kann, auch wenn alles in einer Zeile ist.

Ich denke, das ist es, wonach Sie suchen:

https://github.com/victorp/sublime-htmlprettify

Ich benutze ordentlich zusammen mit benutzerdefiniertem Build -System, um HTML zu haben.

Ich habe htmltidy.sublime-build in meinen paketen/ user/ 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

Und wählen Sie einfach das Build -System aus und drücken Sie Strg+b oder CMD+b Dateiinhalte neu format. Ein kleines Problem dabei ist, dass ST2 die Datei nicht automatisch neu laden, um die Ergebnisse anzuzeigen, die Sie für eine andere Datei, zurück (oder an andere Anwendungen und zurück) wechseln müssen.

Auf dem 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ügen Sie es dem Pfad hinzu.

Sie können Abkürzungsschlüssel festlegen F12 einfach!!!

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

siehe Detail hier.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top