Sublime Text 2 Code Formatting

Question

First let me say I come from a Microsoft background and Visual Studio is my bread and butter. It has a command (keybind is arbitrary) that auto-formats any code syntax. The same command works in HTML, CSS, Javascript, C#, etc.

I have tried plugins for ST2 and so far I've found most don't work on a Windows box and if they do, it's for a very specific purpose like just Javascript.

I have tried (and opened Issues where appropriate):

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

https://github.com/jdc0589/JsFormat (this one actually works)

https://github.com/welovewordpress/SublimeHtmlTidy

Have any Windows users of ST2 found anything that works to format CSS/HTML/Javascript, preferably in one shot?

Edit: Since this question is getting lots of views with no activity, I'll say that I am still looking for a plugin that can format various script types within the same command.

October 2013 Still haven't found anything that covers JS+CSS+HTML well however I have settled on JsFormat as by far the most effective and bug free with the least amount of configuration for just JavaScript.

Nogging

Answer 1

I can't speak for the 2nd or 3rd, but if you install Node first, Sublime-HTMLPrettify works pretty well. You have to setup your own key shortcut once it is installed. One thing I noticed on Windows, you may need to edit your path for Node in the %PATH% variable if it is already long (I think the limit is 1024 for the %PATH% variable, and anything after that is ignored.)

There is a Windows bug, but in the issues there is a fix for it. You'll need to edit the HTMLPrettify.py file - https://github.com/victorporof/Sublime-HTMLPrettify/issues/12

Splore

I was actually involved in the discussion in one of those open issues (that is still open). I'll check out the potential solution you linked and get back to you – Nogging

finding something for PHP in one shot is really difficult and annoying. the tool is great but a simple formatter is hard to find. Thes php_beautifier for Sublime is exhausting. The main issue in all formatters is that you have to tweek one or two things before using them. – Sacristan

@JuniorMayhé did you find anything for PHP? I'm really into Aptana's CTRL+SHIF+F, which formats ANYTHING (say HTML, JS, PHP, Ruby and Python!!!) – Grimaud

@Leonel, Aptana is for Linux right? I am using Sublime on Windows. The prettify was not working fine for me and I uninstalled it. – Sacristan

@JuniorMayhé no, it's cross-platform and actually I'm using it on Windows! – Grimaud

Answer 2

A similar option in Sublime Text is the built in Edit->Line->Reindent. You can put this code in Preferences -> Key Bindings User:

{ "keys": ["alt+shift+f"], "command": "reindent"} 

I use alt+shift+f because I'm a Netbeans user.

To format your code, select all by pressing ctrl+a and "your key combination". Excuse me for my bad english.

---

Or if you don't want to select all before formatting, add an argument to the command instead:

{ "keys": ["alt+shift+f"], "command": "reindent", "args": {"single_line": false} }

(as per comment by @Supr below)

Triplicate

If you find it annoying to select everything (sort of breaks the editing flow), then you can add an argument to the command instead: { "keys": ["alt+shift+f"], "command": "reindent", "args": {"single_line": false} } (source) – Tannin

Answer 3

Sublime CodeFormatter has formatting support for PHP, JavaScript/JSON/JSONP, HTML, CSS, Python. Although I haven't used CodeFormatter for very long, I have been impressed with it's JS, HTML, and CSS "beautifying" capabilities. I haven't tried using it with PHP (I don't do any PHP development) or Python (which I have no experience with) but both languages have many options in the .sublime-settings file.

One note however, the settings aren't very easy to find. On Windows you will need to go to your %AppData%\Roaming\Sublime Text #\Packages\CodeFormatter\CodeFormatter.sublime-settings. As I don't have a Mac I'm not sure where the settings file is on OS X.

As for a shortcut key, I added this key binding to my "Key Bindings - User" file:

{
    "keys": ["ctrl+k", "ctrl+d"],
    "command": "code_formatter"
}

I use Ctrl + K, Ctrl + D because that's what Visual Studio uses for formatting. You can change it, of course, just remember that what you choose might conflict with some other feature's keyboard shortcut.

Update:

It seems as if the developers of Sublime Text CodeFormatter have made it easier to access the .sublime-settings file. If you install CodeFormatter with the Package Control plugin, you can access the settings via the Preferences -> Package Settings -> CodeFormatter -> Settings - Default and override those settings using the Preferences -> Package Settings -> CodeFormatter -> Settings - User menu item.

Billen

except that CodeFormatter is broken and some blocks of text it will keep adding extra indents to every time you run it. Which makes it unusable. – Demonolater

Answer 4

Maybe this answer is not quite what you're looking for, but it will fomat any language with the same keyboard shortcut. The solution are language specific keyboard shortcuts.

For every language you want to format, you must find and download a plugin for that, for example a html formatter and a C# formatter. And then you map the command for every plugin to the same key, but with a differnt context (see the link).

Greets

Phyto