sublime_main

Use Sublime Text 3 as your JavaScript IDE – 2016

Sublime Text 3 is a notepad replacement on steroids. However, it’s not just a colorful text pad, it can be transformed to a full-feature JavaScript IDE. It’s a neat, feature-rich, text-editor which allows developers to easily keep track of, and edit, their code. In my opinion it’s the best free JavaScript IDE. It is my favorite notepad replacement and coding tool, and there is no time limit on the unregistered version (unlike the 30 day trial period for WebStorm). After your license expires, you can continue to use the software however, if you do like it, I recommend buying it for $70.00 to support the Sublime team. Although WebStorm is also a great IDE, in this post I am going to show you how to setup a simple JavaScript IDE (Integrated Development Environment) in Sublime Text 3.

Sublime Text 3 is available for: WindowsLinuxMac/OSX

Why Sublime Text 3?

The reason I like Sublime so much is the variety of themes, options, and code-highlighting features right out of the box. The most important feature, however, is the ability to add “packages” which add to the text-editor’s functionality and design. I love the dark themes with the colorful fonts – and believe me when I say this, it does tend to make managing all your code files a 100 times easier, especially when you are working with a lot. Code is easier to read and easier to modify. Another feature I love is the ability to use REGEX (Regular Expressions) when searching/manipulating data in your files using Sublime search & replace.

Another neat feature is the auto-complete feature. What the auto-complete feature does is when you start typing out a word, such as “ng” (for angular), Sublime pops up a little window and shows you the complete word. In this case, if I start typing “ng”, a little auto-complete window will pup up showing me related words such as ng-app, ng-controller, etc. If I type “<" an auto-complete menu will appear with a list of HTML elements. Sublime also automatically provides the closing element and places the cursor in between when you use the auto-complete window to insert your code. This is awesome for coders and works much like the Visual Studio auto-complete feature (if you've ever done any desktop programming.)

A development environment that’s free to setup and beats using Windows Explorer to manage your files and notepad to edit them, anyday. In today’s web design world, it is common to use multiple languages to deliver high-end, dynamic and rich content to the end user. Maintaining all the files (.php,.js,.json,etc.) can get overwhelming without a good IDE.

Sublime Text is a sophisticated text editor for code, markup and prose.
You’ll love the slick user interface, extraordinary features and amazing performance.
SublimeText.com

Download and Install

You can download Sublime Text 3 direct from https://www.sublimetext.com/. Installation is straight forward for Windows, so I’m not going to walk you through it. Simply download the setup file and launch it and follow instructions to install.

To install on Kali/Debian Linux, run the following commands:

wget https://download.sublimetext.com/sublime-text_build-3114_i386.deb
sudo dpkg -i sublime-text_build-3114_i386.deb

To run Sumblime, open Terminal and type:

subl

After Installing, play around with the Sublime Text 3 core version from the website. The core version has a lot of pre-installed “packages” which can be found in the Sublime install directory:

C:\Program Files\Sublime Text 3\Packages

sublime javascript ide
Pre-installed packages

If you’ve played around with the program, you can see why so many developers love using it. It already has the main packages to start highlighting your code in various colors (must make sure the file is saved as a code-type file, i.e. .php,.html,etc). This is a very important feature for any JavaScript IDE, or any IDE period.

Setup Sublime as a JavaScript IDE

Although Sublime comes with a lot of packages, we need to download a few of our own. That being said, there are literally thousands of packages available to download at https://packagecontrol.io/ — website dedicated to managing Sublime packages. Sublime even offers users the ability to make and publish their own packages. I am going to go over a few important packages that will help setup our Sublime Text JavaScript IDE, however, you are welcome to customize your own IDE with the plethora of packages available from PackageControl. To install packages, you simply unzip and place the folder in the following directory:

C:\Users\[username]\AppData\Roaming\Sublime Text 3\Packages\

As you can see, we are going to be placing the packages we download in a different directory than the original “core” packages. The packages in the installation directory, are generally only the ones that come with Sublime, and they prefer you keep it that way. The AppData directory will keep our new packages, so when Sublime Text updates, you will still have the downloaded packages installed. Preference is given to the local AppData packages over the packages in the installation directory.

First, make your Sublime Text IDE sidebar visible. Your sidebar will contain opened/files and folder directories. It makes sifting through your web application directory structure easier. Click the file in the Sidebar, and you will be shown the contents in the main pane. When your file numbers grow, you will be thankful for this feature. To make your sidebar visible, open Sublime and navigate to:

View -> Sidebar -> Show Sidebar

Packages

I have compiled a list of packages for you to download to complete our Sublime Text JavaScript IDE, as well as provided a brief description of each individual package below:

Remember to read the the package author’s installation notes if the package isn’t working. Packages are regularily updated and installation instructions can change. For example, sometimes the packages require a folder rename, or adding a specific line to Sublime’s config/preferences file.

SideBarEnhancements – Enhances the options available to you when you right click a file in the sidebar. Some options include “open with..“, “move to trash“, basic file manipulations options, etc. It makes your job a lot easier when you can manage the files from the left pane and don’t have to minimize everything and open up the explorer.

