Sublime: Whats under the hood

Alex Bennett 30 November 2017

We all have a favourite text editor and other toolings custom to our preferred setup. It’s often this personalised tooling that helps us be more efficient developers, even if its a pain for anyone else using our machine!

I often come across new tools to use when seeing my colleagues do something seemingly magic in a click or shortcut. I always ask what they just did and how I can incorporate it into my own workflow, usually, it’s some plugin I’ve not come across yet.

Here I’ve compiled my top few plugins for sublime.

Installation

Package Control

First of all, you will need the Package Control plugin. It enables the easy installation, download, and update of packages into Sublime Text.

To install Package Control, follow the instructions found on their website. From there, simply type in cmd+shift+p on a Mac or ctrl+shift+p on Windows, to open the Command Palette. With this open, you can then type Install Package, to install a plugin from the Package Control website or Install Repository to install directly from a repo.

Theme

Afterdark

Afterglow is a minimal theme for sublime. I’ve always prefered reading and writing from darker backgrounds, given I stare at a screen 7+ hours a day I don’t want to strain my eyes too much.

There are many themes out there and sublime is extendable enough that you can make your own easily or edit an existing theme to your preferences. Whilst afterglow is my prefered theme for the UI improvements and the icons in the sidebar, which I find very useful, I actually use a Monakai colour scheme which results in the screenshot below!

Plugins

Sidebar Enhancements

This should be one of the first plugins you install. The default sublime 3 sidebar is, pretty limited in its functionality. Sidebar Enhancements gives you all the options you would typically expect to get when navigation in the tree.

Origami

This package is super useful if like customising your work area, by default sublime cannot give you the same level of UI customisation as the origami plugin. With it, you can create a window anywhere within the work area. I usually like a split column solution, with two windows on the left and one on the right. But it really depends on what I’m working on as to the arrangement of my origami windows.

Babel

Babel is a code highlighting plugin for sublime that does a much better job of highlighting code than default sublime. It’s not perfect for all languages so I do have some specific language highlighters installed, including JSX, EJS and Razor.

Emmet

Emmet should be an essential for all developers unless you’re a hipster and code entirely in vim. It uses snippets and abbreviations to save time writing code, in the example below a single line of css-esc syntax expands to valid HTML markup. It allows for faster navigation through code or useful features like highlighting line ends or closing tags, it is one of the few plugins I couldn’t live without now!

DocBlockr

DocBlockr makes writing documentation easier. It’s something we should all build into our workflow as good practice (not that we always do) but with a simple keyboard shortcut you can have the majority of the documentation laid out in a way any other developer would be comfortable reading from and understanding. It supports pretty much anything you may want to leave detailed documentation for and using it has actually made me a better developer, not just the understanding of my own code but it’s helped me improve how I lay things out and explain things for others.

GitGutter

This hooks into your projects git executable and lets you know what’s going on in a file rather than navigating through command line or some GUI. I find it very handy at the end of a working day as it reminds me I need to commit my work. It’s not an essential plugin but it’s certainly a nice to have.

Sublime Linter

I am suprised this doesnt come out of the box in sublime now, in this crazy work of a new framework/library or language on what seems like a monthly basis the ability to correctly lint the code you write is essential. It speeds up finding bugs and issues and improves the overall workflow. On top of in text editor linting I also use linters in my build process, and whilst I get annoyed everytime I’m told a semi colon is missing it forces me to write consistent and correct code.

There are many other plugins I use but non worth adding to this list in my opinion. Some I installed purly to see if it improved workflow, plugins like Grunt or Git allowed me to do things in the editor rather than command line but having used them I do prefer command line. I’m sure there are more out there too that I might find useful but havent come across yet, if you know if any get in touch on twitter!

Contact

If you have an interesting opportunity or a project in need of a developer, please get in touch: