I work on the web and so I have to deal with JSON a lot. My text editor of choice, since I work on a Mac, is TextMate. It's a terrific editor and does an absolutely beautiful job with very few flaws---in my honest opinion---nevertheless, one of the problems that I have come across with TextMate with respect to JSON is the code folding functionality. Due to the way that folding is handled in the language grammars, the editor has difficulty folding arrays properly when they contain other JSON objects. To solve this problem, I added a new "Reformat Document / Selection" command that formats the source in such a way as to allow the folding feature to function properly. A few others have done this as well, but from what I've seen, most have hand coded their own formatter, whereas, I feel a bit more comfortable using a package that is well tested and comes standard with a typical Python distribution. The rest of this post, details how to get and install the bundle and how to use it to properly format your own JSON code.

Installing the bundle

To install the new bundle, you'll first need to get a copy of it. I've uploaded the code to Bitbucket, so you can either check out the source via Mercurial, or you can simply select one of the download options as seen below.

Bitbucket download options

Once, you've got the bundle, you simply need to double click on it to install it into TextMate. The bundle uses Python's json package to format the JSON source which can be a bit picky at times. I've coded the reformat command so that, if the JSON is invalid, a message is displayed as a tooltip and source is left untouched. If you'd like to have the option to use the Javascript bundle's reformat command (which is much more lenient) when this happens, you'll need to follow the instructions in the next section, otherwise, you can skip ahead to the "Using the bundle" section.

Playing nice with the default Javascript bundle

First, hit Ctrl-Opt-Cmd-B to open the Bundle Editor. Click on the disclosure triangle for the Javascript bundle to reveal all of the commands, snippets, etc.. Select the "Reformat Document / Selection" command in the list and add "source.json" to the "Scope Selector" textbox making sure to separate it from the other options by a comma. The image below shows all of these steps in detail.

Javascript bundle setup

Once you've done that, whenever you hit the Ctrl-Shift-H key combo to invoke the reformat command, you'll be given a popup menu allowing you to choose which bundle's reformat command to use. Select the JSON bundle's command first, and if that fails, repeat the process, this time selecting the Javascript bundle's option. In the case that the JSON reformat option fails and you have to resort to the Javascript bundle's reformat command, the code folding feature won't work correctly on JSON arrays, but everything else should work just fine, and at least you'll still have nice looking JSON.

Using the bundle

Using the bundle is quite simple, and if you followed along with the instructions in the previous section for setting up the Javascript bundle's reformat command as well, you've already seen how to invoke the command. Nevertheless, to be thorough, I'll go over everything you need to get started with the bundle here. First, open up a new TextMate window and add some JSON to give us a document on which to test. Then we need to load the JSON bundle, do that by hitting Ctrl-Shift-Option-J and selecting the JSON language from the list. To reformat your JSON code all you need to do now is hit Ctrl-Shift-H (and, if you followed the last section's instructions, select the correct reformat command) and, voila!

blog comments powered by Disqus