Be the first user to complete this post
|
Add to List |
Sublime Text plugins to boost your productivity
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
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 #)
Also Read:
- Dynamic module loading with require
- Chromium flag to by pass the popup to grant media permissions in webRTC
- Use es6 and es6+ in eslint with babel
- Disable eslint no-unused-vars warning on global functions