Sublime Time — An Awesome Sublime Text Setup for Javascript

Sublime Text is hands-down the most popular text editor among web developers. Arguably, it’s also the best. The Vim and Emacs aficionados will argue that once you master their editor of choice, your productivity goes through the roof compared to GUI text editors. I argue that while Vim and Emacs have steep learning curves and take weeks if not months or years to master, Sublime is easy to learn and you can get running within days. Moreover, with awesome plugins, endless and customizable keyboard shortcuts, you can get as productive, if not more as you would with vim and emacs. Not to start a flame war, but it’s true. (Yes, Sublime text supports the regex based find and replace etc.)

At any rate, there are definitely similarities between Sublime Text and other text editors. First and foremost, you need to set it up to make it awesome. Here are a set of steps to get there.

Step 1 - Preparation #

Make sure you have the following installed.

• Git, Make etc. (Command Line Tools on a mac)
• Node.js + NPM
• JSLint/JSHint (npm install -g jshint) (make sure it’s available in your path)

Step 2 - Install Sublime Text 3 #

Duh!

Step 3 - Install Package Control #

I’m surprised Package Control still isn’t included by default. Sublime Text is basically incomplete without it. Thankfully, the process is very simple. It’s explained on Package Control’s website so I won’t go over it here. Just make sure you get the correct version for Sublime Text 3. (And please, use Sublime Text 3, it’s got major performance and stability benefits over Sublime Text 2)

Step 4 - Let’s install some basics #

Cmd/Ctrl + Shift + P : Get used to this shortcut. This opens the Sublime Text command centre. You can then type ‘install’ and hit enter to reach a list of installable packages. Start by installing the various languages you might use that are not included by default in Sublime:-

• Coffeescript
• Sass/Less/Stylus
• JSX
• etc…

Step 5 - Sublime Linter #

Using the method described above, search for and install a package called Sublime Linter. Then install JSHint/JSLint and any other linter you may desire. After you’ve installed the Sublime Linter, you can search for in the command center and change various settings such as themes, delays etc. Match it to suit your needs.

Step 6 - Git #

Moving onwards, you want to install a package called ‘Git’. This gives you a bunch of git functionality right in Sublime Text, and is now available in the command center. You can add, commit, pull, push etc without switching to the terminal.

Taking it one step further, you may want to install a package called GitGutter. GitGutter puts little icons for diffs in the gutter (the narrow margin directly to the left of the line numbers) while you work on a project. This package is dependent on the Git package so make sure you install that first.

Finally, don’t miss out on Git Conflict Resolver. It’s a simple tool that highlights merge conflicts in files. It’s invaluable when things get hairy.

Step 7 - Don’t forget Emmet #

Emmet is an awesome little plug-in that gives you super-powers while typing HTML or CSS. It lets you type something like div.container and press tab to get a div with the class of container. It’s really quite magical. You should read more about it here.

Step 8 - Node.js Support #

This is what you’ve been waiting for. Sublime Text becomes amazing for javascript after this is done. First, go to your terminal and type ‘which node’
you should get a path that looks something like this: /usr/local/bin/node. Copy it.

Next, go to Sublime, and to Tools > Build System > New Build System
You’ll get a new file, delete what exists, and replace it with this:

{
  "cmd": ["/usr/local/bin/node", "$file"],
  "selector": "source.js"
}

Replace /usr/local/bin/node with the path you copied earlier. Now, when you’re working on javascript code, try using Cmd+B and get ready to drop you jaws! The newly created build system will execute the currently open file through node, and open an in-editor console to print out the results. (You can press escape to get rid of it). There is one thing to be careful about however. If, you end up running an endless loop with your build system, it may never quit itself, and you’ll have to manually find the process and kill it.

This setup has been invaluable for me, hopefully you can find some value too.

Bonus - better Paste #

You should probably go into the key-binding setting and swap the shortcuts for paste and paste and indent. You’ll thank me later.