Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

Sublime Text plugins to boost your productivity

The tools that you use to cre­ate prod­ucts have a large impact on your pro­duc­tiv­ity and there­fore you hap­pi­ness. I have been using sub­lime text for quite some time now and I am thor­oughly impressed by the way its var­i­ous plu­g­ins have helped me become more pro­duc­tive over time.

You will prob­a­bly want to install sev­eral pack­ages in sub­lime text to increase your pro­duc­tiv­ity.
But before that you first need to install the pack­age man­ager itself if you haven’t already done that from the instuc­tions avail­able here.

The next thing that you gotta know is how to use the pack­age man­ager. You open it from the com­mand palette by press­ing Ctrl+Shift+P. More instruc­tions can be found here.


Plu­g­ins

In the para­graphs that fol­low, I am going to briefly describe some of the plu­g­ins and options that I use and maybe you will dis­cover some gems in it.


Emmet

Emmet, ear­lier knows as zen cod­ing is one the most awe­some plu­g­ins out there for html author­ing. You can build entire nested html struc­tures by just typ­ing a sin­gle line. Check­out the emmet web­site.


Origami

Have too much screen space? Are the default ver­ti­cal and hor­i­zon­tal lay­outs in sub­lime text not to your lik­ing? Would you rather pre­fer a mixed lay­out? Just install Origami, and with just a few key­board short­cuts, you can cre­ate ANY kind of lay­out in a snap. Here are some key­board short­cuts.
Hot com­mands: First press Super + K then press any of the fol­low­ing key combinations

  • Super + ArrowKeys: To cre­ate a pane in the direc­tion of the arrow.
  • Super + Shift + Arrow keys: To delete a pane that is in the direc­tion of the arrow.
  • Super + Z : Zoom in the cur­rent pane to 90% screen size
  • Super + Shift + Z: Zoom out any zoomed in pane.
    Check­out the github repo for full details.

Mark­downEd­i­tor

Edit your mark­down from within sub­lime text with all the fancy bracket match­ing etc etc.


Mark­down­Pre­view

Once you are done edit­ing, you might want to pre­view this in the browser before you actu­ally post it. Or you can export the pre­view html to the clip­board too. Thats how I for­mat most of my arti­cles here.


sftp

Make it super easy to upload your files to a file server while you’re ediring. Once installed, setup the ftp path from the side­bar con­text menu. You can also con­fig­ure files and direc­to­ries (e.g. node_modules, build direc­to­ries) that need to be ignored.


jshint gut­ter

If you any sort of front-end dev, know­ing that you have issed in your javascript code can help you iden­tify and fix silly errors at blaz­ing speeds. Install this pack­age, then con­fig­ure it to lint every 20 seconds.


Col­or­Picker

If you find your­self using the col­or­picker tool from the dev tools to set your CSS col­ors, know that there is a slightly bet­ter way to do that by installing this plug­ing. Once installed, sim­ply press Ctrl+Shift+C and a modal color picker dia­log will appear on your screen to visu­ally select col­ors. Check­out the docs for screenshots.


Gut­ter color

Want to a tiny lit­tle pre­view of the color that you spec­i­fied in the CSS in the left gut­ter? Check it out here.


DocBlock

This plu­gin will help you write your func­tion doc­u­men­ta­tion by smartly insert­ing a tem­plate into which you can add infor­ma­tion. Check out the github repos­i­tory for all the awe­some things it can do.


SCSS

SCSS helps you write your CSS faster. How about some cool auto-completion shorc­tuts for all of your css prop­er­ties? This plu­gin is based upon some of the ideas in the orig­i­nal text­mate plu­gin. Pro­Tip: Once you are done typ­ing your short­cut, sim­ply press Ctrl+Enter to go to the next line with­out hav­ing to go past the semi-colon.


Side­bar Enhancements

The default sub­lime side­bar has just too few options. If you need more, just install this one.


Tuto­ri­als

If you are a com­plete newb, here are some tuto­ri­als to help you get started with it.


Some Tips

1. Col­umn selec­tion for sub­lime text.


Win/Mac: Mid­dle click and drag.


2. Chang­ing the num­ber of spaces that the tab key indents.

Add these val­ues to the user pref­er­ences
{
“tab_size”: 2,
“translate_tabs_to_spaces”: false
}


3. To wrap a tag around some text, select the text and then press Alt+Shift+W on Win­dows, and Ctrl+W on a mac.


4. Paste with indent: Ctrl+Shift+V


5. Goto a par­tic­u­lar class or a func­tion: (Ctrl+R) or (Ctrl+P and then type @)


6 Goto occur­rences of words (Ctrl+P and then type #)


Ryan Sukale

Ryan is a UX engineer living in San Francisco, California.