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?
html
sublimetext2
sublimetext
indentation
reformat
Ravi Ram
quelle
quelle
Antworten:
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
.html
oder enthält.php
.Wenn Sie dies häufig tun, ist diese Schlüsselzuordnung möglicherweise hilfreich:
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 choice
auswählen, bevor Sie die Option zum erneuten Einrücken auswählen .quelle
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:
Nachteile:
<script>
Blöcke nicht richtigEtikett
Vorteile:
Nachteile:
<script>
Blöcke nicht richtigHTMLTidy
Vorteile:
Nachteile:
HTMLBeautify
Vorteile:
Nachteile:
HTML-CSS-JS verschönern
Vorteile:
Nachteile:
Welches das Beste ist?
HTML-CSS-JS Prettify ist der Gewinner in meinem Buch. Viele tolle Features, nicht viel zu beanstanden.
quelle
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 tippetag
und drücke enter.Markieren Sie nach der Installation von Tag den Text und drücken Sie die Tastenkombination Ctrl+ Alt+ F.
quelle
Indent XML
oderIndentX
unter anderem.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!
quelle
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:
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 :)
quelle
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 2
wenn 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 tippejs format
und 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
)Ich verwende ctrl+ alt+ 2, Sie können diese Tastenkombination beliebig ändern. Bisher
JsFormat
ist ein gutes Plugin einen Versuch wert!Hoffe das wird jemandem helfen.
quelle
Es gibt ein Plugin namens SublimeHtmlTidy, das ziemlich gut funktioniert
https://github.com/welovewordpress/SublimeHtmlTidy
quelle
Für mich war die
HTML Prettify
Lösung extrem einfach. Ich ging zur HTML Prettify-Seite .Sublime Package Manager
prettify
HTML prettify
Auswahl im MenüBoom. Erledigt. Sieht großartig aus
quelle
Einfach gehen zu
Bearbeiten -> Tag -> Tags im Dokument automatisch formatieren
quelle
Sublime Text 2 Version 2.0.1, Build 2217
auf dem Mac nicht. Sind Sie sicher, dass dies eine Standardfunktion ist?<b>somthing</b>
ein Komma folgt, wird das Komma in eine neue Zeile gesetzt, was in einer Browseransicht zu einem Leerzeichen zwischen etwas und dem Komma führt.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
quelle
Ich denke, das ist, wonach Sie suchen:
https://github.com/victorporof/Sublime-HTMLPrettify
quelle
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:
quelle
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.
quelle
Ich benutze ordentlich zusammen mit einem benutzerdefinierten Build-System, um HTML zu verschönern.
Ich habe HTMLTidy.sublime-build in meinem Paket / Benutzer / Verzeichnis:
und tidy_config.cfg Datei im selben Verzeichnis:
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:
oder füge es dem PFAD hinzu.
quelle
Sie können die Tastenkombination F12einfach einstellen !!!
siehe Detail hier .
quelle