Existe-t-il une fonctionnalité ou un plug-in d'indentation HTML pour Sublime Text (aka prettify / beautify / format)?

Par exemple, quelque chose à changer:

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

à:

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

... qui fonctionne sur des pages complètes et des extraits.

Le Edit > Line > Reindentparamètre intégré ne fait pas cela
Le plugin HTMLTidy ajoute headet bodybalise, donc cela ne fonctionne pas pour les partiels, il a également divers autres problèmes
Le plugin Tag a divers problèmes , suffisamment pour qu'il ne fonctionne pas
Le plugin HTMLPrettify a divers problèmes , nécessite node.js et n'a pas été mis à jour depuis des mois
gist.github.com/mcdonc/3898894 prétend le faire, mais nécessite Emacs

(Notepad ++ avait une mise en retrait automatique, Dreamweaver avait Appliquer la mise en forme source, Aptana a Format, etc.)

Le plugin Tag ne gère pas correctement les balises en ligne , par exemple en les utilisant sur cet extrait:

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

résulte en:

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

html sublime-text-2 autoindent

— user110241
source

Quelle est la question? Il ne ressort pas clairement de votre message quelle est la question.

— Brad Patton

Le titre modifié doit être interrogatif. J'essaie de trouver un moyen d'indentation automatique du HTML dans Sublime Text.

— user110241

Voir également Formatage du code HTML à l'aide de Sublime Text 2 .

— Karan

Merci, j'ai essayé chaque solution dans ce fil, aucune ne fonctionne. J'ai énuméré les raisons pour lesquelles beaucoup d'entre eux ne fonctionnent pas dans ce fil.

— user110241

Je pense que c'est la meilleure solution de travail: jsbeautifier.org J'ai eu la même exigence de formater plusieurs balises en ligne. Celui-ci fonctionne vraiment bien. Il crée également un balisage approprié pour le texte sublime, ce qui peut fermer des morceaux. Il est également disponible sur CLI sous npmjs.com/package/js-beautify

— Sai krishna Deep

Réponses:

Le reindentne fonctionne pas toujours pour les extraits. Vous pouvez utiliser le Tagplugin (installer à partir du contrôle de package). Ensuite, appuyez simplement sur ctrl+ shift+ pet tapez tag. Vous verrez l'option Auto-Format tags on document. Sélectionnez et appuyez sur Enter. Ça va le faire.

— Bibhas
source

Comme je l'ai mentionné dans l'article d'origine, le plugin Tag est cassé, plus particulièrement dans sa gestion des balises en ligne, entre autres très mauvais bugs. L'auteur a dit qu'il devait "réécrire le tout". Le réindentage ne fonctionne pas du tout pour HTML, il ne corrige pas l'indentation; il aligne simplement les balises à un certain niveau de retrait.

— user110241

eh bien, Tag a travaillé pour moi. J'ai utilisé votre extrait HTML. Cela a fonctionné parfaitement. Et reindent fonctionne pour HTML mais sous certaines conditions.

— Bibhas

essayez d'utiliser le format automatique de Tag sur cet extrait: <p>foo<a>bar<span>baz<span>qux</span></span></a></p>pour voir ce que je veux dire. Il gâche également la mise en forme de la balise HTML d'ouverture enveloppée dans des commentaires conditionnels IE qui fait partie de HTML5 Boilerplate (et des commentaires en général). Essayez d'utiliser le module intégréLine > Reindent sur cet extrait: jsfiddle.net/y8xXj pour voir comment il échoue.

— user110241

FYI - Je viens d'essayer dans Sublime Text 3 avec un extrait HTML et ça fonctionne!

— Steven

Même problème. J'ai utilisé d'innombrables éditeurs dans le passé, Coda, Sublime, Espresso, Chocolat, TextMate ... mais aucun n'a jamais été capable de formater correctement le texte correctement comme Appliquer la mise en forme source de Dreamweaver. À qui les gens suggèrent simplement Tidy ou un autre plugin qui ne fonctionne jamais comme Dreamweaver. Je suis content que quelqu'un "Zooted" voit ce problème. Il est regrettable qu'il n'y ait toujours pas de solution. Dans Sublime Text 3 comme Zooted Noté même avec Tag, cela ne fonctionne pas correctement (comme dans son exemple ci-dessus). Et la fonctionnalité native de Reindent est sans valeur.

— cchiera

Sélectionnez Tout -> menu Edition -> Ligne -> Reindend fera l'affaire. Vous pouvez définir une combinaison de raccourcis pour la même utilisation.

{"touches": ["ctrl + shift + r"], "commande": "reindent", "args": {"single_line": false}}

— Jasim Mahmood
source

Comme je l'ai mentionné dans la question, cela ne fonctionne pas . Essayez-le sur le tout premier extrait que j'ai fourni: <section><article><h1></h1><p></p></article> </section>

— user110241

Travaille pour moi. Syntaxe définie sur HTML?

— Manuel Arwed Schmidt

Ça ne marche pas pour moi.

— Derek 朕會功夫

Oui, il fait un très bon travail, mais a finalement commencé à tomber, dans mon cas, à <div>ouvrir les balises.

— ruffin

Pour que la fonctionnalité de réindentation fonctionne, vous devez décocher l'option "Retrait à l'aide d'espaces":

Affichage >> Retrait >> Retrait à l'aide d'espaces

Une fois cette option décochée, vous pouvez sélectionner votre texte et réindenter:

Édition >> Ligne >> Réindentation

Cela fonctionnera pour la syntaxe HTML ainsi que XML. Pas testé sur d'autres.

— Sidz
source

En fait, je travaillais déjà avec ça sans contrôle. La commande que vous avez mentionnée ne fait absolument rien à cet extrait de <html><head></head><body><div><p>foobar<span>baz</span></p></div></body></html>

— code