SOLARISE
DEV

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.

Screenshot of Package Control install process in Sublime Text
Installing packages via Package Control

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.

Animation of HTML-CSS-JS Prettify plugin in Sublime Text
To pull down the Sublime shortcut menu, hit 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.

Screenshot of MarkdownEditing plugin in Sublime Text
I N C E P T I O N

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.

Screenshot of Pandoc plugin functionality in Sublime Text
Here we go again…

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.

Animation of Emmet plugin expanding shorthand code in Sublime Text
To trigger the Emmet autocomplete, hit 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:

Animation of Text Pastry plugin for multi-line editing in Sublime Text
To open up the Text Pastry input box, press 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.

Animation of DocBlockr plugin generating DocBlocks in Sublime Text
To trigger the DocBlockr autocomplete, type /** 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.
Robin Metcalfe

About the Author: Robin Metcalfe

Robin is a freelance web strategist and developer based in Edinburgh, with over 15 years of experience helping businesses build effective and engaging online platforms using technologies like Laravel and WordPress.

Get in Touch