14 Best Sublime Text Plugins

As a developer, by far my favorite code editor is Sublime Text. This is due not only to its simplicity and pricing (free), but to the number of plugins that are available to increase its power to the sky. These plugins facilitate my coding so extensively that I can hardly imagine myself coding without this kit.

This is why I am here — I want to share with you a few plugins that I find more useful to use within sublime text, which can impact the speed & productivity of your projects.

Related: Why Should You Hire a Professional Web Developer?

Package Control

Package control is the base used to install all plugins and manage them in a very easy way. This is the first and most essential plugin you should install into sublime to get the other extensions to work.

To install Package Control, you can follow the simple instructions provided in their site. Once installed, you can press CMD + SHIFT + P (Mac) // CTRL + SHIFT + P (Window) and then select whether you want to install or uninstall a package by searching for those words “Install Package,” or “uninstall Package.”

If you are looking to install a package, after clicking on Install Package, a list of all of the packages available will populate on the same search box from which you can select.

Snippets

Snippets are a great way to speed up code. You can either create your own or download plugins that contain a bunch of snippets, useful for different languages or frameworks you are working on. The basic use of this is to write the word and press tab; then, a complete line of code will be populated.

Emmet

Emmet is by far the greatest snippet plugin used across a majority of code editors such as sublime, coda, visual studio, and others. This plugin enables fast coding snippets for HTML and CSS, which are built by using abbreviations expanded in full tags.

 

Emmet uses a specific syntax in order to expand small snippets of code (similar to CSS selectors) into full-fledged HTML code. For example, the sequence:

div#page>div.logo+ul#navigation>li*5>a

Expands into:

<div id=“page”>

   <div class=“logo”></div>

   <ul id=“navigation”>

         <li><a href=“”></a></li>

         <li><a href=“”></a></li>

         <li><a href=“”></a></li>

         <li><a href=“”></a></li>

         <li><a href=“”></a></li>

   </ul>

</div>

jQuery

As for the fans of jQuery, this snippet provides a full list of all jquery’s most used functions. These functions are easily executed by simply typing the beginning of the method, which populates a list of possible outcomes to choose from (see example below).

After selecting which method to use, it will spit out the full function for you to fill out.

Bootstrap 4 Snippets

If you prefer using bootstrap as your CSS framework to build your sites, this plugin could be of great help to you. Bootstrap 4 snippets provide a full list of snippets from the grid, buttons, utilities, and/or anything within the bootstrap classes.

Visual Enhancements

Sidebar Enhancements

Sublime Text by default comes with a very limited sidebar; renaming files is even a stretch. Thanks to Sidebar Enhancements you can delegate great power to the sidebar, giving it the possibility to open files in different applications, duplicate them, delete them, and perform other various actions within each of your files. It is definitely worth it to add this powerful feature to your kit.

Bracket Highlighter

Simple, yet extremely useful. Have you noticed when you have multiple lines of code and you are confused on which bracket or parenthesis are ending or beginning?  Well, this tool highlights the ending and beginning of the selected tag. The plugin works with Brackets, parenthesis, and HTML tags such as div.

Color Highlighter

If you work a lot on styling websites, the use of colors can become confusing overtime by staring at hexadecimal or rgb codes. It is also more difficult to see if the color you are using is, in fact, the correct one. For these reasons, the color highlighter exists. By adding this extension to your kit, you are able to see the colors being underlined in each color code, and if you select the color, it will fill the whole code or word with that color. This works with Sass variables too!

A File Icon

This plugin is not necessary, but I can’t stand having my sidebar full of identical files. This plugin creates beautiful icons for each extension, making it easy to differentiate all types of files.

Other

Ghost Text

Personally, I think this is the most impressive plugin. If you are used to editing code in very bad editors or plain boxes, this could make your lie way easier. Ghost Text, as it says on the website, “Let’s you use your text editor to write in your browser. Everything you type in the editor will be instantly updated in the browser (and vice versa).”

Livereload

Live reload is powerful when you want to see your edits almost instantly. You will need both the Sublime plugin and the Chrome extension to make this work. Basically, Livereload automatically reloads the browser every time you save your file and/or when a change has been made. The only downside is that it functions only when working on localhost; if this happens to be you, then Livereload will definitely be a great help!

Prettify

Prettify is really helpful for minified and unminified CSS and JS. Although it is not a tool I frequently use, it is always good to have on hand.

LiveStyle

LiveStyle is a gamechanger plugin. We talked about automatically reloading your browser to show the recent changes that you have performed on the Sublime text, but what about doing the changes in real time? Yes, LiveStyle enables you to hook up your current open stylesheet to the page you are looking at. Changes are made instantly through the Google web dev tools. The best thing about this is if you change the CSS on the web dev tools, it will automatically update the open stylesheet on sublime! This powerful plugin has the support of emmet and CSS preprocessors.

The only thing you need to do to use LiveStyle it is install the plugin and sublime. Then download the Chrome extension and you are ready to go! Check the docs for more information.

Related: Top 5 Modern Development Tools that Will Improve Your Site

ColorPicker

What if you could have a color picker on sublime? Well, here you have it. Color Picker lets you choose from a color gamma or use the picker to grab a color from anywhere within your screen.  You can easily open up the picker once installed by pressing cmd + shift + C.

TermX

Simple yet useful, TermX enables you to open the terminal from any location in which you are editing the file. This is super useful for people with stronger programming skills. You can open the terminal of such file by having that file opened and pressing ctrl+cmd+t. You can change it as you want in the key binding settings.