How do I reformat HTML code using Sublime Text 2

Question

I ve got some poorly-formatted HTML code that I d like to reformat  Is there a command that will automatically reformat HTML code in Sublime Text 2 so it looks better and is easier to read

User · Answer

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

User · Answer

you can set shortcut key F12 easy        keys     f12     command    reindent     args      single line   false       see detail here

User · Answer

Simply go to  Edit -  Tag -  Auto-format tags on document

User · Answer

HTML-CSS-JS Prettify - Hands down the best   Install Package Control     left shift   p  or ctrl   alt   left shift   p  - gt  Package Control  Install Package Enter HTML-CSS-JS Prettify Install node Restart Sublime Text  Enjoy

User · Answer

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    lt  -- if lt IE 7  gt   lt p class  chromeframe  gt Your browser is  lt em gt unsupported lt  em gt    lt a href  http   browsehappy com   gt Upgrade to a different browser lt  a gt  or  lt a href  http   www google com chromeframe  redirect true  gt install Google Chrome Frame lt  a gt  to experience this site  lt  p gt   lt   endif -- gt   lt  -- Le HTML5 shim  for IE6-8 support of HTML elements -- gt   lt  -- if lt IE 9  gt   lt script src  http   html5shim googlecode com svn trunk html5 js  gt  lt  script gt   lt   endif -- gt

User · Answer

There s a plugin called SublimeHtmlTidy which works pretty well   https   github com welovewordpress SublimeHtmlTidy

User · Answer

You don t need any plugins to do this  Just select all lines  Ctrl A  and then from the menu select Edit  rarr  Line  rarr  Reindent  This will work if your file is saved with an extension that contains HTML like  html or  php   If you do this often  you may find this key mapping useful      keys     ctrl shift r     command    reindent     args      single line   false       If your file is not saved  e g  you just pasted in a snippet to a new window   you can manually set the language for indentation by selecting the menu View  rarr  Syntax  rarr  language of choice before selecting the reindent option

User · Answer

There are half a dozen or so ways to format HTML in Sublime  I ve tested each of the most popular plugins  see the writeup I did on my blog for full details   but here s a quick overview of some of the most popular options   Reindent command  Pros    Ships with Sublime  so no plugin install needed   Cons    Doesn t delete extra blank lines Can t handle minified HTML  lines with multiple open tags Doesn t properly format  lt script gt  blocks   Tag  Pros    Supports ST2 ST3 Removes extra blank lines No binary dependencies   Cons    Chokes on PHP tags Doesn t handle  lt script gt  blocks correctly   HTMLTidy  Pros    Handles PHP tags Some settings to tweak formatting   Cons    Requires PHP  falls back to web service  ST2 only Abandoned    HTMLBeautify  Pros    Supports ST2 ST3 Simple and no binaray dependencies Support for OS X  Win and Linux   Cons    Chokes a bit with inline comments Does expand minimized compressed code    HTML-CSS-JS Prettify  Pros    Supports ST2 ST3 Handles HTML  CSS  JS Great integration with Sublime s menus Highly customizable Per-project settings Format on save option   Cons    Requires Node js Not great for embedded PHP    Which is best   HTML-CSS-JS Prettify is the winner in my book  Lots of great features  not much to complain about

User · Answer

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

User · Answer

The only package I ve been able to find is Tag   You can install it using the package control  https   sublime wbond net  After installing package control  Go to package control  Preferences -  Package Control  then type install  hit enter  Then type tag and hit enter   After installing Tag  highlight the text and press the shortcut Ctrl Alt F

User · Answer

I think this is what you re looking for    https   github com victorporof Sublime-HTMLPrettify

User · Answer

Just a general tip  What I did to auto-tidy up my HTML  was install the package HTML Tidy  and then add the following keybinding to the default settings  which I use       keys     enter     command    html tidy       this runs HTML Tidy with every enter  There may be drawbacks to this  I m quite new to Sublime myself  but it seems to do what I want

User · Answer

I recommend this plugin  HTML CSS JS Prettify  It really works   After the installation  just select the code and press Ctrl Shift H   Done

User · Answer

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

User · Answer

For me  the HTML Prettify solution was extremely simple  I went to the HTML Prettify page     Needed the Sublime Package Manager Followed the Instructions for installing the package manager here typed cmd   shift   p to bring up the menu Typed prettify Chose the HTML prettify selection in the menu   Boom  Done  Looks great

User · Answer

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

[html] How do I reformat HTML code using Sublime Text 2?

Examples related to html

Examples related to sublimetext2

Examples related to sublimetext

Examples related to indentation

Examples related to reformat