Although Sublime Text comes with build systems for many other scripting languages, it does not come with a built-in Javascript build system. Many sources will tell you to create a.html page with a link to the.js file, then use a web browser console to see the results of your code. Sublime Text is a sophisticated text editor for code, markup, and prose. You’ll love the slick user interface, extraordinary features, and amazing performance.
Active1 year, 9 months ago
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?
Install Sublime Text MacRavi RamRavi Ram
12.9k1818 gold badges6363 silver badges9090 bronze badges
15 Answers
You don't need any plugins to do this.Just select all lines (Ctrl A) and then from the menu select Edit → Line → 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:
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 → Syntax → Patrick M
language of choice before selecting the reindent option.
7,09688 gold badges4949 silver badges9090 bronze badges
peterpeter
37k55 gold badges5050 silver badges8989 bronze badges
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:
Cons:
![]() Tag
Pros:
Cons:
HTMLTidy
Pros:
Cons:
HTMLBeautify
Pros:
Cons:
HTML-CSS-JS Prettify
Pros:
Cons:
Which is best?
HTML-CSS-JS Prettify is the winner in my book. Lots of great features, not much to complain about.
Josh EarlJosh Earl
12.6k1414 gold badges5656 silver badges9090 bronze badges
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.
tristansokol
3,35411 gold badge88 silver badges2626 bronze badges
dardubdardub
2,58933 gold badges2424 silver badges2929 bronze badges
I recommend this plugin: HTML/CSS/JS Prettify, It really works.
After the installation, just select the code and press Ctrl+Shift+H.
Done!
Ulf Gjerdingen
1,29533 gold badges1414 silver badges2020 bronze badges
Peter ZhuPeter Zhu
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):
Sublime New Build System
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 :)
AnnekeAnneke
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.
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 )
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.
Gokhan TankGokhan Tank
3,46211 gold badge1616 silver badges1616 bronze badges
There's a plugin called SublimeHtmlTidy which works pretty well
Christian HagelidChristian Hagelid
7,05544 gold badges3636 silver badges6161 bronze badges
For me, the
HTML Prettify solution was extremely simple. I went to the HTML Prettify page.
Boom. Done. Looks great
jezrael
407k3232 gold badges425425 silver badges490490 bronze badges
insaineyesayinsaineyesay
Simply go to
Edit -> Tag -> Auto-format tags on document
Ricardo MartinsRicardo Martins
3,87111 gold badge3030 silver badges4747 bronze badges
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!
RossRoss
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:
Community♦
newtriksnewtriks
There is a nice open source CodeFormatter plugin, which(along reindenting) can beautify dirty code even all of it is in single line.
side2kside2k
1,80933 gold badges1414 silver badges1313 bronze badges
I think this is what you're looking for:
Allen BargiAllen Bargi
10.6k88 gold badges5151 silver badges5858 bronze badges
I'm using tidy together with custom build system to prettify HTML.
I have HTMLTidy.sublime-build in my Packages/User/ directory:
and tidy_config.cfg file in the same directory:
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:
or add it to the PATH.
rchlrchl
you can set shortcut key F12 easy!!!
![]()
see detail here.
Sumeta PongpannaSumeta Pongpanna
protected by Samuel Liew♦Oct 5 '15 at 9:20
Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead? Not the answer you're looking for? Browse other questions tagged htmlsublimetext2sublimetextindentationreformat or ask your own question.
Sublime Text is able to run build programs such as 'make', either when a key in pressed (F7 by default), or when a file is saved.
The build system to use can be select from the Tools/Build System menu. If a project is open, the selected build system will be remembered for the project.
Adding a new Build System
The contents of the Tools/Build System menu is found by enumerating all of the .sublime-build files under the packages directory, which can be accessed via Preferences/Browse Packages. .sublime-build files are a simple key-value, text based format. A simple example is:
There are four keys of interested here: 'build', 'lineNumberRegex', 'showWhenFinished', 'workingDir'. The meaning of these is:
Another, even simpler example:
This will launch SomeApp.exe with the current file as a command line argument.
Variable Substitution
In the above examples, you may have noticed a few variables being used: $ProjectDir in the first example, and $File in the second. The full list of these is:
Sublime Text 3 Download Mac
Download Sublime Text For Mac
Snippet style formatting can be used with these variables, for example:
This will emit the name of the current project if there is one, otherwise
Default .
This will emit the name of the current file, replacing
.php with .txt .
Troubleshooting
After pressing F7, you can see the command that was actually run by taking a look in the Console (via View/Console).
If you're getting an error like
'make' is not recognized as an internal or external command, operable program or batch file , try running same command in a command prompt and ensuring it works there.
Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
December 2020
Categories |