Sublime Text 3 Plugins For Web Developers

The right suite of plugins can make your time in any app far more productive. If you're a web developer working on Sublime Text 3, we strongly recommend taking a close look at these plugins.

• Package Control
• HTMLPrettify
• Emmet
• Bracket Highlighter
• jQuery
• Case Conversion

Package Control

Package Control is a plugin (aka package) that makes it easy to find, install, and update other packages. Ideally, this is the plugin you want to install first. It makes dealing with all other plugins much simpler.

How to install

1. Go to https://packagecontrol.io/installation and copy the long command there. It'll look something like this:
2. Press Control-backtick (⌃ ` ) to open the Sublime Text Console.
3. Paste in the long command line and press return.
4. Once the command runs, you'll probably see a little warning popup.
5. Go ahead and click OK.
6. Quit and restart Sublime Text.
7. Press Shift-Command-P (⇧⌘P) for OSX or Control-Shift-P (⌃⇧P) for Windows to open the Command Palette.
8. Start typing Package Control to see all the commands.

We'll be using Package Control: Install Package for the rest of the plugins.

HTMLPrettify

HTMLPrettify takes long strings of HTML, CSS, JavaScript, and JSON, and formats them so you can actually read them instead of trying to parse a wall of solid text.

How to install

7. Press Shift-Command-P (⇧⌘P) for OSX or Control-Shift-P (⌃⇧P) for Windows to open the Command Palette.
8. Start typing Package Control to see all the commands. Choose Package Control: Install Package. A menu of available plugins will appear.
9. Start typing HTMLPrettify.
10. Click on HTML-CSS-JS Prettify. It's a slightly different name, but don't worry - it's the same plugin.

You can see HTMLPrettify in action in this 14-second video.

Emmet

Emmet used to be called Zen Coding, and it's been around for a while. It allows you to write shorthand HTML and CSS. For example, typing this:

#page>div.logo+ul#navigation>li*5>a{Item $}

and hitting tab turns into this:

let name = "Georgey";

console.log("Hello " + name);

<div id="page">
  <div class="logo"></div>
  <ul id="navigation">
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li><a href="">Item 4</a></li>
    <li><a href="">Item 5</a></li>
  </ul>
</div>

Once you install Emmet via Package Control, restart Sublime Text.

To get Emmet working, make sure you set the syntax for your document. Otherwise, it won't work.

Give it a shot. Type in this:

nav#menuSystem.navMenu.isOpen>div#hotelLogo>div.navMenuIcon.logoIcon+div#arrowPointer+ul#navMenuMain>li.navMenuItem.navMenuItem$$$\*2>div.navMenuIcon{Item $}+a{Item $}

and press tab. (You can also use Control-E ⌃E)

Bam!

<nav id="menuSystem" class="navMenu isOpen">
  <div id="hotelLogo">
    <div class="navMenuIcon logoIcon"></div>
    <div id="arrowPointer"></div>
    <ul id="navMenuMain">
      <li class="navMenuItem navMenuItem001">
        <div class="navMenuIcon">Item 1</div>
        <a href="">Item 1</a>
      </li>
      <li class="navMenuItem navMenuItem002">
        <div class="navMenuIcon">Item 2</div>
        <a href="">Item 2</a>
      </li>
    </ul>
  </div>
</nav>

It'll take a little while to learn all the shortcuts, but if you write a lot of HTML, it's well worth the investment.

BracketHighlighter

BracketHighlighter is an excellent bracket and tag highlighter.

After installing via Package Control, you can click anywhere in JavaScript or HTML and see the beginning and ending brackets in the left-hand column.

jQuery

The jQuery plugin gives you proper syntax coloring for jQuery methods, and provides jQuery snippets for code completion.

Case Conversion

Case Conversion lets you switch between snake_case, camelCase, PascalCase, and/more.

After installing Case Conversion via Package Control (type "pic" for a shortcut to get to Install Package), try it out:

Before: navMenu

Press: ⌃⌥c then ⌃⌥s

After: nav_menu

Note that it won't work properly if you try to convert the case on a whole line.

Before: <nav id="menu_system" class="nav_menu isOpen">

Press: ⌃⌥c then ⌃⌥s (for camelCase)

After: navIDMenuSystemClassNavMenuIsOpen

If you're a web developer using Sublime Text 3, give these plugins a shot! If you don't like them, you can always remove them with Package Control: Remove Package.