web-dev-qa-db-fra.com

Comment reformater le code HTML avec Sublime Text 2?

J'ai un code HTML mal formaté que j'aimerais reformater. Existe-t-il une commande qui reformate automatiquement le code HTML dans Sublime Text 2 afin qu'il soit plus esthétique et plus facile à lire?

htmlsublimetext2sublimetextindentationreformat
1265
Ravi Ram

Vous n'avez besoin d'aucun plugin pour faire cela. Il suffit de sélectionner toutes les lignes (CtrlA) puis dans le menu sélectionnez Édition → Ligne → Réindentation. Cela fonctionnera si votre fichier est enregistré avec une extension contenant du code HTML comme .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 de code dans une nouvelle fenêtre), vous pouvez définir manuellement la langue d'indentation en sélectionnant le menu Affichage → Syntaxe → language of choice avant de sélectionner l'option de réindent.

2030
peter

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

Commande de réindentation

Avantages:

  • Livré avec Sublime, aucune installation de plug-in n'est donc nécessaire

Les inconvénients:

  • Ne supprime pas les lignes vierges supplémentaires
  • Impossible de gérer du code HTML minifié, des lignes avec plusieurs balises ouvertes
  • Ne formate pas correctement les blocs <script>

Tag

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 correctement les blocs <script>

HTMLTidy

Avantages:

  • Gère les balises PHP
  • Certains paramètres pour Tweak formatage

Les inconvénients:

  • Requiert PHP (revient au service Web)
  • ST2 seulement
  • Abandonné?

HTMLBeautify

Avantages:

  • Prend en charge ST2/ST3
  • Dépendances simples et non binaray
  • Prise en charge de OS X, Win et Linux

Les inconvénients:

  • Un peu étouffé avec des commentaires en ligne
  • Développe-t-il le code minimisé/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:

  • Requiert 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, pas grand chose à redire.

365
Josh Earl

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

Vous pouvez l'installer en utilisant le contrôle du paquet. https://sublime.wbond.net

Après avoir installé le contrôle du paquet. Aller au contrôle du paquet ( Préférences -> Contrôle du paquet ) puis tapez install, frappé enter. Puis tapez tag et appuyez sur enter.

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

176
dardub

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

47
Peter Zhu

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

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

cela lance HTML Tidy à 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 :)

40
Anneke

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éindentez (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 afin de l'ajouter aux paramètres de tabulation/retrait par défaut de Sublime Text.

https://github.com/jdc0589/JsFormat

Vous pouvez facilement installer JsFormat en utilisant Package Control (Preferences -> Package Control) Ouvrez le contrôle du package puis tapez install, tapez enter. Puis tapez js format et appuyez sur enter, vous avez terminé. (Le contrôleur de package affichera l'état de l'installation avec succès et les erreurs sur 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 ce raccourci clavier comme bon vous semble. Jusqu'ici, JsFormat est un bon plugin, ça vaut la peine de l'essayer!

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

20
Gokhan Tank

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

https://github.com/welovewordpress/SublimeHtmlTidy

13
Christian Hagelid

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

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

Boom. Terminé. A l'air super

12
insaineyesay

Il suffit d'aller à

Édition -> Balise -> Format automatique des balises sur le document

10
Ricardo Martins

J'ai créé un paquetage appelé HTMLBeautify qui fait un travail décent de reformatage du code HTML. Je l'ai basé sur un script Perl retrouvé en 1997 - je l'ai mis à jour pour qu'il fonctionne avec toutes les nouvelles balises modernes. :)

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

https://github.com/rareyman/HTMLBeautify

8
Ross

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

6
side2k

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

J'ai trouvé que HTML ne s'alignait pas comme prévu si IE commentaires conditionnels dans l'en-tête n'était pas complètement en ligne, par exemple. affleurant à 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]-->
6
newtriks

Je pense que c'est ce que vous cherchez:

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

5
Allen Bargi

J'utilise nettoie avec un système de construction personnalisé pour personnaliser le code 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 basculer vers un autre fichier et inversement (ou vers une autre application et inversement).

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

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

ou l'ajouter à la PATH.

3
rchl

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

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

voir détail ici .

3
Sumeta Pongpanna