Comment reformater le code HTML à l'aide de Sublime Text 2?

1313

J'ai du code HTML mal formaté que je voudrais reformater. Existe-t-il une commande qui reformatera automatiquement le code HTML dans Sublime Text 2 afin qu'il soit plus beau et plus facile à lire?

Ravi Ram
la source
4
Voir aussi stackoverflow.com/questions/9495007/…
Kristopher Johnson
1
De plus, si vous utilisez le mode Vintage, vous pouvez simplement utiliser gg = G en mode normal.
Wiktor Mociun
3
Vous pouvez perdre votre temps à lire toute cette page, ou vous pouvez simplement obtenir github.com/akalongman/sublimetext-codeformatter et vous remettre au travail.
shaneparsons

Réponses:

2080

Vous n'avez pas besoin de plugins pour cela. Sélectionnez simplement toutes les lignes ( Ctrl A) puis dans le menu, sélectionnez Édition → Ligne → Réindentation. Cela fonctionnera si votre fichier est enregistré avec une extension contenant du HTML comme .htmlou .php.

Si vous le faites souvent, vous pouvez trouver ce mappage de clés utile:

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

Si votre fichier n'est pas enregistré (par exemple, vous venez de coller dans un extrait dans une nouvelle fenêtre), vous pouvez définir manuellement la langue de retrait en sélectionnant le menu Affichage → Syntaxe → language of choiceavant de sélectionner l'option de réindentation.

peter
la source
19
Soit dit en passant, cela fonctionne aussi pour le code source non HTML, comme par exemple Ruby ou JS
peter
78
Cela fonctionne très bien si le code n'a pas plusieurs balises s'ouvrant sur une ligne qui ne se ferment pas également sur une ligne ou vice versa.
Charlie Gorichanaz
31
Parfait! Sur mac, vous avez besoin de super pour la clé cmd, donc: {"keys": ["super + shift + r"], "command": "reindent", "args": {"single_line": false}}
Geert Weening
168
la réindentation de ligne ne fonctionne absolument PAS pour le reformatage de code HTML arbitraire. comme lorsqu'il y a plusieurs balises html sans saut de ligne. La réponse HtmlTidy de @anneke est supérieure. Autant que je sache, indépendamment des sauts de ligne, il reformate complètement et correctement le code source en source bien indentée.
jpw
33
Pour les débutants, cliquez sur "Préférences", puis choisissez "Key Binding - User", et collez le code de Peter entre les crochets et enregistrez le fichier.
sigmapi13
375

Il existe une demi-douzaine de façons de formater le HTML dans Sublime. J'ai testé chacun des plugins les plus populaires (voir l' écriture que j'ai faite sur mon blog pour plus de détails), mais voici un aperçu rapide de certaines des options les plus populaires:

Commande de réindentation

Avantages:

  • Livré avec Sublime, donc aucune installation de plugin nécessaire

Les inconvénients:

  • Ne supprime pas les lignes vierges supplémentaires
  • Ne peut pas gérer le HTML réduit, les lignes avec plusieurs balises ouvertes
  • Ne formate pas correctement les <script>blocs

Étiquette

Avantages:

  • Prend en charge ST2 / ST3
  • Supprime les lignes vierges supplémentaires
  • Pas de dépendances binaires

Les inconvénients:

  • Chokes sur les balises PHP
  • Ne gère pas <script>correctement les blocs

HTMLTidy

Avantages:

  • Gère les balises PHP
  • Certains paramètres pour modifier la mise en forme

Les inconvénients:

  • Nécessite PHP (revient au service Web)
  • ST2 uniquement
  • Abandonné?

HTMLBeautify

Avantages:

  • Prend en charge ST2 / ST3
  • Dépendances simples et sans binaray
  • Prise en charge d'OS X, Win et Linux

Les inconvénients:

  • S'étouffe un peu avec des commentaires en ligne
  • Développe le code réduit / compressé

HTML-CSS-JS Prettify

