Comment puis-je reformater le code HTML en utilisant Sublime Text 2?

StackOverflow https://stackoverflow.com/questions/8839753

Question

J'ai un code HTML mal formaté que je voudrais reformater. Y at-il une commande qui reformate le code HTML automatiquement Sublime Text 2 de sorte qu'il semble mieux et est plus facile à lire?

Était-ce utile?

La solution

Vous n'avez pas besoin des plugins pour le faire. Il suffit de sélectionner toutes les lignes ( Ctrl A ), puis dans le menu sélectionnez Edition ? Ligne ? Réindente. Cela fonctionnera si votre fichier est enregistré avec une extension contenant le code HTML comme .html ou .php.

Si vous le faites souvent, vous pouvez trouver cette clé utile mappage: 

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

Si votre fichier est enregistré (par exemple, vous venez de coller dans 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 reindent.

Autres conseils

Il y a une demi-douzaine de façons au format HTML dans Sublime. Je l'ai testé chacun des plus populaires plug-ins (voir writeup je l'ai fait sur mon blog pour le plein détails), mais voici un rapide aperçu de quelques-unes des options les plus populaires:

commande Réindente

Avantages:

  • Livré avec Sublime, si nécessaire plug-in Pas d'installation

Moins:

  • ne supprime pas les lignes vides supplémentaires
  • ne peut pas gérer minified HTML, lignes avec plusieurs balises ouvertes
  • Ne pas correctement le format des blocs de <script>

Tag

Avantages:

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

Moins:

  • Bobines sur les balises PHP
  • ne gère pas correctement les blocs de <script>

HTMLTidy

Avantages:

  • Les poignées balises PHP
  • Certains paramètres Tweak formatage

Moins:

  • Nécessite PHP (retombe au service Web)
  • ST2 seulement
  • abandonné?

HTMLBeautify

Avantages:

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

Moins:

  • Bobines un peu avec les commentaires inline
  • Est-ce Etend le code minimisés / comprimé

HTML-CSS-JS Prettify

Avantages:

  • Prise en charge ST2 / ST3
  • Poignées HTML, CSS, JS
  • Grande intégration avec des menus Sublime
  • Hautement personnalisable
  • Paramètres par projet
  • Format sur option Enregistrer

Moins:

  • Nécessite Node.js
  • Pas génial pour PHP embarqué

Quel est le meilleur?

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

Le paquet que je suis en mesure de trouver est Tag .

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

Après avoir installé le contrôle du package. Aller au contrôle de l'emballage ( Préférences -> Control Package ) puis tapez install, appuyez sur entrez . Ensuite, tapez tag et hit entrez .

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 , il a vraiment travaux.

Après l'installation, il suffit de sélectionner le code et appuyez sur Ctrl + Maj + H .

Fait!

Juste un conseil général. Ce que je l'ai fait à l'auto-rangé mon HTML, était d'installer le package HTML_Tidy, puis ajoutez les éléments suivants aux paramètres raccourci clavier par défaut (que j'utilise): 

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

cela va HTML Tidy avec chaque entrée. Il peut y avoir des inconvénients à cela, je suis tout à fait nouveau pour moi sublime, mais il semble faire ce que je veux:)

Altough the question is for HTML, I would also additionally like to give info about how to auto-format your Javascript code for Sublime Text 2;

You can select all your code(ctrl + A) and use the in-app functionality, reindent(Edit -> Line -> Reindent) or you can use JsFormat formatting plugin for Sublime Text 2 if you would like to have more customizable settings on how to format your code to addition to the Sublime Text's default tab/indent settings.

https://github.com/jdc0589/JsFormat

You can easily install JsFormat with using Package Control (Preferences -> Package Control) Open package control then type install, hit enter. Then type js format and hit enter, you're done. (The package controller will show the status of the installation with success and errors on the bottom left bar of Sublime)

Add the following line to your key bindings (Preferences -> Key Bindings User) 

{ "keys": ["ctrl+alt+2"], "command": "js_format"}

I'm using ctrl + alt + 2, you can change this shortcut key whatever you want to. So far, JsFormat is a good plugin, worth to try it!

Hope this will help someone.

There's a plugin called SublimeHtmlTidy which works pretty well

https://github.com/welovewordpress/SublimeHtmlTidy

For me, the HTML Prettify solution was extremely simple. I went to the HTML Prettify page.

  1. Needed the Sublime Package Manager
  2. Followed the Instructions for installing the package manager here
  3. typed cmd + shift + p to bring up the menu
  4. Typed prettify
  5. Chose the HTML prettify selection in the menu

Boom. Done. Looks great

Simply go to

Edit -> Tag -> Auto-format tags on document

I created a Package called HTMLBeautify that does a decent job of reformatting HTML. I based it off of a Perl script I found back in 1997—I updated it to work with all the new fangled modern tags. :)

Check it out and let me know what you think!

https://github.com/rareyman/HTMLBeautify

I am yet to have the privilege to comment so this is simply additional information related to @peter's answer above answer.

I found HTML did not align as expected if IE conditional comments in the header were not completely in-line e.g. flush to the left:

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

There is a nice open source CodeFormatter plugin, which(along reindenting) can beautify dirty code even all of it is in single line.

I think this is what you're looking for:

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

I'm using tidy together with custom build system to prettify HTML.

I have HTMLTidy.sublime-build in my Packages/User/ directory:

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

and tidy_config.cfg file in the same directory:

indent: auto
tab-size: 4
show-warnings: no
write-back: yes
quiet: yes
indent-cdata: yes
tidy-mark: no
wrap: 0

And just select build system and press ctrl+b or cmd+b to reformat file content. One minor issue with that is that ST2 does not automatically reload the file so to see the results you have to switch to some other file and back (or to other application and back).

On Mac I've used macports to install tidy, on Windows you'd have to download it yourself and specify working directory in the build system, where tidy is located:

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

or add it to the PATH.

you can set shortcut key F12 easy!!!

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

see detail here.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top