Useful Shortcuts for a Faster Workflow in Sublime Text 3

Sublime Text 3 has a lot of features and shortcuts for the modern coder to play with. Let’s take a look at the most important which I think will boost your workflow to a new level. Learn how to use basic shortcuts, work with projects or handle tabs often without even clicking your mouse.

Working With Projects

I know plenty of developers who don’t use this awesome feature. What’s your typical process if you work on a project? Maybe something like:

Open Sublime Text
Open Finder
Search for project
Drag the folder into the editor
Search for files and open them
Start development

Not good enough. Let’s say that you worked on a file yesterday evening and this morning you want to carry on where you left off. The workflow we’ve mentioned is pretty inefficient, so instead let me turn your attention to Project in Sublime Text’s menubar:

Creating Your First Project

Each saved project has its own configuration file, so to start with we need somewhere on our system to store all these. Begin by creating a folder, in whatever way you’re accustomed to, called sublime-projects (for example).

Then begin a new project, as normal, by starting a new file or folder in Sublime. Now go to Project > Save Project As... Navigate to the sublime-projects folder, give your new project a name and save it.

Get List of Saved Projects

To quickly access a list of all previous projects use the shortcut CMD-CTRL-P. Type in a search query to filter the list, press enter and you’ll immediately open the folders and files of that project in the sidebar.

You’ll find your project with folders and tabs opened or closed exactly as you left them.

Switching between projects, back and forth, is also really easy in this manner.

Searching for Files Within a Project

I find this to be the biggest timesaver ever. Typing is better than clicking when searching for a file, so, with a project open, hit CMD-P and get typing!

Handling Tabs

Tabs are an awesome way to give you an overview of your current project. More often than not you’ll use one tab for HTML files, another one for CSS and sometimes a last one for JavaScript. With these quick shortcuts it’s possible to create tabs fast:

CMD-2 - Add two tabs
CMD-3 - Add three tabs
CMD-4 - Add four tabs

Now let’s navigate through all these tabs:

CMD-ALT-LEFT ARROW - Go to the previous tab
CMD-ALT-RIGHT ARROW - Go to the next tab

Selection

I’m not a fan of selecting with the mouse - it’s too complicated and slow. For example, start at the beginning of a word, then hold the mouse button and drag it to the end of the word or line. Often you won’t have the selection you wanted. Use the following shortcuts and you won’t be disappointed!

Find All Instances Matching Your Selection

One by one:

Make a selection and find, one by one, other instances by hitting CMD-D.

All at Once:

Again, make a selection, but now to find all instances in one go hit CMD-CTRL-G.

Select Line by Line

Here we’ve selected a whole line, and now we can select subsequent whole lines, step by step, with CMD-L.

Select All Children

Click within an element with some child elements. Then press CMD-SHIFT-J and all the child elements will be selected.

Miscellaneous Time Savers

These are a few other shortcuts I couldn’t live without.

Jump to Function

To search for a function in the current file press CMD-R then enter a search term to filter down to the function you want to find.

Copy Current Line

Click on the line which you want to copy and then press CMD-SHIFT-D. Now you have a duplicate line, identical in every way, and the cursor jumps with it.

Switch Lines

Hit CMD-CTRL-↓ or CMD-CTRL-↑ to change the position of a line.

Closing Current HTML Tag

If you write the start tag <span> and don’t want to close it manually, then hit CMD-ALT-. and Sublime Text will close it for you. Another method is to write span without angle brackets and then press TAB.

Toggle Sidebar Visibility

Sublime Text even has a shortcut to hide and show the sidebar. Press CMD-K-B to toggle it.

Multiple Cursors

Create Multiple Cursors

So you want to have more than one cursor? Hold CMD and then click at the place where you want a second cursor. You can repeat the process and get as many cursors as you want.

Drag to Create Multiple Cursors

For the first technique you have to click on each place where you want another cursor. But perhaps you have some lines where you want a cursor on each one, all vertically aligned. Don’t click each one separately, instead hit ALT and then, with the left mouse button pressed, drag your cursor up or down.

Plugin for Writers: Markdown Preview

Personally I write often Markdown in Sublime Text, but to begin with I didn’t have a preview of my document. Then I found Markdown Preview.

To install it, go to your editor, press CMD-SHIFT-P to open Package Manager, search for Package Control: Install Package, then search for Markdown Preview and press enter to install it.

Now, open your Markdown file, execute the CMD-SHIFT-P shortcut again and search for Markdown - there you will find the item Markdown Preview: Preview in Browser. Click it and your default browser will open a tab with the preview.

Must-Have Plugin: Hayaku

This plugin will help you write CSS faster and add some helpers. Hayaku is comparable to Emmet, but with many more features particularly for properties in CSS.

Smart CSS Values Abbreviations

Here are some examples of property/value abbreviations using Hayaku (hit TAB to execute each one):

por position: relative;
mt10 margin-top: 10px;
cF color: #FFF;
brr background-repeat: repeat;
tdn text-decoration: none;

Increment & Decrement Values With Keyboard

It’s possible to use the keyboard for incrementing or decrementing numeric values. Put your cursor on the number and the use the following shortcuts.

Increment or decrement numeric value by 0.1: ALT-CTRL-↑ or ALT-CTRL-↓
Increment or decrement numeric value by 1: ALT-↑ or ALT-↓
Increment or decrement numeric values by 10: ALT-SHIFT-↑ or ALT-SHIFT-↓

Final Thoughts

Everybody should learn shortcuts in their applications of choice! If you’ve ever become frustrated at having to repeat tasks over and over, then research for a shortcut. If you find one, take some time to learn it; it will pay you back time and time again.

What are your favorite shortcuts for Sublime Text 3? Which ones do you use daily?