Comment reformater du code HTML en utilisant Sublime Text 2?

J’ai un 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 lisible et plus lisible?

Vous n’avez pas besoin de plugins pour ce faire. Il suffit de sélectionner toutes les lignes ( Ctrl A ) puis, dans le menu, de sélectionner Edition → Ligne → Réindexer. Cela fonctionnera si votre fichier est enregistré avec une extension contenant du code HTML tel que .html ou .php .

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

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

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

Il y a une demi-douzaine de façons de formater le HTML en 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éintégration

Avantages:

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

Les inconvénients:

  • Ne supprime pas les lignes vides supplémentaires
  • Impossible de gérer le HTML minifié, les lignes avec plusieurs balises ouvertes
  • Ne formate pas correctement les blocs

Marque

Avantages:

  • Prend en charge ST2 / ST3
  • Supprime les lignes vides supplémentaires
  • Aucune dépendance binary

Les inconvénients:

  • Chokes sur les tags PHP
  • Ne gère pas correctement les blocs

HTMLTidy

Avantages:

  • Gère les balises PHP
  • Certains parameters pour modifier le formatage

Les inconvénients:

  • Requiert PHP (revient au service Web)
  • ST2 seulement
  • 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:

  • Chokes un peu avec des commentaires en ligne
  • Étend le code réduit / compressé

HTML-CSS-JS Prettify

Avantages:

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

Les inconvénients:

  • Nécessite Node.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.

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

Vous pouvez l’installer en utilisant le contrôle de package. https://sublime.wbond.net

Après avoir installé le contrôle du package. Accédez au contrôle du package ( Préférences -> Contrôle du package ) puis tapez install , appuyez sur Entrée . Puis tapez tag et appuyez sur Entrée .

Après avoir installé Tag, sélectionnez 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 + Maj + H.

Terminé!

Juste un conseil général. Ce que j’ai fait pour ranger automatiquement mon code HTML, c’était d’installer le paquet HTML_Tidy, puis d’append le raccourci clavier suivant aux parameters par défaut (que j’utilise):

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

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

Bien que la question concerne le HTML, je voudrais également donner des informations sur la manière 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éindexer ( Edit -> Line -> Reindent ) ou utiliser le plug-in de formatage JsFormat pour Sublime Text 2 si vous souhaitez avoir plus de parameters personnalisables. comment formater votre code pour l’append aux parameters de tabulation / retrait par défaut du Sublime Text.

https://github.com/jdc0589/JsFormat

Vous pouvez facilement installer JsFormat avec le contrôle de package ( Preferences -> Package Control ) Ouvrez le contrôle de package puis tapez install, appuyez sur Entrée . Puis tapez js format et appuyez sur Entrée , vous avez terminé. (Le contrôleur de package affichera l’état de l’installation avec succès et les 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 changer cette touche de raccourci que vous voulez. Jusqu’à présent, JsFormat est un bon plugin, ça vaut le coup d’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é sur la page HTML Prettify .

  1. Besoin du Sublime Package Manager
  2. Suivez les instructions pour installer le gestionnaire de paquets ici
  3. typescript cmd + shift + p pour faire apparaître le menu
  4. prettify
  5. HTML prettify sélection HTML prettify dans le menu

Boom. Terminé. A fière allure

Il suffit d’aller à

Édition -> Balise -> Balises de format automatique sur le document

J’ai créé un package appelé HTMLBeautify qui effectue un travail correct 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 étiquettes 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, il s’agit 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 IE dans l’en-tête n’étaient pas complètement alignés, par exemple, à droite:

    

Il y a un joli plugin open source CodeFormatter , qui (avec la réindentation) peut embellir du code sale même si tout est en ligne simple.

Je pense que c’est ce que vous recherchez:

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 détail ici .

J’utilise bien ensemble avec le système de génération personnalisé pour enrichir 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.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 + b ou cmd + b pour 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 passer à un autre fichier et retour (ou à une autre application et retour).

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

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

ou l’append au PATH.