Make Sublime Text a JavaScript IDE – JS Development

I’m using Sublime Text 3.

Sublime text is one of the most popular text editors on this planet and a lot of programmers heavily use it for their work. JavaScript is the most popular language according to the statistics of github and stackoverflow. So it’s pretty obvious that lot of JavaScript developers are using Sublime text and probably you are also one of them.

Sublime is a very simple text editor which has a huge community. There are millions of plugins available to enhance the simple editor just according to your preference. Using some plugins you can easily make sublime a handsome place to code JavaScript. May be not really an IDE, which gives you way more controls, but yes, definitely a comfortable place.

Install Node.js first

Before doing anything else, you must have Node.js and npm installed in your machine. Many of the Sublime plugins uses npm. And anyway if you are a JavaScript developer you are going to use node sooner or later. So please install Node.js.

Package Control

Package control is probably the most important plugin in sublime’s eco system. This plugin helps you to install and manage other plugins. It’s like npm of our JavaScript. May be many of you have already have it installed; but in case you didn’t below is the way to install this.

  • Open sublime console (ctrl + ~).
  • Copy and paste the code below and hit enter.

After installing the plugin remember to restart your sublime.

SidebarEnhancements

The default sidebar of sublime text is very lame. You can’t even copy paste files from there. The plugin SidebarEnhancements gives a lot of features to deal with your sidebar. Points below will help you to install it.

  • Press ctrl + shift + p if you are using windows or linux and cmd + shift + p in case of mac.
  • Select Package Control: Install Package.
  • Type SidebarEnhancements there.
  • Select and hit Enter.

sublime-sidebar

The plugin will be installed. Don’t forget to restart the Sublime Text.

DocBlockr

DocBlockr helps you to comment on your code. It uses the standard commenting signature like /** + Tab. Install it just like the way we installed the SidebarEnhancements plugin. Just at the third step, type DocBlockr.

sublime-docblockr

Babel

As it’s ES6 everywhere, you must need ES6 syntax highlighter. Babel plugin help highlighting ES6, JSX etc. Babel also provide ES6 fiddle and you can also use babel to compile your ES6 code to ES5. There are other tools too to compile ES6. Anyways, installation procedure is same as the previous two plugins.

sublime-es6

SublimeLinter

SublimeLinter is one of the most crucial plugins for JavaScript developers. JavaScript is an interpreted language and you can not find the compile time error (though there are ways to do that) and errors are found in run time only. But with the help of SublimeLinter you will get errors and warnings at the time of typing the code. SublimeLinter 3 doesn’t install any linting plugin with it, so you need to install by yourself.

  • Install SublimeLinter the way we installed other plugins.
  • Install SublimeLinter-jshint.
  • Install SublimeLinter-csslint.

sublime-jshint

JSFormat

Many times while copying code from somewhere else of even while typing we do not maintain the proper format. Using JSFormat you can format your code just by ctrl + option + f or in case of windows and linux ctrl + alt + f. You can also change the format setting. This package is also available in package control and you can install it the same way.

JavaScript Completions

The JavaScript Completion plugin provides auto completion suggestions when you type or on ctrl + space. Better you try the plugin once and decide if you want it or not. I personally like it; but I’ve seen people who hate it cause the suggestions irritates them. The installing procedure is same as other plugins.

sublime-js-completions

User specific plugins

As there are too so many JavaScript frameworks available in the market and people works in various frameworks and have different requirements; you need to consider installing some plugins according to your work. For an example a Ember.js developer will create .hbs file and will need a handlebars package. Someone else may need typescript for angular. React people can handle their .jsx with babel only.
So whatsoever framework you use, understand your requirements and search packages for those requirements. I’m sure there will be some in the packagecontrol.io community. Even if it doesn’t, there could be other sources who will provide packages to install manually.
Happy coding 🙂

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.