Leveling Up Your Sublime Text Through Packages

I love Sublime Text. It is my go-to text editor for coding websites. It’s a spectacular piece of software that the majority of our front end development team here at Delphic uses on a daily basis. One of the best parts of Sublime Text? Packages: a collection of resources that gives you the ability to add new features to your editor. 

To install Packages, you must first install Package Control. This will allow you to browse through Packages while in Sublime Text itself, which is a nice way to search without leaving your code editor. Now that you have Package Control installed, let’s go through some of the Packages that I’ve found to be efficiency life-savers in my daily workflow: 


Want to increase the speed by which you code? Do you dream of being able to create an entire html document structure with one character? Want to get the width and height of an image without checking the image size in Photoshop? Look no further, Emmet can do all of this and a whole lot more. Emmet is best known as “an essential toolkit for web developers to improve HTML and CSS workflow”, and I can’t agree more. Check out their cheatsheet for some of the abbreviation shortcuts that can be used to save time. 

Emmet LiveStyle

This magical package known as LiveStyle has finally created a bridge between code edits made in the browser developer tools and Sublime Text. And when you make code changes in Sublime Text, they automagically update the webpage in the browser – live bi-directional CSS code editing!! Previously, I would make adjustments to a web page layout through the dev tools and then copy over the new styles to my code editor manually, but using LiveStyle eliminates that manual step completely. 


Sublimerge is a great tool for debugging and doing diffs and merges with multiple code files. It’s diff highlighting makes traversing documents very easy to read. This can be a lifesaver when you are working with inherited projects, or on code that was not previously in version control, as it gives you an efficient way of comparing and debugging code.

Bracket Highlighter

The Bracket Highlighter is a subtle feature that can be very helpful while coding. When clicking next to an open curly bracket, square bracket, parentheses, or quote; it will highlight the corresponding closing character. While in the midst of coding, this can be very helpful in saving you time (especially while you are debugging).

These are just a few of the Packages that have made me a more efficient coder in my everyday workflow, and we’ve only scratched the surface of the wonderful features that Sublime Text offers. It’s all about learning the little tweaks that will pay big dividends over the life of a project.

Have you found a Sublime Text package that you can’t live without? Let me know in the comments below! 


« Prev Article
Next Article »