Comment reformater le code HTML en utilisant Sublime Text 2?

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

Commande Reindent

Avantages:

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

Inconvénients:

• ne supprime pas les lignes vides supplémentaires
• ne peut pas gérer le HTML minifié, les lignes avec étiquettes
• ne formate pas correctement les blocs <script>

Étiquette

Avantages:

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

Inconvénients:

• S'étouffe sur les balises PHP
• ne gère pas correctement les blocs <script>

HTMLTidy

Avantages:

• gère les balises PHP
• quelques réglages à modifier formatage

Inconvénients:

• nécessite PHP (revient au service web)
• ST2 seulement
• abandonné?

HTMLBeautify

Avantages:

• prend en charge ST2 / ST3
• dépendances simples et sans binaray
• Support pour OS X, Win et Linux

Inconvénients:

• S'étouffe un peu avec des commentaires en ligne
• développe le code minimisé/compressé

HTML-CSS-JS Embellir

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 d'enregistrement

Inconvénients:

• Nécessite Un Nœud.js
• pas génial pour PHP intégré

Quel est le meilleur?

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

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

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

Après l'installation du contrôle du paquet. Accédez au contrôle des paquets (Préférences -> Contrôle De Paquet ) puis tapez install, appuyez sur entrez . Ensuite, tapez tag et appuyez sur entrez .

Après l'installation de la Balise, mettez le texte en surbrillance et appuyez sur le raccourci Ctrl+Alt+F.

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

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

Fait!

Juste un conseil général. Ce que j'ai fait pour auto-ranger mon HTML, c'était installer le paquet HTML_Tidy, puis ajouter le keybinding suivant aux paramètres par défaut (que j'utilise):

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

Ceci exécute HTML bien rangé avec chaque entrée. Il peut y avoir des inconvénients à cela, je suis assez nouveau pour me sublimer, mais il semble faire ce que je veux:)

Bien que la question soit pour HTML, je voudrais également donner des informations sur la façon de auto-formater votre code Javascript pour le texte Sublime 2;

Vous pouvez sélectionner tout votre code (ctrl + A ) et utilisez la fonctionnalité in-app, reindent(Edit -> Line -> Reindent) ou vous pouvez utiliser le plugin de formatage JsFormat pour Sublime Text 2 Si vous souhaitez avoir des paramètres plus personnalisables sur la façon de formater votre code en plus de L'onglet/retrait par défaut du texte Sublime paramètre.

Https://github.com/jdc0589/JsFormat

Vous pouvez facilement installer JsFormat en utilisant le contrôle des paquets (Preferences -> Package Control) ouvrez le contrôle du paquet puis tapez install, appuyez sur enter. Ensuite, tapez js format et appuyez sur entrez , Vous avez terminé. (Le contrôleur de paquet 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"}

Je suis l'aide de ctrl + alt + 2, vous pouvez modifier cette touche de raccourci, ce que vous voulez. Jusqu'à présent, JsFormat est un bon plugin, la peine de l'essayer!

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

Il y a un plugin appelé SublimeHtmlTidy qui fonctionne assez bien

Https://github.com/welovewordpress/SublimeHtmlTidy

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

1. besoin du Sublime Package Manager
2. a suivi les Instructions d'installation du gestionnaire de paquets ici
3. tapé cmd + maj + p pour afficher le menu
4. Tapé prettify
5. choisissez la sélection HTML prettify dans le menu

Boum. Faire. Regarde grand

Allez simplement à

Edit - > Tag- > format automatique des balises sur le document

J'ai créé un paquet appelé HTMLBeautify {[2] } qui fait un travail décent 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. :)

Check it out et laissez-moi savoir ce que vous pensez!

Https://github.com/rareyman/HTMLBeautify

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

J'ai trouvé que le HTML ne s'alignait pas comme prévu si IE les commentaires conditionnels 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]--> 

Il y a un bon plugin open source CodeFormatter , qui (le long de la réindentation) peut embellir le code sale même si tout est en une seule ligne.

Je pense que c'est ce que vous cherchez:

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

Vous pouvez définir la touche de raccourci F12 facile!!!

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

Voir le détail ici.

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

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

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

Et tidy_config.fichier 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 il suffit de sélectionner construire le système et appuyez sur la touche ctrl+b ou cmd+b reformater le contenu du fichier. Un problème mineur avec cela est que ST2 ne recharge pas automatiquement le fichier donc pour voir les résultats vous devez passer à certains autre fichier et retour (ou à une autre application et retour).

Sur Mac, j'ai utilisé macports pour installer tidy, sous 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.