Quick Tip: Format JS in Sublime Text Posted on: 2013-06-13

Debugging a server's JSON response is a real pain, and I've come up with a workflow that works pretty well for me. This method depends on having the JsFormat plugin installed in Sublime Text, so make sure you do that. While this plugin gets you 90% of the way, it doesn't set the syntax to JS automatically. The only time I ever use this plugin is when grabbing the JSON response from my dev tools, creating a new tab and pasting it in there so there's no syntax set yet. It would be nice to cut out the extra "Command Pallette" -> "Set Syntax: JavaScript" step, so the way I got this working was by making use of the following Macro:

[
    {
        "args": { "syntax": "Packages/JavaScript/JavaScript.tmLanguage" },
        "command": "set_file_type"
    },
    {
        "args": null,
        "command": "js_format"
    }
]

Save that in a file called jsformat.sublime-macro somewhere in your Packages/User directory (I chose to put it in a folder called macros). Next up, add the following keyboard shortcut to your keybindings file:

// Run macro that sets syntax to JS and formats as such.
{ "keys": ["super+ctrl+f"], "command": "run_macro_file", "args": {"file": "Packages/User/macros/jsformat.sublime-macro"} }

... and that's it. You can now Paste in unformatted JS/JSON and with one handy keyboard shortcut, make your debugging a lot easier!