Gibt es eine HTML-Auto-Indentation-Funktion oder ein Plugin für Sublime Text (auch bekannt als prettify / beautify / format)?

23

Zum Beispiel etwas zu ändern:

<section><article><h1></h1><p></p></article></section>

zu:

<section>
  <article>
    <h1></h1>
    <p></p>
  </article>
</section>

... das funktioniert auf ganzen Seiten und Ausschnitten.

  • Die eingebaute Edit > Line > ReindentEinstellung tut dies nicht
  • Das Plugin HTMLTidy fügt headund taggt hinzu body, so dass es nicht für Partials funktioniert, sondern auch verschiedene andere Probleme aufweist
  • Das Plugin-Tag weist verschiedene Probleme auf , so dass es im Wesentlichen nicht funktioniert
  • Das Plugin HTMLPrettify weist verschiedene Probleme auf , erfordert node.js und wurde seit Monaten nicht mehr aktualisiert
  • gist.github.com/mcdonc/3898894 gibt an, dies zu tun, erfordert jedoch Emacs

(Notepad ++ hatte automatische Einrückung, Dreamweaver hatte Quellformatierung anwenden, Aptana hat Format usw.)

Das Tag-Plugin behandelt Inline-Tags falsch , z. B. mit diesem Snippet:

<p>foo<a>bar<span>baz<span>qux</span></span></a></p>

Ergebnisse in:

<p>
    foo
    <a>
        bar
        <span>
            baz
            <span>qux</span>
        </span>
    </a>
</p>
html sublime-text-2 autoindent user110241
quelle
Was ist die Frage? Aus Ihrem Beitrag geht nicht klar hervor, um welche Frage es sich handelt.
Brad Patton
Der bearbeitete Titel ist fragend. Ich versuche, eine Möglichkeit zu finden, HTML in Sublime Text automatisch einzurücken.
user110241
Siehe auch Formatieren von HTML-Code mit Sublime Text 2 .
Karan
Danke, ich habe jede Lösung in diesem Thread ausprobiert, keine von ihnen funktioniert. Ich habe die Gründe aufgeführt, warum viele von ihnen in diesem Thread nicht funktionieren.
user110241
Ich denke, dies ist die beste funktionierende Lösung: jsbeautifier.org Ich hatte die gleiche Anforderung, mehrere Inline-Tags zu formatieren. Dieser funktioniert wirklich gut. Es erzeugt auch für erhabenen Text ein geeignetes Markup, das Brocken schließen kann. Es ist auch auf CLI verfügbar als npmjs.com/package/js-beautify
Sai krishna Deep

Antworten:

18

Das reindentfunktioniert nicht immer für Snippets. Sie können das TagPlugin verwenden (von der Paketsteuerung installieren). Drücken Sie dann einfach ctrl+ shift+ pund geben Sie ein tag. Sie werden die Option sehen Auto-Format tags on document. Auswählen und drücken Enter. Das wird es schaffen.

Bibhas
quelle
1
Wie ich bereits im Originalbeitrag erwähnt habe, ist das Tag-Plugin defekt, insbesondere was den Umgang mit Inline-Tags und anderen sehr schlechten Fehlern betrifft. Der Autor hat gesagt, er müsse "das Ganze neu schreiben". Der Reindent funktioniert bei HTML überhaupt nicht, er korrigiert den Einzug nicht. Tags werden nur auf eine bestimmte Einrückungsstufe ausgerichtet.
user110241
Nun, Tag hat für mich gearbeitet. Ich habe Ihr HTML-Snippet verwendet. Es hat einwandfrei funktioniert. Und reindent funktioniert für HTML unter bestimmten Bedingungen.
Bibhas
Versuchen Sie, das Autoformat von Tag für dieses Snippet zu verwenden: um <p>foo<a>bar<span>baz<span>qux</span></span></a></p>zu sehen, was ich meine. Außerdem wird die Formatierung des in IE-bedingten Kommentaren, die Teil von HTML5 Boilerplate (und Kommentaren im Allgemeinen) sind, eingebundenen HTML-Tags durcheinander gebracht. Versuchen Sie, das in Line > Reindentdiesem Snippet integrierte Tool zu verwenden : jsfiddle.net/y8xXj , um festzustellen , wie es fehlschlägt.
user110241
Zu Ihrer Information - Habe es gerade in Sublime Text 3 mit einem HTML-Snippet versucht und es funktioniert tatsächlich!
Steven
2
Gleicher Fehler. Ich habe in der Vergangenheit unzählige Editoren verwendet, Coda, Sublime, Espresso, Chocolat, TextMate ... aber noch nie war es möglich, Text so fehlerfrei zu formatieren wie Dreamweavers Quellformatierung anwenden. Wem die Leute einfach Tidy oder ein anderes Plugin vorschlagen, das niemals wie Dreamweaver funktioniert. Ich bin froh, dass jemand "Zooted" dieses Problem sieht. Es ist bedauerlich, dass es noch keine Lösung gibt. In Sublime Text 3 als Zooted Noted funktioniert es auch mit Tag nicht richtig (wie in seinem obigen Beispiel). Und die native Reindent-Funktion ist ziemlich wertlos.
Cchiera
6

Wählen Sie Alle -> Menü Bearbeiten -> Leitung -> Erneut prüfen . Sie können eine Tastenkombination für dieselbe Verwendung festlegen .

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

Jasim Mahmood
quelle
1
Wie ich in der Frage erwähnt habe, funktioniert dies nicht . Probieren Sie es mit dem allerersten Snippet aus, das ich bereitgestellt habe: <section> <article> <h1> </ h1> <p> </ p> </ article> </ section>
user110241
Funktioniert bei mir. Syntax auf HTML gesetzt?
Manuel Arwed Schmidt
2
Funktioniert bei mir nicht.
Derek 朕 朕 功夫
Ja, es macht einen ziemlich guten Job, aber irgendwann hat es angefangen zu fallen, in meinem Fall, <div>Tags zu öffnen.
Ruffin
0

Damit die Reindent-Funktion funktioniert, müssen Sie die Option für "Mit Leerzeichen einrücken" deaktivieren:

Ansicht >> Einzug >> Einzug mit Leerzeichen

Wenn diese Option deaktiviert ist, können Sie Ihren Text auswählen und erneut einrücken:

Bearbeiten >> Linie >> Neu einrücken

Dies funktioniert sowohl für HTML-Syntax als auch für XML. Nicht an anderen getestet.

Sidz
quelle
Damit habe ich eigentlich schon unkontrolliert gearbeitet. Der von Ihnen erwähnte Befehl ändert absolut nichts an diesem Snippet in ST3:<html><head></head><body><div><p>foobar<span>baz</span></p></div></body></html>
user110241