Web Development by Solarise

The Solarise.dev Blog

7 Really Useful Plugins for Sublime Text (Which I Actually Use)

Blog archive Robin Metcalfe 12th December 2017

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.

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 the Prettify package in action 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.

Markdown formatting 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.

Pandoc 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 the Emmet package in action in Sublime text, showing code expanding from shorthand
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 the Text Pastry package in action 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 the DocBlockr package in action 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.
Author Image

About the author

Robin is the dedicated developer behind Solarise.dev. With years of experience in web development, he's committed to delivering high-quality solutions and ensuring websites run smoothly. Always eager to learn and adapt to the ever-changing digital landscape, Robin believes in the power of collaboration and sharing knowledge. Outside of coding, he enjoys diving into tech news and exploring new tools in the industry.

If you'd like to get in touch to discuss a project, or if you'd just like to ask a question, fill in the form below.

Get in touch

Send me a message and I'll get back to you as soon as possible. Ask me about anything - web development, project proposals or just say hi!

Please enable JavaScript in your browser to complete this form.

Solarise.dev Services

Maintenance Retainers

Min 3 hours per month, no contract

Project Planning

Get in touch to discuss your project details

Consultancy

Face-to-face chats. Solve your problems!