Visible Whitespace in Sublime Text 2

I have been using jshint in my node projects lately. Jshint is a linting tool based on JSLint by Douglas Crockford, the ghost whisperer of javascript and author of JavaScript: The Good Parts. I prefer JSHint as it is a little more configurable and I can fine tune it to what I care about.

One thing I care about is trailing whitespace. For whatever reason, I don't want trailing whitespace in my files. I blame this afliction on Terry Hughes. Also surprisingly enough this is the most common JSHint failure that gets me.

One thing that Terry does in Visual Studio is enable visual whitespace so you can see all the nasty mixed tabs/spaces and trailing garbage. I am using Sublime Text 2 as my main editor at the moment, so I went spelunking to figure out how to enable visual whitespace in it.

It turns out to be pretty easy. From the Sublime Text 2 menu, select Preferences> Default - User.

Then add this setting:

{
    "draw_white_space": "all",
    "tab_size": 4,
    "translate_tabs_to_spaces": true
}

The first setting will make whitespace visible at all times. The next two I threw in as a nice suggestion, they will convert tabs to four spaces if you are into that kind of thing. I apparently am also a jerk who will automate cleaning up after you if you don't care about whitespace. Just this morning I added a plugin to convert tabs to spaces when I save a document. So if I open a file full of horrible tabs, all I have to do is save and it fixed.

Adding the plugin was pretty easy, just select Sublime Text 2 > Preferences > Browse Packages.

Then create a new directory, I called mine "johnson" to avoid conflicts, and create a python script file named tabs_to_spaces.py and add this code to it.

import sublime, sublime_plugin

class ConvertTabsToSpaces(sublime_plugin.EventListener):
    def on_pre_save(self, view):
        edit = view.begin_edit()
        view.run_command('expand_tabs', {"set_translate_tabs": True})
        view.end_edit(edit)

Happy anal text formatting to you!