Avantages:

  • Prend en charge ST2 / ST3
  • Gère HTML, CSS, JS
  • Grande intégration avec les menus de Sublime
  • Hautement personnalisable
  • Paramètres par projet
  • Format sur l'option de sauvegarde

Les inconvénients:

  • Nécessite Node.js
  • Pas génial pour PHP embarqué

Quel est le meilleur?

HTML-CSS-JS Prettify est le gagnant de mon livre. Beaucoup de fonctionnalités intéressantes, pas grand chose à redire.

Josh Earl
la source
12
2e sur Prettify. La ré-indentation n'a pas fonctionné sur le html que j'avais, n'a pas pu trouver Tag et HtmlTidy n'a rien fait quand je l'ai appelé.
jcollum
2
viens de l'essayer et HTML-CSS-JS Prettify a fonctionné idéalement dans mon cas d'utilisation (nettoie le html bien mieux que le package de réindentation intégré ou d'autres packages de reformatage)
Mark Essel
2
J'ai essayé tous les autres, mais le seul qui a fonctionné (pour un extrait de HTML) était HTML-CSS-JS Prettify. Je vous remercie!
zumek
1
Je voulais également mentionner que vous pouvez supprimer toute l'indentation (une fois le balisage modifié, par exemple) simplement en utilisant la fonctionnalité intégrée de ST - sélectionnez le bloc et appuyez sur ctrl + j.
zumek
1
Est-ce que cela fonctionne avec des extensions non html? j'ai essayé sur php et d'autres modèles, cela n'a pas fonctionné.
Bsienn
179

Le seul paquet que j'ai pu trouver est Tag .

Vous pouvez l'installer à l'aide du contrôle de package. https://sublime.wbond.net

Après avoir installé le contrôle des packages. Accédez au contrôle de package ( Préférences -> Contrôle de package ) puis tapez install, appuyez sur enter. Tapez ensuite taget appuyez sur enter.

Après avoir installé Tag, mettez en surbrillance le texte et appuyez sur le raccourci Ctrl+ Alt+ F.

dardub
la source
21
un meilleur plugin est Tidy HTML
MatthewFord
1
merci ... savais maintenant sur les paquets: D. vu aussi des trucs sympas pour du texte sublime ici. arlando.net/blog/…
mars-o
3
Honnêtement, c'est la seule chose qui fonctionnait parfaitement avec du code HTML contenant des centaines de sauts de ligne aléatoires, des balises incorrectement imbriquées. Il a essentiellement nettoyé l'une des pages HTML les plus salissantes que j'ai jamais vues!
justinhartman
1
Je suis en désaccord avec @ mars-o; ce plugin est génial. Tidy fait très bien quelques choses et est très bien établi, mais ce plugin fait pas mal d'autres choses intéressantes. Merci pour le post.
zedd45
@JonnyLeeds En quelque sorte, mais pas toujours correctement. Pour XML en particulier, essayez Indent XMLou IndentXentre autres.
Joel Mellon
49

Je recommande ce plugin: HTML / CSS / JS Prettify , ça marche vraiment.

Après l'installation, sélectionnez simplement le code et appuyez sur Ctrl+Shift+H.

Terminé!

Peter Zhu
la source
3
Vous avez besoin de Node.js pour utiliser ce plugin. Pas très confortable pour les utilisateurs normaux.
nikoskip
4
En comparant avec l'utilité de ce plugin, nous pouvons ignorer le problème d'installation de Node.js;)
Peter Zhu
Les instructions pour installer packagecontrol.io/packages/HTML-CSS-JS%20Prettify ont très bien fonctionné. Merci.
Sacky San
41

Juste un conseil général. Ce que j'ai fait pour ranger automatiquement mon code HTML, j'ai installé le package HTML_Tidy, puis ajouté le raccourci clavier suivant aux paramètres par défaut (que j'utilise):

{ "keys": ["enter"], "command": "html_tidy" },

cela exécute HTML Tidy à chaque entrée. Il peut y avoir des inconvénients à cela, je suis moi-même assez nouveau pour Sublime, mais il semble faire ce que je veux :)

