7 Essential Sublime Text Plugins for Enhanced Productivity (That I Actually Use)
Boost Your Coding Workflow with These Handpicked Sublime Text Extensions
There are plenty of lists of must-have plugins for Sublime text out there, but I thought I’d make a small list of those that I actually use on a day-to-day basis and which I feel give me a real productivity boost. Hopefully you’ll find some of these genuinely useful.
First, install Package Control
To use these packages, I’m assuming you know about Sublime Text’s package manager, and how to install and setup plugins. If not, check out this simple little guide – It shouldn’t be any more complex than a quick copy/paste.
Once you have Package Control installed, to install a package, bring down the Command Pallette (Tools > Command Palette or use the keyboard shortcut, e.g. Ctrl+Shift+P)
Type "Install", which should bring up the appropriate item (Package Control: Install Package), hit return and then after a short pause, you’ll be prompted to start typing a package name. Type any of the following package names into this box, and you’ll be able to select and install them, straight from the menu.
1. HTML-CSS-JS Prettify
It can be time consuming manually formatting code, making sure your indents are all proper and correct (never mind the whole tabs vs. spaces argument) and generally is handy having a tool which can quickly sort out your tangle of HTML or CSS and turn it into something more visually appealing.
Alt-P
(or whatever shortcut you’ve configured)2. MarkdownEditing
Neatly format Markdown files with a max-column width, show the effects of e.g. bold or italic text. Generally, just make Markdown editing in Sublime a neater and more enjoyable experience.
Markdown is an excellent way to quickly produce well-formatted content, and is lightweight and portable. Especially when combined with a plugin such as Pandoc, it makes editing and managing documentation & content a lot more straightforward.
3. Pandoc
If you regularly provide documentation to clients, this is a must-have. Especially if you want to send them nicely formatted Word documents, or PDFs, it can become a real pain trying to keep seperate files up-to-date, and editing Word docs especially can be a formatting nightmare.
With the Pandoc package for Sublime Text, you get access to a quick way of rapidly converting various file formats into PDF, Word Docs, HTML etc. Specifically, I find the Markdown > PDF conversion very useful, as it means I can keep markdown files (small, lightweight, easily editable) stored within my project files, and quickly output a client-friendly PDF whenever I need to send them an update.
These files can be tracked in version control, and because they don’t have the overhead of formatting that e.g. Word docs have, can act as a straightforward way to track product documentation, notes, or anything else you might want to quickly reference during the course of a project.
Definitely one of my top picks.
4. Emmet
A must-have, in my opinion. Quickly expand shorthand CSS-list syntax to create complex HTML structures, complete with attributes, tag names and more. A handy reference is available here.
Emmet is a brilliant tool for quickly building otherwise verbose HTML layouts. Especially if you’re not keen on using an HTML abstraction layer such as HAML, it’s an easy way to quickly build up templates from scratch, and a great time saver.
Tab
5. Text Pastry
Text Pastry? Yes. I’m not entirely sure where the name comes from, but in essence, this plugin extends Sublime Text’s powerful multi-edit functionality, the ability to edit multiple lines of text at once.
With Text Pastry, you’re able to run operations across multiple lines with incremental properties. For example, you can add incrementing numbers to lines, insert the days of the week or generate date and number ranges.
It may seem counterintuitive at first, but once you get the hang of it, combined with a plugin like Emmet, you can really enhance your workflow.
See this gif for some examples:
Ctrl+Alt+N
(on Windows)6. Terminal
A fairly simple package, but useful if you do a lot of work with the command line (e.g. running tasks with tools such as Grunt or Gulp, or other CLI-based systems such as Laravel’s Artisan tool, or WordPress’ WP-CLI).
All this does is provides a quick and easy shortcut to open a terminal window in whatever directory the current file resides, by tapping Ctrl+Alt+T (or whatever shortcut you’ve set it to under Preferences > Packages).
7. DocBlockr
Documentation is very important on large projects. Even on smaller ones, it can provide a handy reference when jumping back into files and functions after a short or long absence.
There’s several schools of thought on how best to approach documentation in PHP, but the best I’ve found is the DocBlock.
DocBlocks can be cumbersome to type out repeatedly, and it becomes especially time consuming if you have a lot of classes & methods. This little Sublime text plugin allows for easy autocompletion. Simply type /**
then hit Tab and you’ll see a lovely little pre-populated DocBlock appear.
Fill it with values according to the DocBlock syntax, and you’re good to go.
/**
then hit Tab
Some "Nice To Haves"
There are some other packages that, while not offering anything extra in the way of functionality, add a nice extra layer of shine to your Sublime IDE experience:
- Word Count – display a realtime updating count of the words in the currently open document in the footer status bar.
- SidebarEnhancements – Adds some additional functionality to the sidebar, such as enhancements to the file creation process, moving files, refreshing and more. A great addition to complement Sublime’s existing file browsing functionality.
- CanIUse – The CanIUse website is an essential resource for front-end developers to check up on the compability of features with a range of browsers. This package adds the functionality directly into the UI via the right-click menu so you can quickly check up on any feature’s compatibility.
- ColorPicker – Implements a color picker directly into Sublime’s UI, allowing you to use the OS’s native color tool to drop color reference values directly into your code.