Sublime Text 3 Wizardry (part 1)

Sublime Text Wizard
"Efficiency is the path to godliness"
-iLan

I have fallen in love with Sublime Text 3. I use it every day. I wish I could calculate the number of keystrokes I have saved by using it. It would surely be an enormous number at this point! I’d like to share some of my favorite tips and tricks. I hope you find some of these useful.

This first posting will focus on establishing an efficient workflow within Sublime Text itself. This includes built-in functionality and a few plugins(packages) that really impact efficiency with getting around the editor.

Package Control

Package Control manages the installation and updates for all your plugins. Using Sublime Text without Package Control is like using your smartphone for nothing but phone calls. Sure, you can make some great calls with that phone, but you’ll really be missing out on so much if that’s all you do. It doesn’t really shine until combined with packages! Install it, and use it!  

Packages

Speaking of Package Control, you get nothing from it if you don’t install any packages! Every once in a while, I’ll check out their browse page to see what’s trending. Otherwise, these are a few of my consistent favorites (which I’ll cover in more detail in a followup posting):  

Command Line

Opening a folder in Sublime Text directly from terminal is something I find myself doing constantly. I’ll often pull down a new git repo from within terminal and then open it up in Sublime Text right from there. This is a great article for setting up the symlink: http://olivierlacan.com/posts/launch-sublime-text-3-from-the-command-line/ I strongly recommend you do so!  

The Essentials!

These are things that come built in to Sublime Text that you may not be aware of. Learn them and use them. They are huge time savers when used effectively!

Fuzzy Search

Don’t forget that every auto-complete field in ST3 uses fuzzy search! So frequently, I see people typing out the entire name of a variable to get auto-complete to finish. Use Fuzzy Search to your advantage!
Example of not using fuzzy search

Typing out the complete name… Bad.

Example of using fuzzy search

Using Fuzzy Search auto-complete… Good!

⌘ + P (goto anywhere)

Oh my goodness! Where have you been all my life?!?! This is without a doubt a game-changer for an editor. No longer do you need to hunt and peck in the sidebar looking for your files. Just ⌘+P and start typing. And don’t forget about fuzzy search! So useful with this command. Include parts of the full path in your search, not just the file name.
command-p fuzzy search

No need to add slashes or spaces or periods when entering the name. I have lots of users.js or users.json files, but i knew the one I wanted was in the api folder.

⌘ + D (Select selection)

Another game changer here. This was the first thing I used with Sublime Text that was really a jaw dropper. It’s so easy to use and learn, but it has such a profound impact on my workflow! Need to change all instances of a variable name? Use this to select them all and change them all at once. And while you can also use Control + ⌘ + G to select all instances, I like to go one at a time to make sure I don’t select something unintended accidentally.
Command + D example

Change all variable instances at once

 

 

Copy & Paste Sneakery

⌘ + C (Copy)

Plain old Copy. However, if you are copying and pasting a single line, no need to select the line first. Pressing ⌘ + C with nothing selected will automatically copy the entire line. Nothing extravagant here, but not selecting the line first can be quite the time saver.

⌘ + Shift + V (Paste with indentation)

I’m honestly not sure why this isn’t the default behavior. There will come a time when you copy/paste a block of code from one location to another and you will find that the first line is indented correctly, but nothing else. Hold down shift while you paste and it all works wonderfully.
Paste with indentation

First, regular pasting. Then pasting with ‘shift’.

⌘ + K, ⌘ + V (Paste from clipboard)

This can be a huge time saver if used efficiently. Essentially, ST3 will remember the last 10-15 things you copy to your clipboard (from within ST3). You can then get a dropdown menu of all those items to paste from. I’ve found this to be most useful when pasting a few different code blocks or lines from 1 file into another, or from one section of a file into another. Much more efficient than going back and forth a bunch of times.
Command K, Command V example

Pasting in 2 separate lines from one file into another


Pane Management

I’m pretty much always using a 2-pane layout in Sublime Text. I find it extremely useful to have views into multiple files at once. When I’m developing, my hand is rarely on my mouse so it becomes extremely useful for me to get good with the necessary keyboard shortcuts to control which file and pane is currently in focus.

