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!
- 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
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.
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.
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):
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-↓
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?