Anneke
la source
2
J'imagine que ce plugin pourrait devenir un peu intensif sur les gros fichiers, ce qui pourrait devenir lent s'il s'exécute à chaque fois que vous appuyez sur Entrée?
Rikki
2
J'ai utilisé le raccourci clavier ENTER pendant environ une journée, puis je l'ai supprimé. il était trop lent et continuait de déplacer le curseur vers le haut de l'écran en v2.
Ravi Ram
22

Bien que la question concerne le HTML, je voudrais également donner des informations sur la façon de formater automatiquement votre code Javascript pour Sublime Text 2 ;

Vous pouvez sélectionner tout votre code ( ctrl+ A) et utiliser la fonctionnalité in-app, réindenter ( Edit-> Line-> Reindent) ou vous pouvez utiliser le plug-in de formatage JsFormat Sublime Text 2si vous souhaitez avoir des paramètres plus personnalisables sur la façon de formater votre code pour l'ajouter à les paramètres par défaut de l'onglet / retrait du texte sublime.

https://github.com/jdc0589/JsFormat

Vous pouvez facilement installer JsFormat en utilisant le contrôle de package ( Preferences-> Package Control) Ouvrez le contrôle de package puis tapez install, hitenter . Tapez js formatet appuyez enter, vous avez terminé. (Le contrôleur de package affichera l'état de l'installation avec succès et erreurs dans la barre inférieure gauche de Sublime)

Ajoutez la ligne suivante à vos raccourcis clavier ( Preferences-> Key Bindings User)

{ "keys": ["ctrl+alt+2"], "command": "js_format"}

J'utilise ctrl+ alt+ 2, vous pouvez modifier cette touche de raccourci comme vous le souhaitez. Jusqu'à présent, JsFormatc'est un bon plugin, vaut la peine de l'essayer!

J'espère que cela aidera quelqu'un.

Réservoir Gokhan
la source
13

Pour moi, la HTML Prettifysolution était extrêmement simple. Je suis allé à la page HTML Prettify .

  1. Besoin de Sublime Package Manager
  2. J'ai suivi les instructions pour installer le gestionnaire de paquets ici
  3. tapé cmd + shift + ppour faire apparaître le menu
  4. Tapé prettify
  5. Choisissez la HTML prettifysélection dans le menu

Boom. Terminé. A fière allure

insaineyesay
la source
Cette solution a fonctionné exactement comme je le voulais et prend tout sauf 2 secondes si le PM est déjà installé. Pourrait ajouter que vous devez installer le package prettify.
doogle
Remarque: pour toute personne intéressée, le plug-in de cette réponse nécessite l'installation de node.js.
Fake Name
Ne fonctionne pas correctement; seulement indenté / saut de ligne le HTML jusqu'à un certain niveau d'indentation et a laissé le reste non indenté et sur la même ligne.
Jonathan
11

Allez simplement à

Modifier -> Balise -> Formater automatiquement les balises sur le document

Ricardo Martins
la source
6
Je ne vois pas cette option de menu Sublime Text 2 Version 2.0.1, Build 2217sur Mac. Êtes-vous sûr que c'est une fonctionnalité standard?
ostergaard
1
Vous devez installer Tag à partir du gestionnaire de packages. Mais j'ai un problème avec ça. Lorsque <b>somthing</b>est suivi d'une virgule, la virgule est placée sur une nouvelle ligne, ce qui crée un espace entre quelque chose et la virgule dans une vue de navigateur.
reitermarkus
9

J'ai créé un package appelé HTMLBeautify qui fait un bon travail de reformatage HTML. Je l'ai basé sur un script Perl que j'ai trouvé en 1997 - je l'ai mis à jour pour fonctionner avec toutes les nouvelles balises modernes fangled. :)

Vérifiez-le et faites-moi savoir ce que vous en pensez!

https://github.com/rareyman/HTMLBeautify