⌘ + 1-9 (Goto open file)

This works just like ⌘ + 1-9 in chrome in that it goes to the tab in that space. ie, if you press ⌘ + 1, it goes to the first tab in the active pane. So on and so forth. I try to limit myself to 9 files open concurrently in each pane, or at the very least to have files I’m actively developing be one of the first 9 so I can navigate between them quickly using just the keyboard.

Origami (https://packagecontrol.io/packages/Origami)

Now that we’ve talked about getting around one of the panes, let’s talk a little bit about going back and forth between panes. Origami is a great plugin for just that. It’s all based on pressing ⌘ + K, followed by an arrow key. Additionally, you can add modifier keys to the arrow press to control how it affects the open file. For instance, ⌘ + K, → and ⌘ + K, ← will move focus one pane to the right and left respectively. If you hold a modifier key, the behavior changes slightly. Keep in mind, that these modifier keys still necessitate pressing an arrow key afterwards.
Modifier Affect
Shift Carry – File moves with you to pane
Alt Clone – Create second instance of same file
Create pane – Creates a new pane
⌘ + Shift Destroy pane – Destroys a pane
 

Custom Keyboard Shortcuts (http://tomschlick.com/2012/10/31/customizing-sublime-text-2s-multi-pane-workflow/)

I use these all the time – especially if working without a second display. Essentially, they change the pane size allocation between single pane, double pane (split evenly), and split 1/3 vs 2/3 and the other way around. I generally work with my panes in a 50/50 split. But occasionally, I’ll need a little extra breathing room in the pane I’m working in, so I’ll quickly swap that one out to 2/3 width and then back to 50/50 when I’m done. It’s so quick and easy to do with these keyboard shortcuts. You just press ⌘ + Alt + [→, ←,  ↑, or ↓].

New View Into File (File > New View Into File) or the clone modifier from Origami

This is super useful if you are dealing with a really long file and you need to reference something at the opposite end of it. Instead of either scrolling up and down constantly, or copy/pasting part of the file into a new file, use this and it opens up a second instance of the file. Any change you make in either instance is reflected in both versions.  

Code Snippets

If you ever encounter yourself typing the same thing over and over, it’s probably time to create a code snippet. I’m always adding console.log()s throughout my files. I come from a flash background, so I created a snippet triggered by “trace” (flash’s version of console.log). I type ‘trace’ hit tab and I get: console.log(); with my cursor in-between the parentheses. Using some of the more advanced options, you can get much more complex. Add multiple cursors or have the cursor move to a new location upon pressing the tab key. Check out the official docs on code snippets.
Code snippet example

A more complex code snippet example. Aside from moving between firstName and lastName, I only use tab to change cursor position

<snippet>
	<content><![CDATA[
{{#${1:items}$2}}
	$3
{{/${1:items}}}
]]></content>
	<tabTrigger>hbh</tabTrigger>
</snippet>
 

Integrating My Suggestions

One-at-a-time

I picked up these tips little by little. It can be very overwhelming to just jump right in to all of them. I suggest integrating about one thing per week. That makes it easier to remember to actually use the shortcuts/plugins. Just one thing to focus on.

Use a cheat-sheet

Write out the shortcuts you’re trying to remember! I have had a post-it stuck to my monitor for about 3 years that reminds me of the origami modifier keys. Even if I don’t need it to remember which key does what anymore, at this point it’s great as a gentle reminder to use them! Over time and with enough use, these things become second nature. You don’t have to think about using them. And when you’re using someone else’s computer, or a different editor, you will quickly realize how wonderful your workflow has become in Sublime Text.   Any other things you can think of? Let me know in the comments! I love hearing about new tips and tricks. Future articles about Sublime Text I have planned (in no particular order):
  • Customizing color scheme and theme
  • Backup and restore Sublime Text settings – sync between computers
  • In-depth overview of my most commonly used packages
  • User preferences I use – and why

Leave a Reply

Your email address will not be published. Required fields are marked *