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

23

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
la 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:

18

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
la source
1
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
2
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
6

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
la source
1
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
2
Ç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
0

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
la 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