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

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?

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.

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.

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.

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é!

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

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.

Il y a un plugin appelé SublimeHtmlTidy qui fonctionne plutôt bien

https://github.com/welovewordpress/SublimeHtmlTidy

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

Allez simplement à

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

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

Je pense que c'est ce que vous recherchez:

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

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

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.

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.

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

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

voir détail ici .