Sublime Node Underscore

Goals of this tutorial:

  • You will be able to run your javascript code with Node including the Underscore library within Sublime Text
  • You will get a brief introduction to the popular package managers, Homebrew and NPM
  • This tutorial was written for Mac OSX users

Step 1: Install Sublime Text and Xcode

      Sublime is an excellent text editor. Even though Sublime Text 3 is in beta, I would still go with that version. It can be downloaded on the Sublime website.

      Xcode is Apple’s development software used to build Mac and iOS apps. It is available for free on the Apple App Store. This installation could take a while…Be patient.

Step 2: Install Homebrew, Node, and Underscore

      In this section, we will be using the Terminal application and the command line interface to install the applications we need. Open up the Terminal by pressing [⌘ space] and typing ‘terminal’ in Spotlight.

      First, let’s install command line tools for Xcode. It is a requirement for us to install Homebrew. Enter the code snippet below in the Terminal to install.

xcode-select --install

      Homebrew is a package manager that we will use to install node. A package manager is a collection of software tools that automates installing, updating, configuring, and removing computer programs. To find out more about Homebrew, check out the Homebrew website. To install Homebrew, copy and paste the code snippet below in the Terminal.

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

*If you have problems installing anything, you may need to put ‘sudo’ in front of the command and enter your password when prompted.

      Once you have Homebrew installed, enter the code snippet below in the Terminal to install Node.

brew install node

      You can now access Node in the Terminal. By entering node, you can use Node just like you do with the javascript console in your web browser. Give it a try! Press [control C] twice to exit Node.

      When Node is installed, it also installs NPM which is another package manager. This is important for us to install Underscore to Node. You can check out NPM at the NPM website. To install Underscore, enter the code snippet below in the Terminal.

npm install underscore

      Underscore is installed, but we must set it to a variable to utilize it. We will do that in the next step.

Step 3: Create a build system in Sublime for Node

      Open up Sublime Text 3, and go to Tools → Build System → New Build System… A new file will open up. Copy and paste the JSON code snippet below.

{
  "cmd": ["/usr/local/bin/node", "$file", "$file_base_name"],
  "working_dir": "${project_path:${folder}}",
  "selector": "*.js"
}

      Save the file as, ‘Node.sublime-build’. Make sure that the build system is set to Node. Go to Tools → Build System → Node. Now when you are working in a *.js file, you can use the shortcut [⌘B] to run your code and a small console will appear on the bottom of Sublime. Press [esc] to close the console. Remember when you used node in the Terminal, how this works is exactly the same. The console opening up is like the Terminal and it is running Node on the file you are working on.

      Now to enable the Underscore library, you need to create a variable and set it to Underscore. You will add this as code in your *.js file. The easiest choice for a variable is ‘_’, but you can use anything you like as well. See the javascript code snippet below.

var _ = require('underscore');

      Congrats! You made it! If everything worked out, you will be able to do something like the example below.

Example