it-swarm-eu.dev

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

1265
Ravi Ram

Sie benötigen dazu keine Plugins. Wählen Sie einfach alle Zeilen aus (CtrlA) und wählen Sie dann im Menü Bearbeiten → Leitung → Erneut einrücken. Dies funktioniert, wenn Ihre Datei mit einer Erweiterung gespeichert ist, die HTML wie .html oder .php enthält.

Wenn Sie dies häufig tun, ist diese Tastenzuordnung möglicherweise hilfreich:

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

Wenn Ihre Datei nicht gespeichert ist (z. B. Sie haben sie gerade 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 choice auswählen, bevor Sie die Option zum erneuten Einfügen auswählen.

2030
peter

Es gibt ungefähr ein halbes Dutzend Möglichkeiten, HTML in Sublime zu formatieren. Ich habe jedes der beliebtesten Plugins getestet (siehe Artikel, den ich in meinem Blog geschrieben habe für vollständige Details), aber hier ist ein kurzer Überblick über einige der beliebtesten Optionen:

Befehl wiederholen

Vorteile:

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

Nachteile:

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

Tag

Vorteile:

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

Nachteile:

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

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 Prettify

Vorteile:

  • Unterstützt ST2/ST3
  • Verarbeitet HTML, CSS, JS
  • Hervorragende Integration in die Menüs von Sublime
  • Sehr anpassbar
  • Projektspezifische Einstellungen
  • Beim Speichern formatieren

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.

365
Josh Earl

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

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

Nach der Installation der Paketsteuerung. Gehen Sie zu Paketsteuerung ( Einstellungen -> Paketsteuerung ) und geben Sie install ein. , schlagen enter. Geben Sie dann tag ein und drücken Sie enter.

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

176
dardub

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.

Getan!

47
Peter Zhu

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

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

dies führt HTML Tidy bei jeder Eingabe aus. Es mag Nachteile geben, ich bin ziemlich neu bei Sublime, aber es scheint zu tun, was ich will :)

40
Anneke

Obwohl es sich um eine HTML-Frage handelt, möchte ich Ihnen zusätzlich mitteilen, wie Sie Ihren Javascript-Code für Sublime Text 2 automatisch formatieren ;

Sie können Ihren gesamten Code auswählen (ctrl + A) und verwenden Sie die In-App-Funktionalität, reindent (Edit -> Line -> Reindent) oder Sie können das JsFormat-Formatierungs-Plugin für Sublime Text 2 verwenden, wenn Sie möchten Weitere anpassbare Einstellungen zum Formatieren des Codes, um die Standardeinstellungen für Registerkarten und Einrückungen von Sublime Text zu ergänzen.

https://github.com/jdc0589/JsFormat

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

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

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

Ich benutze ctrl + alt + 2können Sie diese Tastenkombination beliebig ändern. Bisher ist JsFormat ein gutes Plugin, es lohnt sich, es auszuprobieren!

Hoffe das wird jemandem helfen.

20
Gokhan Tank

Es gibt ein Plugin namens SublimeHtmlTidy, das ziemlich gut funktioniert

https://github.com/welovewordpress/SublimeHtmlTidy

13

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

  1. Brauchte den Sublime Package Manager
  2. Befolgen Sie die Anweisungen zum Installieren des Paketmanagers hier
  3. getippt cmd + shift + p um das Menü aufzurufen
  4. Eingegeben prettify
  5. Wählen Sie im Menü die Option HTML prettify

Boom. Getan. Sieht großartig aus

12
insaineyesay

Geh einfach zu

Bearbeiten -> Tag -> Tags im Dokument automatisch formatieren

10
Ricardo Martins

Ich habe ein Paket namens HTMLBeautify erstellt, das eine anständige Neuformatierung von HTML leistet. Ich habe es auf der Grundlage eines Perl-Skripts erstellt, das ich 1997 gefunden habe. Ich habe es aktualisiert, damit es mit allen neuen modernen Tags funktioniert. :)

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

https://github.com/rareyman/HTMLBeautify

8
Ross

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

6
side2k

Ich habe noch keine Berechtigung zum Kommentieren. Dies sind lediglich zusätzliche Informationen zu @ peters Antwort der obigen Antwort.

Ich fand, dass HTML nicht wie erwartet ausgerichtet wurde, wenn IE bedingte Kommentare in der Kopfzeile nicht vollständig in der Zeile waren, z. bündig nach links:

<!--[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]--> 
6
newtriks
5
Allen Bargi

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

Ich habe HTMLTidy.sublime-build in meinem Verzeichnis Packages/User /:

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

und tidy_config.cfg 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 Build-System und drücken Sie ctrl+b oder 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 anzuzeigen, die Sie zu einer anderen Datei und zurück (oder zu einer anderen Anwendung und zurück) wechseln müssen.

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

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

oder füge es dem PFAD hinzu.

3
rchl

sie können eine Tastenkombination festlegen F12 einfach!!!

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

siehe Detail hier .

3