I wanted to put together a list of the top plugins for Sublime Text 3 that I’ve come across in the last couple of years. There are plenty of them, but some of them stand out because they’re applicable to almost all web development projects I work on. This list is a language-agnostic collection of features that could make your life a lot easier — in the sense that you’ll end up pressing less keys to get the same amount of stuff done. No language-specific pre-compilers — just ST3 productivity loveliness.
TAPevents does in-house development for various conference and event apps, we use mostly CoffeeScript and Meteor. Check some of our open source stuff out on github.
If you’d like to install any of plugins covered in this post, either check the links at the bottom of the page or search for the package names using sublime package manager.
Without further ado let’s crack into them. There’s no particular order here, so be sure to check them all out.
This plugin gives you realtime info about the difference between your last commit and your current code. A green ‘plus’ symbol appears next to new lines, and red arrows indicate removed lines. It’s great for narrowing down what’s being worked on right now in your current file – extremely useful for narrowing down lines for debugging, and it helps out with general navigation. The result overall is less head-scratching, it encourages me to commit early and often, and it pretty much guarantees I never accidentally commit additional lines of whitespace!
Linters are great for ensuring a minimum standard for the code you write. This plugin will, in realtime, highlight lines of code that have syntax errors as you type – or even stylistic divergence should you enable that option. It’s almost like a spellchecker for your code.
Before I used this plugin, I would often save work not noticing a syntax error – I would then waste a few seconds having to go back and find the typo, then fix it, then rebuild, then step through my application. Now SublimeLinter spots all of those typos for me, so I spend spend about 0 seconds fixing the problem as opposed to the potential (many) minutes it would take to find that stray comma. We’ve all been there, but I shall never go back there now I’m using a linter.
This plugin can take a bit of setting up to get to your preferred level of notification – but it’s totally worth it.
Now I don’t use this one all that often, but it’s one of those tools that can save your life when the time comes. A bit like a plunger.
There is no reason that you couldn’t use a 3rd party diff tool to do exactly the same as this plugin (or better), but why download an app you rarely use when this plugin is good enough for the majority of cases. It’s super simple to track down the difference between files or strings in a fraction of the time and in an intuitively visual way. Here’s a couple of scenarios:
You have a non-source-controlled library and want to migrate to an updated version? It’s probably worth just doing a quick check to summarise what’s changed. Just copy the new version to your clipboard, have the old version open in ST, and `Shift Cmd P`, `diff`, and boom – instant highlight of the lines that are different.
Have a text file that a colleague edited but you’re not sure what changed? Do the same thing.
Again, the use-cases are limited, but this is a super useful tool when you need it. Can you think of any other examples?
This one isn’t for *every* project necessarily, but in web development — you’d better believe it will make you happy. How many times do you plan to edit HTML? Well, if that number is greater than 0, it might be worth installing this bad boy.
This one really is magic and one of my favourite plugins of all time. I found out about this back when it was called ‘Zen Coding’, but you won’t need to waste time meditating to reach enlightenment with this one — just hit tab. It’s essentially a way of writing HTML in shorthand, and then instantly converting it to full html. It’s really powerful; you can write complex patterns of HTML – an entire DOM, no less, in a single line; it’s useful at all stages in a project that involves HTML.
In the screenshot above, I’ve written a simple example of what’s possible – imagine how long it’d take to manually write out all of that HTML with the freaking square brackets and backslashes. Come on, is this 2007? Well – with Emmet it’s just super quick. Once you type out your shorthand version, you can hit tab, and it will convert it into full HTML and automatically place the cursor in the first empty node — which is H1 in this case. Then you can type your title, hit tab again, and it will go to the next empty node. This system lets you construct your markup *extremely* quickly.
Install via Sublime Package Manger:
Last but not least, a prettification tool should be in the utility belt of any self-respecting web developer. It’s essential for day-to-day work and *will* save you countless hours after only a few months of use. It will keep other developers happy because your code is always nice and tidy. It will make your code more readable to yourself. It will make parsing malformed or minified code a million times easier. It’s the WD40 of messy code.
Prettifying will automatically indent and whitespace any file you throw at it, generating a perfectly standardised file that’s as easy as possible to read. There are versions of this that only target HTML, JS or CSS, but this one does all 3 — plus JSON, Coffee, and many others.
So, that’s it. To summarise, I’ve presented my personal favourite productivity plugins for use with Sublime Text 3 — if you value your own time I’d recommend giving them a try:
Let me know if you found this useful (or not). Is this list totally out of date? Do you have any other suggestions for productivity boosting plugins for Sublime Text 3? Shout out in the comments section if you would like to share your thoughts.