Sublime Text plugins to boost your productivity
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.
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, 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.
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.
Edit your markdown from within sublime text with all the fancy bracket matching etc etc.
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.
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.
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.
Want to a tiny little preview of the color that you specified in the CSS in the left gutter? Check it out here.
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 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.
The default sublime sidebar has just too few options. If you need more, just install this one.
If you are a complete newb, here are some tutorials to help you get started with it.
- Perfect workflow for sublime text 2 at Nettuts.
- Sublime text tips and tricks at Nettuts.
- Manage code snippets using gists
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
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 #)