10.17.2013

Easily Create a Javascript Console in Sublime Text

I've been spending a lot of time learning Javascript lately over at Code School. As a very hands-on learner, I needed a fast and elegant way to write the code and view the console output at the same time, preferably within a native application. Sublime Text to the rescue! Take a peek at the result:

There are two slightly different methods to achieve the same result: using jsc (a command-line tool in OS X), or Node.js (cross-platform). If you are running a Mac and don't currently have Node.js installed I would recommend you use jsc. It's baked right into OS X, so you don't need to install a thing.

Using jsc

If you are on OS X, using jsc to run the Javascript couldn't be easier.
  1. In Sublime Text, go to "Tools" > "Build System" > "New Build System…".
  2. Replace the placeholder code with this:
    {
    "cmd": ["jsc", "$file"],
    "selector": "source.js"
    }
    
  3. Save the file as Javascript.sublime-build.
  4. To run on a Javascript file, either type ⌘B or go to "Tools" > "Build".
One important note: use debug() instead of console.log() with jsc.

Using Node.js

Using Node.js is a little more involved, but not by much:
  1. Download and install Node.js from the project homepage.
  2. In Sublime Text, go to "Tools" > "Build System" > "New Build System…".
  3. Replace the placeholder code with this:
    {
    "cmd": ["node", "$file"],
    "selector": "source.js"
    }
    
    Note: If you get [Errno 2] in the console, make sure to include the path to Node instead of just "node" on line 2. On a Mac, this will probably be "/usr/local/bin/node".
  4. Save the file as Node.sublime-build.
  5. To run on a Javascript file, either type ⌘B (Mac) or go to "Tools" > "Build".
Enjoy!

No comments:

Post a Comment

I'm Caleb Grove

Yep, that's me. I'm a 17 year old web unicorn and own OnRamp Web Design. My skill base is quite broad, though my real focus lies in UX and UI design for the web. When it comes to designs, I'm a perfectionist, scooting 1 pixel at a time.

My main blog captures all my web-related thoughts that exceed 140 characters. Anson S is my personal blog, where I pander in politics and religion. You can tweet me on Twitter at @SirCalebGrove, circle me on , or friend me on Facebook.

About this site

This is my playground. CalebGrove.com harnesses the power of HTML5 and CSS3. It was built using my web design weapon of choice, Freeway Pro, using a inline flexible system. Responsiveness was hand-coded. The blogs are hosted by Blogger, whose template code was generated by the Blogger actions. Website hosted by GJX Hosting. Creativity provided a disturbed mind, and not much else.

No unicorns where harmed in the making of this website, except through caffeine overdose.