Putting the Sublime in Sublime Text

By Alli Treman on December 04, 2014

Putting the Sublime in Sublime Text

Every day when I get to the office, one of the first things I do is open up Sublime Text. If you’re a developer, there’s a good chance you’ve at least heard of (or already use) this wonderful text editor. If you’ve been living under the internet equivalent of a rock, you can check it out and download a free trial here. It’s easy enough for n00bs that we recommend it for Bizstream Academy students and it’s robust enough for senior developers.

Note that I don’t do all my coding in Sublime Text. Working with Kentico, it makes sense to use Visual Studio. I keep Sublime Text open to paste in pieces of code, work on snippets, read the source of jQuery plugins, and write the HTML for web templates and transformations. When using Sublime Text, there are several features and extensions that really make my workflow, well, sublime. I thought I would share a few.

Quickly Change Languages (If Only It Were This Easy in Real Life)

Sublime Text supports dozens of languages, but when you open a new page in the program it defaults into plain text. Changing the language of your document is super easy. Before I knew about this feature, I’d save each document I was working on as the correct file type. This is an unnecessary step. All you need to do is click in the lower right hand corner where it says “Plain Text” and select the language you’re working from in the dropdown.

Just two clicks and the code in that image above will have proper JavaScript syntax highlighting!

Keep Your Tabs, And Your Sanity

Keen readers may have read about my irritation with having to save files above and thought, “Shouldn’t you save your work anyway?” Those readers would be right: It’s always smart to save your work. But if you’re using Sublime Text as a pastebin/Notepad replacement as I do, it doesn’t make sense to have millions of little code snippet files all over my desktop. (Because I would, of course, just save them all to my desktop.)

In Sublime Text, you don’t have to save those files. When you relaunch sublime text, all your tabs will pop back up just the way you left them. Just now, I opened Sublime text to take some screenshots and three tabs appeared with some HTML and JavaScript snippets for a form I was previously working on. Three is actually a fairly low number for me; usually I begin the day with 7 or 8 tabs from the day before.

One caveat: If you have more than one window open, Sublime Text won't save your tabs. So keep all your tabs in one window!

Extend To Your Heart’s Content

Developers love Sublime Text, and when developers love something, they often like to make it better. This means there are many amazing extensions (called “packages”) out there for Sublime Text. If you want to install packages (and you will) you’ll first want to install Package Control. Once you have that going, you can download and manage your extensions right from within Sublime Text. Installing Package Control is almost as easy:

  • Go to the Package Control installation page.
  • Click the tab for whatever version of Sublime Text you’re using, 2 or 3.
  • Copy the code.
  • In Sublime Text, open the Console (View > Console Menu).
  • Paste in and run the code.

That’s it! You’ll find the Package Control menu under the Preferences menu, and you can search for packages right from there. Do you, for example, write LESS and want to see the proper syntax highlighting? There’s a package for that. Just search for LESS under the “Install Packages” option.

Emmet, My BFF

If you write HTML or CSS, the first package you’ll want to install is called Emmet. It lets you write much less code, which is always a good thing. Say I wanted to write an unordered list with 5 list items, contained in a div with the ID List, and where each list item had the class item.

That would look like this:

<div id="List">
<ul>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>
</div>

That’s 160 characters. Not too bad, right? But guess what. I didn’t write all of that. All I wrote was this:

div#List>ul>li.item*5

And then I hit the tab key, and Emmet expanded it into the full HTML you see above. That little line of code was only 22 characters. That’s over seven times fewer characters as the full HTML. Your wrists will thank you.

What’s even cooler is that the abbreviated HTML is just one of Emmet’s features. I haven’t even explored them all yet myself, but you can learn more at the Emmet website.

Highlight Those Brackets, Baby

One of, okay, my only complaint about Sublime Text is its default bracket highlighting. It’s very lackluster. When you click a tag in HTML, the open and closing tags do get highlighted, if you can call a very subtle dotted line under the tag a highlight.

For brackets in, for example, JavaScript and C#, they show up as solid lines. Which seems slightly better than the dotted line, but remember these are just brackets here, not full tags. It’s even harder to see.

If you’re working on a long piece of code and trying to find that missing tag or bracket that’s breaking the entire script — good luck! You’ll need it.

Or you can install the BracketHighlighter package and keep yourself from wanting to yank out your hair. See how the same tag looks after installing the package:

Here we have outlines around the entire opening and closing tags that are clearly visible, and if that wasn’t enough, tag icons to the left of the line numbers so we can find the tags easily. For code, BracketHighlighter will display the type of bracket you’re selecting as the icon (so for curly brackets, you’d see { as the icon to the left of the line where your opening bracket is, and } as the icon to the left of the line where your closing bracket is. If SublimeText can’t find the matching bracket, it will display a sad ? as the icon.

 

Paint The Code Red (Or Not)

Sublime Text comes with quite a few built in color schemes that should satisfy most developers. Unless you’re me. If you’re wondering where I found that gorgeous non-obtrusive dark color scheme, it’s part of a package called “Dayle Rees Color Schemes” that you can install. I don’t know much about Dayle Rees, or at least I didn’t until I googled him and found out that he’s a British web developer and has a website.

The scheme I use is called “Tron” and once you install the package, it’s under Color Sheme > Dayle Rees Color Schemes > legacy. Let me tell you I could stare at it all day. It’s so sublime.

Keep On Extending

I’ve only highlighted a few of the many Sublime Text packages out there. The Package Control website lists new, popular, and trending extensions. Just looking at these lists I’m already seeing some packages I think I’m going to try out. If you use Sublime Text, let us know what your favorite extensions are in the comments!

Share This Post:

Twitter Pinterest Facebook Google+
Click here to read more Tutorials posts
Start a Project with Us

About the author

Alli taught herself HTML when she was 12. Just for fun. After that, she was obsessed with figuring out everything a computer can do. Here at BizStream, Alli does front-end development. When she’s not making websites, Alli is going on adrenaline adventures and tackling her ambitious reading list. She has sweet baby boy named Simon and an extra fluffy cat named Sashimi.

View other posts by Alli

Subscribe to Email

Enter your email address to subscribe to the BizStream Newsletter and receive updates by email.