Sublime Text Rocks

5 Replies

You won’t be sitting in a SharePoint Experience class for very long before Heather or I open up a code editing app we both love – and for most of you, it’s something you’ve never seen before. Whether it is ASPX, JavaScript, XSL, HTML, PHP or CSS, one of our main go-to applications for web development (and yes this includes SharePoint) is Sublime Text.

First off, Sublime is not:

  • a WYSIWYG editor
  • an app overflowing with preference screens and checkboxes for options — this may be weird to point out, you should be comfortable with using your keyboard when setting up Sublime

Sublime is:

  • available for OS X, Windows and Linux
  • customizable and flexible
  • infinitely extendable using many free plugins (or write your own, it’s not tough)
  • very useful out of the box, incredibly useful if you take a little time to set it up based on your needs
  • geek-friendly with a Python console and API
  • configured using JSON files — if this sounds scary don’t fret… it just means you edit preferences in the text editor
  • awesome!

A lot of great information is posted online about Sublime Text so I am going to focus on getting you set up and pointed to some good resources.

Setting up Sublime Text – Part 1

  1. Download a trial for Sublime Text online
  2. You can evaluate it for as long as you like. When ready you can purchase a license for $59 USD (pricing subject to change)
  3. Open up Sublime, then open the Sublime Console (View –> Show Console)
  4. Install Sublime Package Control by pasting in the code provided on this web page to the console – don’t forget to restart the app when prompted!

Understanding Packages

A package is just like a plugin. Sublime Text Packages are directories under a master Packages folder on your hard drive. Each directory provides functionality for Sublime, much like how Features (or Apps, if you insist) provide content or functionality for SharePoint. And just like how you have to activate Features in SharePoint, you have to “install” packages in Sublime. In part 1 you installed Sublime Package Control, which will make it very easy to install many different community built packages.

Here are some (maybe eclectic, but we’re super geeks over here) examples to help you get a feel for what different packages can do:

  • expand your selection to the next or previous paragraph
  • insert custom HTML snippets
  • write Lettuce tests with syntax highlighting, auto-completion, and step validation
  • send a tweet
  • use Emmet (formerly Zen Coding, and damn, so cool) to quickly write HTML/CSS/XML/XSL like a NINJA
  • activate syntax highlighting for FreeMarker templates

Adding packages to Sublime using the Package Control is very easy…

Setting up Sublime Text – Part 2

  1. First pick out a package you think looks interesting or useful. For this example I’ll use Hipster Ipsum.
  2. In Sublime, type Ctrl + Shift + P (Cmd + Shift + P for Mac) – this will bring up the Command Palette.
  3. Start typing install. When you use the Command Palette, it will filter possible options as you type. When you type install it should show you Package Control: Install Package. Hit Enter.
    • Note for SuperGeeks: Sublime prompts use fuzzy matching – try typing pcip instead of install
  4. If you look in the status bar you will see Sublime working to load available repositories. Even though the application just looks blank, give it a second and it show you available packages in the Command Palette.
  5. Once loaded, start typing Hipster and Hipster Ipsum should pop into view. Hit Enter.
  6. Sublime adds the package and you are ready to use it right away. Keep in mind that some packages work best after restarting Sublime – pay attention to the product notes the developer provides.

One of the biggest things to get used to with Sublime is the lack of deeply nested menus and a barrage of preference screens. Instead this code editor is very sleek and trim and gives you the ability to never have to touch your mouse. Through the use of a few keystrokes you have now added a package to the editor and didn’t have to mess with a bunch of dialog boxes or buttons.

If you installed Hipster Ipsum, type the number 3 in the code editor and select it. Hit Ctrl + Alt + H (Windows and Mac). The number will be replaced with three paragraphs of hipster style Lorem Ipsum. If you already have something else bound to those keys (because, hey, you’re cool and already use Sublime), you can also open the Command Palette and start typing hio (first letters of the Hipster Lipsum command) and press enter.

Oh, you want an example?

It is easy to get lost in the sea of package possibilities. Here’s one package that Heather and I go nuts over:

Emmet

Formerly known as ZenCoding, just an FYI…

Among other things, this kick-ass package will expand abbreviated HTML to fully written out and tabbed HTML. Set your syntax to HTML (Command Palette, then ssh to find Set Syntax: HTML) and try this:

div#tabs>(ul>(li>a[href=#tabs-$])*3)+div#tabs-$*3>lipsum

Yeah, seriously. Just copy and paste it. Get ready. It’s going to be legen…

…wait for it…

(now press tab)

…DARY
[gist id=4334534 file=tabsexample.html]
Yeah. That just happened.

I hope to write up some feature posts on specific extensions that I use all the time, or that I find particularly nerdy. While you wait for those posts, here are a few other cool selections:

More Resources for Sublime Text

Any other questions?

I’d love to hear ‘em. And I’ll do my best to answer ‘em. Let me know in the comments!