Color Highlighter – Every time you use a color code in your program code, Sublime will highlight the color code in the color that it represents. This makes managing your website colors much easier.

javascript ide ch

Highlight Build Errors – This package is very handy when debugging your code. As the package name states, it highlights sections of your code where it detects a programming error. Once again, very convenience and time-saving package.

Terminal – Allows you to open the Terminal/CLI by using keyboard shortcuts CTRL+SHIFT+T or CTRL+ALT+SHIFT+T. For anyone that has used git, npm, or another package manager knows how important access to the Terminal is. Most of the time we have to run Terminal commands from inside our project directory, and navigating to it from the terminal every single time can get VERY annoying. With this package, simply use the shortcut keys and your Terminal window will pop up and point to your project directory.

SFTP – SFTP is another time-saving package. If you use FileZilla, or another FTP client, to manage your website/application files, you know how annoying it can be switching back and forth between text editor and FTP client. This is where SFTP comes in. It basically gives Sublime the ability to act as an FTP client and sync files easily. The issue with SFTP is that it is only a 30-day trial. If you wish to use it longer, you need to purchase it for $30. That being said, it is well worth the $30 if you’re looking to do some serious web development. Go ahead, give it a try first.

javascript ide seti
Seti_UI icon theme

Seti_UI – Seti UI is just a theme package to customize and make our side bar look better. Seti contains a icon theme that makes your sidebar attractive. Besides that, it contains icons for various different coding languages, which aren’t included by default in Sublime.

Auto Semi-Colon – This is a neat little package and has proved itself useful from time to time. It automatically inserts a semi-colon at the end of your code-line in your code. As you can imagine, it comes in very handy with languages such as JavaScript. I’m trying not to make the habit of forgetting the semi-colon all the time. 🙂

AngularJS – This is a very important package if you are familiar with JavaScript and Angular framework for applications. With this package you can auto-complete modules, controllers, factories and services (Angular-specific lingo) variables. This package also provides auto-complete on all AngularJS attributes, which start with ng-*** (ng-controller, ng-repeat, etc.) and snippets of Angular JS built-in functions ($http, $filter, etc.)

package control angular IDEpackage control jquery IDE

jQuery – This is a Sublime Text bundle to help with jQuery functions. It has syntax highlighting and almost all of the jquery methods as snippets.

There are syntax-highlighters available for almost every programming language known to man at Package Control. Please do a search for any coding language on the Package Control website, and chances are that you will find a plugin (or few) for it.

That’s it. These are the packages that I am mainly using. As stated, there are literally hundreds, if not thousands of different packages available on packagecontrol.io. Feel free to download and install as many packages as you need to make your job easier. Since the packages are located on Github, you can also use “git” to download the packages.

Using Git to Install Packages

I’m not going to dive deep into git right now, however I will say that it is a Version Control System (VCS). To learn more about git language, visit https://git-scm.com/, or to browse and create your own git repos, visit http://www.github.com. If you’re not already familiar with git, installing the packages above is very easy with git clone command. For example, let’s use Git to install the “Color Highligter” package to our Sublime Text JavaScript IDE.

Open command line prompt (or Terminal if using Linux) and navigate to the packages directory using the following command:

 cd C:\Users\[username]\AppData\Roaming\Sublime Text 3\Packages\

Remember, to replace the above location with your the location to your Packages directory. The directory listed above should be your local user package directory for Windows 7/10.

Installation directories

Windows%APPDATA%\Sublime Text 3
Linux~/.config/sublime-text-3
Mac~/Library/Application Support/Sublime Text 3

From here simply run the following git command (must have “git-cli” installed globally):

 git clone https://github.com/Monnoroch/ColorHighlighter.git "Color Highlighter"

This will clone (or copy) the Color Highlighter repository (or in this case, package) and save it in a folder named “Color Highlighter” in our local user packages directory. That simple.

Summary

I hope you grow to love Sublime Text as an IDE as much as I do. Even if you don’t program, you can use it as an effective text-pad replacement — just change your default application for .txt files. It’s light weight, easy to configure, and makes you a more efficient programmer. With the added packages, you basically have your own custom IDE, and you didn’t have to spend a dime (at least until the trials are up 😉 lol).

If you’re not a fan of free things (lol), you can always buy JavaScript IDE software such as WebStorm, or Cloud9. Each IDE has it’s own pros and cons, and can be utilized for different languages (not just JavaScript). Some web developers prefer one over the other for whatever reason. It’s up to you to decide which IDE best matches your work-flow. If you couldn’t already tell by this article, in my opinion, the main point of any IDE is to save you time and keep you well organized.

Some other well-known IDEs include:

Are there any other package control packages that you believe are a must-have for our IDE setup? Or, is there another IDE that you consider the best free JavaScript IDE? If so, please let me know.

2 thoughts on “Use Sublime Text 3 as your JavaScript IDE – 2016

Leave a Reply

Your email address will not be published. Required fields are marked *