Ross
la source
3
Je l'ai installé mais lorsque j'exécute HTMLBeautify sur le fichier de démonstration, il ne fait rien. Un message Affiche que le fichier est embelli, mais rien ne se passe au contenu du fichier.
Sam
Je suppose que vous utilisez Windows…? Sous Windows, vous devez redémarrer SublimeText 2 pour que le script soit disponible. Essayez cela et faites-moi savoir ce qui se passe. :)
Ross
Je l'ai fait, le script était disponible, il n'a tout simplement rien changé dans le fichier.
Sam
Étrange. Je suppose que tous les autres plugins / packages fonctionnent normalement? Je n'arrive pas à reproduire ce problème dans mes environnements de test, donc je ne sais pas quoi vous dire. :(
Ross
Mis à part le formatage, tout fonctionne comme je m'y attendais - c'est peut-être parce que j'utilise une version allemande de Windows?
Sam
7

Je pense que c'est ce que vous recherchez:

https://github.com/victorporof/Sublime-HTMLPrettify

Allen Bargi
la source
J'ai suivi les instructions mais cela n'a pas fonctionné. Le plugin me donne des erreurs. "'{' n'est pas reconnu comme une commande interne ou externe, un programme exploitable ou un fichier de commandes."
Ravi Ram
Je crois qu'un package spécifique nécessite l'installation de Node, ce qui est une entreprise supplémentaire ... dandean.com/nodejs-npm-express-osx ne tient pas compte du NPM et express
bgreater
@Allan Est-ce que ce travail est sous Windows. J'ai node.js installé sur mon ordinateur.
Anirudha Gupta
7

Je n'ai pas encore le privilège de commenter, il s'agit donc simplement d'informations supplémentaires liées à la réponse de @ peter ci-dessus.

J'ai trouvé que HTML ne s'alignait pas comme prévu si les commentaires conditionnels d' IE dans l'en-tête n'étaient pas complètement en ligne, par exemple à gauche:

<!--[if lt IE 7]>
<p class='chromeframe'>Your browser is <em>unsupported</em>. <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p>
<![endif]-->
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 
newtriks
la source
7

Il existe un joli plugin CodeFormatter open source qui (tout au long de la réindentation) peut embellir le code sale même s'il est en une seule ligne.

side2k
la source
Remarque: Cela nécessite une installation PHP locale.
Fake Name
J'ai trouvé que c'était le seul bon plugin .. et j'ai essayé presque tous.
shaneparsons
On dirait que celui-ci a des paramètres pour formater les attributs HTML. Je ne vois aucun autre plugin faire ça? Ou est-ce que j'en manque un?
Basil
4

J'utilise tidy avec un système de construction personnalisé pour embellir le HTML.

J'ai HTMLTidy.sublime-build dans mon répertoire Packages / User /:

{
  "cmd": ["tidy", "-config", "$packages/User/tidy_config.cfg", "$file"]
}

et le fichier tidy_config.cfg dans le même répertoire:

indent: auto
tab-size: 4
show-warnings: no
write-back: yes
quiet: yes
indent-cdata: yes
tidy-mark: no
wrap: 0

Et sélectionnez simplement le système de construction et appuyez sur ctrl+ bou cmd+ bpour reformater le contenu du fichier. Un problème mineur avec cela est que ST2 ne recharge pas automatiquement le fichier afin de voir les résultats, vous devez basculer vers un autre fichier et revenir (ou vers une autre application et revenir).

Sur Mac, j'ai utilisé macports pour installer tidy, sur Windows, vous devez le télécharger vous-même et spécifier le répertoire de travail dans le système de construction, où se trouve tidy:

"working_dir": "c:\\HTMLTidy\\"

ou ajoutez-le au CHEMIN.

rchl
la source
4

vous pouvez définir la touche de raccourci F12facilement !!!

{ "keys": ["f12"], "command": "reindent" , "args": { "single_line": false } }

voir détail ici .

Sumeta Pongpanna
la source
6
Réponse sans valeur; il s'agit d'un double de la réponse acceptée.
Mark Amery