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.
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:
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:
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.
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.
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!
Now let’s navigate through all these tabs:
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!
Make a selection and find, one by one, other instances by hitting CMD-D.
Again, make a selection, but now to find all instances in one go hit CMD-CTRL-G.
Here we’ve selected a whole line, and now we can select subsequent whole lines, step by step, with CMD-L.
Click within an element with some child elements. Then press CMD-SHIFT-J and all the child elements will be selected.
These are a few other shortcuts I couldn’t live without.
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.
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.
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.
Sublime Text even has a shortcut to hide and show the sidebar. Press CMD-K-B to toggle it.
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.
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.
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.
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.
Here are some examples of property/value abbreviations using Hayaku (hit TAB to execute each one):
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.
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?