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

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:

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

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

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

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

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

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

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