Be the first user to complete this post

Add to List

Sublime Text plugins to boost your productivity

The tools that you use to create products have a large impact on your productivity and therefore you happiness. I have been using sublime text for quite some time now and I am thoroughly impressed by the way its various plugins have helped me become more productive over time. You will probably want to install several packages in sublime text to increase your productivity. But before that you first need to install the package manager itself if you haven't already done that from the instuctions available here. The next thing that you gotta know is how to use the package manager. You open it from the command palette by pressing Ctrl+Shift+P. More instructions can be found here.

Plugins

In the paragraphs that follow, I am going to briefly describe some of the plugins and options that I use and maybe you will discover some gems in it.

Emmet

Emmet, earlier knows as zen coding is one the most awesome plugins out there for html authoring. You can build entire nested html structures by just typing a single line. Checkout the emmet website.

Origami

Have too much screen space? Are the default vertical and horizontal layouts in sublime text not to your liking? Would you rather prefer a mixed layout? Just install Origami, and with just a few keyboard shortcuts, you can create ANY kind of layout in a snap. Here are some keyboard shortcuts. Hot commands: First press Super + K then press any of the following key combinations

Super + ArrowKeys: To create a pane in the direction of the arrow.
Super + Shift + Arrow keys: To delete a pane that is in the direction of the arrow.
Super + Z : Zoom in the current pane to 90% screen size
Super + Shift + Z: Zoom out any zoomed in pane. Checkout the github repo for full details.

MarkdownEditor

Edit your markdown from within sublime text with all the fancy bracket matching etc etc.

MarkdownPreview

Once you are done editing, you might want to preview this in the browser before you actually post it. Or you can export the preview html to the clipboard too. Thats how I format most of my articles 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 sidebar context menu. You can also configure files and directories (e.g. node_modules, build directories) that need to be ignored.

jshint gutter

If you any sort of front-end dev, knowing that you have issed in your javascript code can help you identify and fix silly errors at blazing speeds. Install this package, then configure it to lint every 20 seconds.

ColorPicker

If you find yourself using the colorpicker tool from the dev tools to set your CSS colors, know that there is a slightly better way to do that by installing this pluging. Once installed, simply press Ctrl+Shift+C and a modal color picker dialog will appear on your screen to visually select colors. Checkout the docs for screenshots.

Gutter color

Want to a tiny little preview of the color that you specified in the CSS in the left gutter? Check it out here.

DocBlock

This plugin will help you write your function documentation by smartly inserting a template into which you can add information. Check out the github repository for all the awesome things it can do.

SCSS

SCSS helps you write your CSS faster. How about some cool auto-completion shorctuts for all of your css properties? This plugin is based upon some of the ideas in the original textmate plugin. ProTip: Once you are done typing your shortcut, simply press Ctrl+Enter to go to the next line without having to go past the semi-colon.

Sidebar Enhancements

The default sublime sidebar has just too few options. If you need more, just install this one.

Tutorials

If you are a complete newb, here are some tutorials to help you get started with it.

Some Tips

1. Column selection for sublime text.

Win/Mac: Middle click and drag.

2. Changing the number of spaces that the tab key indents.

Add these values to the user preferences { "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 Windows, and Ctrl+W on a mac.

4. Paste with indent: Ctrl+Shift+V

5. Goto a particular class or a function: (Ctrl+R) or (Ctrl+P and then type @)

6 Goto occurrences of words (Ctrl+P and then type #)

sublime text 1