Customizing Sublime for JS

like many other programmers, I have been using Sublime Text for while for programming in many languages. Especially, when I’m doing web applications. Its fast, simple and fast again. However, sometimes its wonderful simplicity becomes a weakness. There is nothing to use there. You may have to compile and run you JS program (for example) too many times and makes it cumbersome enough to rethink your use of text editor. However, in this post I will be introducing plugins and tricks to make Sublime more like an IDE for JS rather than a simple colorful text editor. In other words I will show you how to Pimp Your Ride for JS programming.

This tutorial will include installing packages, changing configurations and settings to have the JS editor/IDE you’ll need.

 

How to Install Packages

Before getting into any JSish changes and packages you will have to learn how to install packages in Sublime Text. The simplest way to do this is to use the Sublime Package Control. Install and use the Package Control as in the following links.

How to install Package Control

How to use Package Control

Creating a Project

Obviously, the first step toward converting a simple text editor to cool IDE is creating a structure for your project and having some sort of package manager. Sublime provides this if you create a project. Projects also provide more useful features to support  build paths and etc. You can find all about Sublime projects in the two following articles.

Sublime Text 2 Project Bliss

A short note on projects in Sublime’s official website

Javascript Syntax Annotator

Javascript syntax is supported by Sublime  by default. However, in case you want your Sublime to support future JS syntax features in ES6; you can also install the Package JavaScriptNext.

Choose the Right Theme

What do you like? A simple black background with orangish text colors combined with greens and etc. or the classic white background with red blue free combinations? I think the first step to enjoy coding is to enjoy looking at your code and for that you will need the right colors. I suggest using the ColorSublime package which includes numerous themes in various colors. You can find it here.

ColorSublime_logo

 

 

I personally prefer the default Sublime theme as a black theme and the Eiffel theme as a white background theme. Learn to install and use ColorSublime here.

 

Come Config Tweaks

Before changing anything in config files we have to get to know how do these config files work. Sublime stores all configurations in form of JSON files. You can find them in Sublime Text > Preferences menu. You will notice that there are two versions, User Preferences and Default Preferences. Normally, you don’t want to change the default presences because:

  1. You may need to keep a copy of the default settings.
  2. If you update Sublime or any plugin, these settings will be overwritten

Therefore, open user preferences and copy everything from the default settings into it. You can see that attributes such as color_scheme are holding the name and information for the preferred theme. You can also find font-face and font-size attribute containing the preferred settings. If you scroll down, you will see the tab_size attribute which determines the length of a single tab character.

You can also set the highlight_line attribute to true in order to make Sublime highlight the selected lines. I personally, find this useful to track the cursor.

Furthermore, you may also find the rulers attribute useful too. The rulers attribute is for you to show rulers on your screen. It accepts an array of number of characters or columns to show a ruler on.

Change spell_check to true if you are like me and want the spell checker to be active.

You can also use word_wrap and word_width to set the length of each line in your editor.

Take your time and consider all these attributes and possible settings and make the changes you want to your Sublime editor.

Keyboard Shortcuts

You can also define as many as shortcuts you desire. Take a look at this article which I wrote about Sublime shortcuts.

 

Autocomplete for JS

I still remember the first day I started using Eclipse as and modern IDE for Java. The ctrl + space feature looked more like holy spirit preventing your from writing bad code. I can’t miss this in Sublime can I? Trying installing the Package “Autocompelte Javascript with method signature” and writing a for loop afterward. It will show you all options in JS.

Screen Shot 2014-08-11 at 4.49.54 AM

 

SublimeLinter

Linters are softwares that provide hints and check for syntax and logical errors in codes. SublimeLinter is a Sublime Package that provides linters for different languages. SublimeLinter works more as a container or engine for running linters for various languages and supports various languages such as JS, Java, Python, PHP and etc. Here I will explain to you how to instal jshint in Sublime which is one of most famous linters for JS. You may also try jslint which an alternative vastly used package.

To install first you will have to install node to have a JS compiler. To install node on your system please visit nodes.org.

Next you will have to install jshint on your machine. Next use the following command to install jshint:

Now that you have jshint installed you need to know the directory. Use the following command in terminal on OS X/Linux  to find jshint installation directory.

If you are using a Windows use the following command:

Now open Sublime and open the Package Control window. Type in “install Package” and select. Next, type in “SublimeLinter” and select to install. After you have fully installed SublimeLinter, open the install package window again and install “SublimeLinter-jshint” package in your Sublime. From Preferences/Package Preferences, check and make sure that you have jshint in the array of your js linters. Also check the path directory of your operating system and in case its empty, type in the directory that jshint was in it.

Now you should have jshint installed. Close the tabs and windows and close the application completely. Reopen and try creating a variable with dash in-between its name. It should show a you a warning for that.

JS Building System and Console

So far, you have installed appropriate syntax and programming packages in your Sublime. Next ,step is you create a building system that would let us compile and run JS applications within Sublime. Without need to refresh a browser page again and again.

Here, we are creating a new Build System using NodeJS. To create the build system, select “New Build System..” from Tools > Build System menu. This will create a new tab. Copy the following settings into the file.

This indicates that the command node with the given file should run to execute a build command. In case it couldn’t find node, you can use the methods given in previous parts to find the exact path for the node executable file/command. and replace that with the give node above.

Next, save the file and name it “Node.sublime-build”. Next, open Tools > Build System and select Node as your build system. You can use Command + B / CTRL + b to build the file.

If you want to create a build chain take a look at Sublime’s project features.

Refactoring in JS

Another essential tool for any IDE is to support refactoring. To do provide refactoring, install the “JavaScript Refactor” package from Package Control. After you install the package, you should be able to right click on a selected word and select from the options from refactoring sub-item. In case it doesn’t work, open JavaScript Refactoring Settings from either Package Preferences menu or the right click menu and add the following to it.

This package provides, renaming and many other refactoring features to it. For more information read its Github page.

 

Other Packages

There are also other cool packages that one can use. GitHub client package or the HTML boilerplate package Emmet and Cliptboard History package are among these packages. You can also search for Javascript packages in Package Control or top popular Sublime packages to learn more. There are also packages for writing Javascript Snippets to help JS programming ins Sublime. I have also heard of a package called SublimeWebInspector which is result of integration of Google Chrome and Sublime but haven’t yet been able to use it. This packages promises to provide JS debugging and tracing within Sublime.

 

 

 

Leave a reply:

Your email address will not be published.

Site Footer