Question Comment reformater un code HTML en utilisant Sublime Text 2?


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


1178
2018-01-12 17:49


origine


Réponses:


Vous n'avez pas besoin de plugins pour cela. Sélectionnez simplement toutes les lignes (Ctrl UNE), puis dans le menu, sélectionnez Edition → Ligne → Réind. Cela fonctionnera si votre fichier est enregistré avec une extension qui contient du HTML comme .html ou .php.

Si vous le faites souvent, vous pouvez trouver cette correspondance de touches utile:

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

Si votre fichier n'est pas enregistré (par exemple si vous venez de coller dans un extrait d'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 reindent.


1927
2018-06-04 21:47



Il y a une demi-douzaine de manières de formater le HTML dans Sublime. J'ai testé chacun des plugins les plus populaires (voir le J'ai écrit sur mon blog pour plus de détails), mais voici un bref aperçu de certaines des options les plus populaires:

Commande de réindemnisation

Avantages:

  • Expédié 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 comportant plusieurs balises ouvertes
  • Ne pas correctement format <script> blocs

Marque

Avantages:

  • Supporte ST2 / ST3
  • Supprime les lignes vides supplémentaires
  • Aucune dépendance binaire

Les inconvénients:

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

HTMLTidy

Avantages:

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

Les inconvénients:

  • Nécessite PHP (retombe au service web)
  • ST2 seulement
  • Abandonné?

HTMLBeautify

Avantages:

  • Supporte ST2 / ST3
  • Simple et pas de dépendances binaray
  • Prise en charge de OS X, Win et Linux

Les inconvénients:

  • Chokes un peu avec des commentaires en ligne
  • Est-ce que développer le code réduit / compressé

HTML-CSS-JS Prétendre

Avantages:

  • Supporte 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:

  • Node.js requis
  • Pas génial pour PHP intégré

Lequel est le meilleur?

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


351
2018-01-18 16:29



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

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

Après l'installation du contrôle de paquet. Aller au contrôle de paquet (Préférences -> Contrôle de paquet) puis tapez install, frappé entrer. Puis tapez tag et frapper entrer.

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


172
2018-01-13 23:12



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


45
2018-01-07 03:22



Juste un conseil général. Ce que j'ai fait pour ranger automatiquement mon code HTML, était d'installer le package HTML_Tidy, puis d'ajouter la liaison de touches suivante aux paramètres par défaut (que j'utilise):

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

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


38
2017-11-01 15:17



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

Vous pouvez sélectionner tout votre code (ctrl + UNE) 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 disposer de paramètres plus personnalisables sur la façon de formater votre code pour l'ajouter aux paramètres d'onglet / indentation par défaut de Sublime Text.

https://github.com/jdc0589/JsFormat

Vous pouvez facilement installer JsFormat avec l'utilisation de Package Control (Preferences -> Package Control) Ouvrez le contrôle du paquet puis tapez installer, frapper entrer. Puis tapez js format et frapper entrer, vous avez terminé. (Le contrôleur de package affichera le statut 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. Jusque là, JsFormat est un bon plugin, ça vaut le coup de l'essayer!

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


20
2018-06-24 11:34



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

https://github.com/welovewordpress/SublimeHtmlTidy


11
2017-09-08 11:00



Allez simplement à

Édition -> Balise -> Balises de mise en forme automatique sur le document


9
2017-10-09 00:23



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

  1. Nécessaire le Sublime Package Manager
  2. Suivi des instructions pour l'installation du gestionnaire de paquets ici
  3. tapé cmd + Maj + p pour élever le menu
  4. Tapé prettify
  5. Choisissez le HTML prettify sélection dans le menu

Boom. Terminé. Ça a l'air génial


9
2017-07-27 16:01



J'ai créé un paquet appelé HTMLBeautify cela fait un travail décent de reformater HTML. Je me suis basé sur un script Perl que j'ai trouvé en 1997. Je l'ai mis à jour pour qu'il fonctionne avec tous les nouveaux tags modernes. :)

Regardez-le et laissez-moi savoir ce que vous en pensez!

https://github.com/rareyman/HTMLBeautify


7
2018-01-21 18:46



Il y a une belle source ouverte CodeFormatter plugin, qui (le long de réindentation) peut embellir le code sale même tout ce qui est en ligne unique.


6
2018-04-23 07:34