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.

Package Control Plugin

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.

AutoFileName Plugin

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 Plugin

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.

Clipboard History Plugin

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.

Sidebar Enhancement Plugin

 

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



7 Comments

  • Thank You for your above information. The best way was that you explained in detail and step by step with images.

  • fuat says:

    Thank you . Good post.

  • Abhinav says:

    You should try LiveStyle. It shows the CSS changes in real-time via a Chrome extension.

  • Martijn says:

    Good post, but do you know if it is also possible to drag and drop files within the sidebar?
    example: when importing jquery.js library I cant just drag and drop it into the sidebar..

  • Mitchell Alexander says:

    for the sixth (ALIGNMENT), I always use HTML/JS/CSS Prettify.

  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    css.php