Wie kann ich den HTML -Code mit Sublime Text 2 neu formatieren?
-
27-10-2019 - |
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?
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
Für mich die HTML Prettify
Die Lösung war extrem einfach. Ich ging zum HTML Prettify -Seite.
- Brauchte die
Sublime Package Manager
- Folgte den Anweisungen zur Installation des Paketmanagers hier
- tippt CMD + Shift + P. Um das Menü aufzurufen
- Tippt
prettify
- 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!
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:
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.