Essential Sublime Text 2 Plugins and Extensions

Essential Sublime Text 2 Plugins and Extensions

Tutorial Details

Sublime Text 2 is a relatively new code editor that I’ve been trying out for a while now. While it’s still in public beta, it already offers a great mix of features and performance that has convinced me to switch from my trusted Komodo.

While I really do love the features available out of the box, as with most things in life, there is always room for more. With Sublime Text 2 being as extensible as it is, a big ecosystem has sprouted around it, catering to most of your web development needs, be they actually useful or catering to your whimsy. To that effect, today I’d like to share some of the plugins and extensions that I’ve found quite useful. While not all of them may appeal to you, I’m sure you’ll a find a gem or two that will absolutely ease your workflow!


Zen Coding

Nettuts+ -- Essential Sublime Text 2 Plugins and Extensions

Zen Coding is an editor plugin for high-speed HTML coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code.


JQuery Package for Sublime Text

And where will all us be without jQuery? This is a Sublime Text bundle to help with jQuery functions.


Sublime Prefixr

Nettuts+ -- Essential Sublime Text 2 Plugins and Extensions

A plugin that runs CSS through the Prefixr API, written by our very own Jeffrey Way, for Sublime Text 2.


JS Format

JsFormat is a javascipt formatting plugin for Sublime Text 2. It uses the commandline/python-module javascript formatter from JS Beautifier to format the selected text, or the entire file if there is no selection.


SublimeLinter

Nettuts+ -- Essential Sublime Text 2 Plugins and Extensions

SublimeLinter is a plugin that supports “lint” programs (known as “linters”). SublimeLinter highlights lines of code the linter deems to contain (potential) errors. It also supports highlighting special annotations so that they can be quickly located.


Placeholders

I always find inserting placeholder, or filler, content to be a quite tedious affair. With this plugin, you can insert placeholder content and HTML in a cinch!


Sublime Alignment

Nettuts+ -- Essential Sublime Text 2 Plugins and Extensions

I’m quite a stickler for properly formatted code. One thing to get right is lining up all those darn variable assignment so they look all organized and neat. With this plugin, all it takes is the press of key. A simple key-binding allows you align multi-line and multiple selections.


Clipboard History

Tired of having to swap out your clipboard’s contents during a marathon hackathon? Keep a history of your clipboard items with this plugin and paste away as needed.


SublimeREPL

Nettuts+ -- Essential Sublime Text 2 Plugins and Extensions

SublimeREPL lets you run your favorite interpreter inside a Sublime buffer. Languages supported include Python and Ruby.


DetectSyntax

DetectSyntax is a plugin for Sublime Text 2 that allows you to detect the syntax of files that might not otherwise be detected properly. This is specially helpful when you run into custom file formats — files used in templating is an excellent example.


Nettuts Fetch

Nettuts+ -- Essential Sublime Text 2 Plugins and Extensions

This plugin automatically pulls in the latest copy of a file, simply by typing a keyboard shortcut. It’ll perform a curl request to your specified URL and allow you to rest assured that, for all new projects, you’re using the latest copy of a particular asset.


JsMinifier

It’s a good practice to always minify your files during deploying to a production server. And this plugin will swiftly automate the process by minifying your JavaScript using the Google Closure compiler.


Sublime CodeIntel

Nettuts+ -- Essential Sublime Text 2 Plugins and Extensions

SublimeCodeIntel is a code intelligence plugin ported from Open Komodo Editor to Sublime Text 2. It shows autocomplete information with the available modules in real time as well as display information about the current function in the status bar. Nifty!


Tag

This is a great plugin when you’re working with a lot of markup. Tag is a collection of packages about, predictably, tags, mixed together in an effort to provide a single package with utilities to work with tags. Close a tag on a slash and tag indenting? Sign me up!


Bracket Highlighter

Nettuts+ -- Essential Sublime Text 2 Plugins and Extensions

This plugin collection includes plugins to fold your code according to brackts, cycle through selecting tags and many more.


Case Conversion

Have a messy co-worker who completely ignores naming conventions? This plugin should save you a good chunk of time. Case conversions converts the current word between three of the most commonly used conventions.


Stackoverflow Search

Nettuts+ -- Essential Sublime Text 2 Plugins and Extensions

StackOverflow is an absolute life saver — I can’t count the sheer number of times it has saved my skin. This plugin lets you do a search on SO directly from your editor.


Sublime Guard

Remember Jeffrey using a gem called Guard in his super useful Rails tutorial? Well, this plugin provides a seamless interface for controlling Guard and viewing Guard output within Sublime Text 2.


