Top Sublime productivity plugins for coding efficiency

12 November, 2013 by Tom Elliott

I’ve been working with Sublime Text 2 for less than a year (late the the party I know) but I’m completely hooked and always trying to find ways I can use Sublime to help me become a faster and more efficient coder.

One of Sublime Text’s many great features is the multitude of plugins/packages readily available, along with the community of devs that create and support them.

This is a list of some of the plugins I use as a web developer, that I think really help my productivity and help me code faster.

1. Package Control

Before you install any plugins in sublime, Package Control is an absolute must that allows you to manage all your packages/plugins through a few keystrokes.

Once installed, press Ctrl+Shift+P or Cmd+Shift+P (mac) and ‘Install package’ to bring up all packages available in the repository.

Get package control

2. Emmet (formerly Zen Coding)

Emmet is a dream to work with for any web developer looking to greatly reduce their keystrokes in both HTML and CSS. HTML abbreviations along with fuzzy logic for CSS are very powerful features that, with a bit of practice, can greatly improve coding efficiency.

Let’s say you wanted to create the following structure in HTML:

<div id="foo">
    <ul class="nav">
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

You might be used to typing ‘div’ or ‘ul’ followed by tab for example to create those nodes. This does make coding quicker but still involves a fair amount of typing. To create the same structure with Emmet, all you need to do is enter the below followed by tab.

div#foo>ul.nav>li*5>a

That’s only 21 characters compared to 161, a huge time saver! Not only that, Emmet will allow you to tab between key points – in this case the a href and a values.

It’s quite easy to see what’s going on with this example. The hash ‘#’ and dot ‘.’ symbols create the ids and classes, the greater than ‘>’ symbol will create following HTML elements as a child and asterisk ‘*’ repeats elements. Other useful operators include plus ‘+’ to append another element at same level and brackets ‘()’ to group elements.

Here’s an example of CSS with Emmet. Consider:

#foo {
  width: 100px;
  height: 200px;
  margin: 10px;
  padding: 20px;
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

This can be created by inputting:

#foo {
  w100+h200+m10+p20+ps:abs+bxsz
}

Again, 36 chracters compared to 162. All you need to do is type a few characters of the style you want, followed by a value (if relevant) and Emmet will try and work out what styles you’re trying to create with fuzzy logic. It will also set multiple cursors and tabbing where relevant.

Get Emmet for Sublime

3. Language specific packages

Whatever language or platform you work with, there’s usually a plugin full of snippety goodness waiting for you to explore. Take the ‘JQuery Package for Sublime Text’ package – start typing ‘$ready’ followed by tab and up pops the following code:

$jQuery(document).ready(function($) {

});

4. AutoFileName

One of the (very few) things I missed when switching to Sublime from Dreamweaver was the ability to drag and drop assets, files and images from the file panel into code view.

AutoFileName in my opinion is just as good, if not better, than Dreamweaver drag and drop as it removes the need to use the mouse to insert assets. When entering an img src="", a href="" or background-image:url(...); for example, a mini file browser will appear that allows you to (fuzzy) search and select assets.

Inserting images will even display and create the width and height parameters automatically.

Get AutoFileName

5. Browser Refresh

I normally use a dual monitor setup with the Sublime code window on the left and browser window on the right. Before Browser Refresh, I had to manually move the mouse (such a chore!) to activate and refresh the browser to see code updates.

Browser Refresh allows you to save, upload (if setup to do so) and refresh the browser window all with a single key stroke. It works on the current active window and brings the browser to the front of any other open programs.

If BrowserRefresh is not working, there’s a good chance the default shortcut Shift+Alt+R conflicts with the Emmet key bindings so you’ll want to change this if you have Emmet installed.

Get Browser Refresh

6. Alignment

Mis-aligned chunks of code can be a real eyesore! If you’ve found yourself frequently placing the cursor on multiple lines of non-aligned code before tabbing or spacing, then you should checkout Alignment.

Alignment allows you to select and indent multiple lines at once at the same level using the default shortcut Ctrl+Alt+A.
Get Alignment

7. Clipboard History

Clipboard history does just what the name suggests. Copy multiple and separate bits of code and quickly recall any one of them through a few quick key presses, default recall being Ctrl+Alt+V.

Get Clipboard History

8. Sidebar Enchantments

Whilst I’m trying to move to a keyboard only approach, I still find I need to use the sidebar on occasion and sidebar enhancements gives you many additional features that don’t come natively with Sublime such as duplicating files and creating new folders.

 

These are my current favourite productivity plugins but I’ve probably missed out some great ones. Which plugins do you like to use that help you code faster in Sublime Text?

Related article: 13 Reasons to use Sublime over Dreamweaver

---

---