JavaScript Tools TextMate Bundle

Posted in Development, JavaScript, TextMate, Web

Update (March 27, 2009): This bundle is now maintained by Thomas Aylott; the newest version can be obtained on GitHub.

Stuart Colville’s exploration of TextMate commands included as one of its examples a command that would run JSMin on the current JavaScript file and open the result in a new TextMate window.

Inspired by this example, I’ve created a TextMate bundle of tools for JavaScript developers. It’s fairly small at the moment, but I might add more things as they occur to me.

Linting your code

The centerpiece of the bundle is its integration with JavaScript Lint, Matthias Miller’s excellent tool for finding errors and other dumb things in your JavaScript files. The bundle will run jsl on the frontmost file and present the results all pretty‐like in an HTML window.

Screenshot

Clicking on a line number will bring your document back to the surface and move the cursor to that line so you can correct the error.

JavaScript Lint is especially useful because it doesn’t just report errors; it’ll also report on unusual things in your code, just to make sure you meant what you said. It can let you know if you failed to terminate a line with a semicolon, or if you used = instead of == inside a conditional, or if you have a fallthrough in your switch statement. Because each of these nitpicks can be incredibly helpful or incredibly annoying depending on the individual, jsl lets the user switch them on or off individually. You can use the “Edit Lint settings” bundle command to decide what you want to get bugged about.

There’s one other Lint command in the bundle: “Quick Lint.” It eschews the HTML‐formatted output, instead displaying the results of your Lint in a tooltip:

Screenshot

It binds itself to ⌘S so that it’ll run whenever you save a JavaScript file. If jsl deems your code lint‐free, it won’t show a tooltip, so you won’t even notice it unless your code gets fuzzy — at which point you can launch the full‐fledged lint and figure out what’s up. I find this command useful because I’d never remember to lint my code otherwise.

Compressing your code

In addition, I’ve included two different JavaScript compressors: JSMin and Dojo’s compressor. They’re available via “Minimize current file” and “Compress current file,” respectively, and provide different levels of code compression. JSMin trims whitespace and comments from files; Dojo’s tool goes further, renaming internal variables to shorter strings in order to provide even more of a file size reduction.

Download the bundle

Behold! As always, I invite questions, comments, torches, and/or pitchforks.

Comments

  1. Pingback