Git

Nettuts+ -- Essential Sublime Text 2 Plugins and Extensions

A nifty little plugin that integrates Git and Sublime Text and implements most of the commands that you’d use in real life. Diff viewing inside ST2 is a great time saver!


Sublime Change Quotes

This is one for the OCD among us. This plugin converts single to double or double to single quotes whilst attempting to preserve correct escaping.


Hex to HSL

Nettuts+ -- Essential Sublime Text 2 Plugins and Extensions

Tired of constantly having to manually convert your colors’ hexcodes to HSL? This plugin will automatically do it for you with the press of a button. Well, ok, three buttons. [Shift+Ctrl+U]


That’s a Wrap!

Well, that’s about all the plugins and extensions that I use on a daily basis. Considering the teeming ecosystem that Sublime Text 2 boasts, I’m sure I’m missing a ton here. Let us know in the comments and thank you so much for reading!

Siddharth is Siddharth on Codecanyon
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Anthony

    Does anyone know how to convert this:

    Bermuda (+1441)
    Bhutan (+975)
    Bolivia (+591)

    to this:

    Bermuda (+1441)
    Bhutan (+975)
    Bolivia (+591)

    without doing it all manually?

    • kp

      What’s the difference?

      • Pepe

        The difference is the speed with which he has written Bermuda

  • Kuśnier

    I’m a n00b here and still learn basics with coding and all that stuff, but I have to say, I am very happy that I can work with such a grate and advanced soft as ST2. I am a Win 7 user and didn’t have any issues with Sublime since first day. It is little bit advanced in use but there are all that quick tuts in here, about control package and other stuff. I am just pleased with it…

  • ok

    hi every body

  • http://www.designnorth.ie Liam

    Awesome editor, is there any plugins that allow image previewing or even simple info such as width and height from the sidebar context menu?

    • Rotimi

      +1 to this question. This would really help my transition from Espresso.

  • http://www.krsiak.cz/ Krsiak Daniel

    this tutorial helped me to learn how to use and install plugins in ST2
    thanks

  • http://dstibrany.github.com Dave Stibrany

    Jump to your last edit point/points:

    https://github.com/SamPeng87/sublime-last-edit

    Awesome plugin! Should be part of the core.

  • Vuk

    Thanks for this great article.
    ST is my favorite code editing tool ever.

    I would like to know is there a way to wrap a selection with a function?
    I know that there is a way to wrap a selection in a HTML tag but I need something similar that would set parentheses around my selection and let me type the function name.

    Thanks :)

    • http://digitalnacarolija.net Tomica

      Here’s a snippet that can do that:

      function

      Поздрав, Вуче :)

    • http://digitalnacarolija.net Tomica

      Hum, my code was deleted. I’ll try again:

      function

  • http://www.designhills.com prathap937

    Bidirectional text support for Sublime Text 2
    supporting bidirectional languages like Arabic, Hebrew etc
    https://github.com/praveenvijayan/Sublime-Text-2-BIDI

  • moshood

    @Admin: I went through you video tutorials on fundamentals for web designing, it has fantastic!

    But I am having problem with zen coding aspect for the sublime text editor. I will be glad for a step by step approach in doing that.

    Thanks

  • mdbGalvan

    Esta genial el tutorial, muy bien explicado y muy interesante los paquetes elegidos.

  • http://twitter.com/haringsrob Harings Rob

    Great list!

  • tasyfinso

    thanks …great post

  • Donny van Grondelle

    Damnnn… I loved dreamweaver. When i went to school and my teacher sayed: if u ever use dreamweaver again i will kick you away from school… Now i used Sublime Text and watched some tutorials, it makes a lot more sence why he says that. Sublime is the best editor i ever used

    • http://www.facebook.com/vinaynkashyap Vinay Kashyap

      I love DW too but after using SublimeT2 i feel DW makes you lazy and slow… :(

  • Keir Lavelle

    Wow I had no idea about Zen Coding, i’ve just installed it and.. just wow.

  • http://www.facebook.com/alwinaugustin Alwin Augustin

    any good ftp plugin for ST2 ?

  • Angus Moore

    AWESOME!!!! :D

  • http://www.facebook.com/vinaynkashyap Vinay Kashyap

    This tutorial is up for sometime now and i think it is time for part – 2 of the list…

  • Jezza

    How about code comparison for sublime t2?

  • Ade Malsasa Akbar

    Yes, awesome editor. From these features you tell here, I feel “teased” to use it :D Yeah, although I am not a programmer.

    Thank you for complete review.