Installing Sublime Packages

September 11, 2014

In Sublime Text there are quite a few plugins, or as they call them packages, that will improve your coding experience. Here's a reference on how to install packages/plugins in Sublime Text as it can be a little tricky the first time you try.

Install Package Control

Before you can install any Sublime Packages, you should probably install ‘Package Control’ to make life easier for you. Although you can install packages without this package manager, it is certainly more difficult and time consuming. The official instructions explain that there are two ways to install Package Control: Simple and Manual.

Simple Install

They call it simple, but that’s not necessarily true for all of us. Basically though copy and paste some code in to Sublime’s console and you’re done. To open up the sublime console use CTRL+` or go to View > Show Console.

For Sublime Text 3, copy and paste this chunk of code into your console:

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

If you are using Sublime Text 2, or any future version of Sublime Text that comes out, just go to the Package Control website and copy the code on the left hand side of the page making sure to choose the version of Sublime Text you have installed.

Paste your code in to Sublime’s console and hit ENTER.

Awesome, you should get a confirmation that Package Control was installed successfully. If not you can always follow the manual installation method back on the Package Control install page. Now that Package Control is installed, its a good time to close out of Sublime and re-open it before you try to install your first package (technically, this would be your second package, as Package Control was your first package).

Install a Package

Emmet is without a doubt the first package any front end developer should install. It’s amazing. Emmet allows you to do really cool stuff. For instance you can write code like div.wrapper and have that unfold in to this:

<div class="wrapper"></div>

You can also type something like lorem40 and generate 40 random lorem ipsum words, which is incredibly useful. Emmet comes with a bunch of useful snippets they have documented so you can type in html:5 and hit the tab key and that expands out to this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
  </body>
</html>

Plus a bunch more stuff that they have documented on the Emmet website.

I might add that Emmet is available for other text editors besides Sublime. And, two other good packages include Sidebar and Advanced New File (but not as good as Emmet).

Installing a Package

To install a package open Sublime and go to Sublime Text > Preferences > Package Control.

Package Control

That will bring up the Command Palette with ‘Package Control:’ already typed in to it, like so…

Sublime's Command Palette

Alternatively you can just use the keyboard shortcut CMD+SHIFT+P to open the Command Palette. Doing it that way though doesn’t prepopulate it with the “Package Control:” prefix.

Notice that the drop down menu, which is actually Sublime’s superfast fuzzy search is showing a few different options which include removing and installing a package. Type in Install Package.

Install Package

Next, in the following search box that appears, type in “Emmet” and select that package from the fuzzy search results.

package-control-4

That will install Emmet for you. Upon successfull installation of Emmet you will see the following ReadMe file, which advises you to restart Sublime to finish the installation.

package-control-5

After restarting Sublime you’ll get all the magical goodness of Emmet. The first thing you should do is open a new file and click the bottom right hand corner of Sublime’s interface where it says “plain text” and change that to HTML. Next type in something like ul.menu>li*3>a{link$} and watch that unfold in to:

<ul class="list">
  <li><a href="" >link1</a></li>
  <li><a href="" >link2</a></li>
  <li><a href="" >link3</a></li>
</ul>

Absolutely incredible! Check out the documentation for a decent list of all the syntax you can use.

Mastering CSS: Book by Rich Finelli
Mastering CSS, the Book! Flexbox, Layout, Animations, Responsive, Retina, and more!
Mastering CSS, 2nd Edition, video course by Rich Finelli
Mastering CSS, Second Edition: 47 videos on how to make websites like a boss! Flexbox, Animations, Responsive, Retina, and more!
Back to top