Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
19th October 2012

10 Must-know Sublime Text 2 tips

Check out this essential selection of tips for the latest go to code editor Sublime Text 2

10 Must-know Sublime Text 2 tips

The Sublime Text 2 code editor – available for Mac, Windows, and Linux – has skyrocketed to becoming the editor of choice for a huge number of developers and designers. TextMate users, IDE faithfuls, and even Vim fanatics have switched over – which speaks volumes about it.
How come? Well, it’s a sophisticated editor, with lightning-fast speed, an incredibly vibrant plug-in community, easy configuration, Vintage (Vim) mode, multiple cursors – the list goes on. As you’ll soon discover, it only takes a few minutes to realise what makes Sublime Text so special. It’s not about bells, it’s not about whistles, it’s about sheer speed and workflow. In these areas, Sublime soars.
If you’ve yet to make the switch out of some sense of loyalty to your current editor of choice, give this article twenty minutes of your time, and it just may convince you to reconsider.
Please note that this article, for convenience and readability, will exclusively use the Mac-specific keyboard bindings. Refer to the documentation – docs.sublimetext.info/en/latest/reference/keyboard_shortcuts_win.html – for the equivalent Windows and Linux bindings.

01. Multiple cursors

Let’s begin with the feature that is guaranteed to blow your mind: multiple cursors. A note of caution: once you experience the flexibility of having multiple cursors at your finger tips, you won’t be able to go back to the old way.
Imagine that you need to change every occurrence of the word myMethod to newMethod. Traditionally, you might perform a search and replace; however, in Sublime, it’s much easier. Simply place your cursor within the word, and press Ctrl+Cmd+G. You’ve now selected every occurrence of `myMethod`, and have created multiple cursors. Change the text, and watch all of them update! Jaw dropping, right? Alternatively, you can always press Cmd+D repeatedly to incrementally select each additional occurrence of the word.

02. Command palette

Sublime’s command palette is a godsend for those who prefer to touch the mouse as little as possible.
The command palette allows you to run countless commands, such as changing the syntax type for the current document, installing plug-ins, and searching for snippets, to name a few.

03. Package control

Package Control is a powerful package manager that allows you to, from within the particular code editor of your choice, install pretty much any package that you can imagine. Need Zen Coding or CoffeeScript syntax highlighting? It only takes a couple keystrokes to set up. No more scouring the web for the right plug-in!
To install Package Control, visit Will Bond’s website (wbond.net/sublime_packages/package_control), copy the snippet of code provided, return to Sublime Text, press Ctrl+`, paste the snippet in, and restart.
To install Zen Coding, open the command palette (Cmd+Shift+P) and type, ‘install.’ Sublime will provide a list of all the various plug-ins that are available to be installed. Search for Zen Coding and hit Enter to install it. Yep – it’s that easy! To confirm that it worked, type `ul>li*4 + Tab`. Ta-da!
To, for instance, change the current syntax highlighting for the current document from say – HTML to PHP – press Cmd+Shift+P and type ‘css.’ The option Set Syntax: CSS should now display. Hit Enter, and you’re done! Note that you can always take advantage of fuzzy searching here. As such, you do not have to type in the entire word. Memorise this keyboard command and use it often.

04. TextMate themes

It’s likely that you Mac readers are currently using TextMate. Luckily, Sublime Text offers full support for TextMate themes. This means that, yes, your custom colour scheme can be migrated over to Sublime Text without an ounce of configuration. Simply drop it into your Packages directory as is.

05. Goto symbol

Visit any class or list of functions, type `Command + r`, and you’ll be presented with a list of all the methods on the page. As an example, if you’re viewing a PHP class, ‘Command + r’ will list all of the method names. You can then use fuzzy searching to instantly scroll to the desired method.
When we combine this with Sublime’s instant file switching capabilities, this command becomes particularly helpful. Imagine that you need to edit style.css, and, specifically, the .box class within that file; type ‘Command + p’, ‘style@box’, and you’re there!

06. Easy CSS with Prefixr

Prefixr is a web service that automatically applies the necessary CSS vendor prefixes to stylesheets.
With Prefixr, you don’t have to remember which vendors to use for any given CSS3 property. The Sublime Prefixr plug-in brings this functionality directly to your editor.
Once you’ve installed the plug-in through Package Control, select the contents of your stylesheet, and trigger the plug-in by typing Control + Command + x. Voila! Your file has instantly been updated. Now you can use the official syntax, and let Prefixr figure out the vendor-specific requirements.

07. Advanced new file

The less you touch the mouse, the better. Unfortunately, by default, creating a new file in Sublime Text can take a bit longer than we’d like. Thankfully, the Advanced New File plug-in fixes this.
Once installed, type `Command + Option + n`, and you’ll see a new panel pop up at the bottom. What’s fantastic about this plug-in is that you can also create files within folders that do not yet exist.
Simply type the full path to the desired new file, and you’re good to go.
Let’s create a new jQuery.js file within a js/libs directory that has yet to be created: ‘Option + Command + n’, ‘js/libs/jquery.js’, ‘save’, ‘Command + Shift + p’, ‘Fetch’, ‘Single File’, ‘jQuery’. We’ve now, in seconds, created a directory tree and downloaded the latest version of the library.

08. Vintage mode

Vim users can easily migrate to Sublime Text, thanks to its optional Vintage mode. To enable Vintage Mode, edit the Default Preferences file within the Preferences menu, scroll to the bottom, and remove the Vintage item from the ignored_packages array. Now, press Escape, and you’re in command mode. You’ll find that Sublime’s Vi keybindings are quite good!

09. Native snippet

Each snippets in Sublime Text refers to a single file, and allows for tab completion and default values.
To create a new snippet, choose Tools>New Snippet. In this new file you can, within the tag, insert your snippet. You also have the ability to select a tab trigger and scope, which ensures that the snippet is only accessible from a specific file type.Save the file with a .sublime-snippet extension attached, and test it out!

10. Versioned snippets

While Sublime’s native snippets certainly get the job done, for larger snippets you might prefer to take advantage of GitHub Gists. Begin by installing the Gist plug-in through Package Control. This will now provide a handful of new options within the command palette.
When attempting to create a new Gist, you’ll find that you first need to specify your GitHub credentials. It’s recommended that you create a special account specifically for your snippets. Once you do so, set the credentials and try again. When you’ve created a handful of snippets, you can list them through the command palette, by choosing Gist: Open Gist.
The best part is that when you fork existing snippets through gist.github.com, they’ll automatically be available to you in Sublime Text. Plus, free version control for your snippets!

RELATED ARTICLES

10 Must-know Sublime Text 2 tips

Another 10 Must-know Sublime
Text 2 tips

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://www.paulund.co.uk Paul

      Didn’t realise you can have a plugin for the Gist snippets, that’s awesome…installing that.