Sublime Text Plugins and Snippets worth exploring – For the modern day

Monokai Neue

Install this first and proceed because a feature has been really missing in sublime.

I use Sublime text 2 and so far it has been my most favourite text editor. My love for it increases with more features I find. Here is a small collection of my favourite set of plugins and snippets and I hope you’ll love them too.

dedicated to all ‘serious front end developers’

Pro tip: For permanently setting a particular syntax highlighting go for View -> Syntax -> Open all with current extension as... ->[your syntax choice]
Compare Side-By-Side

For comparing 2 files, sublime has a built-in file comparison mechanism. Right click on the tab to find ‘compare with…’  option.

Nevertheless, a text comparison tool is definitely a handier alternative and this plugin brings it inside sublime-text.


Sublime text snippets for angularjs developers.

Javascript Beautify

Isn’t it convenient to have such a utility inside the editor. There are some related plugins that you can also hunt for – json formatter, json highlighter, json /xml prettifier etc.


If you’re working with ES6 too early, then you may like this. This has syntax definitions for ES6 JavaScript with React JSX extensions. You may like Babel Snippets too.

Jasmine Scaffold

This one makes writing your specs breeze. Just write your specs in plain english, indented properly (for describe & it blocks) & hit Ctrl (Win-Alt) (Mac-Cmd) Shift + J.

If you liked that, then you may also find UnitJS even more fun.

Underscorejs snippets

As the name implies, it helps you generate snippets for underscore, a similar package exists for lodash called Vanilla lodash Snippets

There are some more packages that I’ve not explored yet, but will love to, and they are


Dot files Syntax Highlighter

Want ShellScript (Bash) syntax highlighting for your dot files? You’re damn right you do! This plugin is a must for all kinds of developments because you can never get past dot files.


Often times you would have desired to slug selected portion of text, this saves your mind


A blissful creation from sindresorhus – just select your snippet in sublime, then in the command pallete hit “Run JavaScript in the browser”. Further, you can connect your choice of browser. That’s superb for lazy coders like me.


When you’re working with your content provider, tweaking minor texts in the static html files, and when text is all that matters to you, then you will love this – another nifty solution from  sindresorhus. This will totally save your day.

Syntax Highlighting for Sass

Its also available for atom & text-mate.

See also: How to exclude Folders from Sublime Text Search


Sublime text snippets the most loveable feature I’ve ever found. There are plenty out there, to simplify your daily coding activity. You can write your own code snippets too. There is a decent article on Hongkiat on this too. Here are some snippets that will drive you crazy.

Pro Tip: Make it a habit of routinely invoking the Package Controller, cmd/ctrl + shift + p and typing ‘ip‘. This will highlight the Package Installer. Then, you can search for your beloved set of keywords e.g. Emmet, React, Snippets, JS, json, es6, babel, node etc. and hit enter after selection

Comment Snippets

My most favourite snippet, this makes writing documentation headers smooth. It feels like magic. I fell in love with it in the first sight.

React Snippets

The next generation of snippets i.e. in ES6 for programming with React. Just type React.component and it autocompletes with a code snippet with cursors at the right locations to name your component.

JavaScript and NodeJS Snippets

cd, ce, cl, ae and tons of many other shortcuts to autocomplete your code – if you code in JS everyday, you’ll simply fall in love with it.

Jasmine Snippets

If you liked the Jasmine Scaffold plugin mentioned above, you may also like the jasmine snippets. Unlike the plugin, it’s just quick text to help you with the petty stuff.

Angular Material Snippets

Generates Angular Material snippets for <md-button>, <md-input>, <md-icon> as directives referred in the documentation.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s