Become A Sublime Text 3 Pro

Comment Out

Commenting out is one of the things you must be doing a lot, for instance to add a comment about what a certain method is doing, or to temporarily exclude a line of code for debugging purposes (and we spend a lot of time doing that).

Sublime Text is clever enough to figure out the appropriate way to comment out the selected line. So for CSS it will use /**/ and for HTML it would use <!-- -->. Now, there are two ways to apply comments, for some languages such as PHP and JavaScript it could be // or /**/ (there is also # but let’s ignore that one here). And here is how it’s done using the keyboard.

Move Lines Up & Down

Moving lines of code up or down in your document becomes an easy and quick job. No need for cutting and pasting anymore.

Wrap With HTML Tags

This shortcut is only useful for HTML. If you want to add a div, or any other king of tags, around an HTML element, this comes very handy.

Multi Cursor

Multi cursor is one of the feature that made me love Sublime Text. Many other text editor have this ability now, even Dreamweaver CC 2017 which is the latest version at this day. But with Sublime Text you can also past in multiple places at the same time what Dreamweaver doesn’t allow (yet).

Toggle Sidebar

You sometimes need to be able to see as much code on your screen as possible, and hiding the sidebar definitely helps.

Duplicate Lines

Sublime Text 3 allows to very easily duplicating one or more lines of code. If you just want to duplicate one line then just place your cursor anywhere on it, or select everything you want if more than one line and use the keyboard shortcut.

Split View

I very often need to look at two or more documents next to each other. And that’s how to do it.

Search File Or In File

The editor has a powerful search feature which allows you to instantly find a file or something like a method or class inside a file. Let’s say that have a file scr/Controller/UsersController.php, where there is a method called login, by pressing Ctrl + P then typing scr/contr/user@login Sublime Text will open the file and place the cursor exactly where my login method is. You noticed that I have typed contr & user instead of Controller & UsersController.php as ST3 will figure out what I mean as long as there isn’t another file/folder starting the same, and if there is you can select the correct one from the list of suggestions. Also notice that @ basically meaning “search in file”.

Create Your Own Snippets

Sublime Text 3 has loads of pre-set snippets saving you from repeated and boring typing. You probably noticed that when you type certain keywords for instance foreach in PHP you’ll see a list of suggestions appear. This is a list of snippets, just select the one you need and press enter or tab key to apply it.

Sublime Text gives you the ability to create your own snippets. So let’s take a simple example. When coding some JavaScript I very often use console.log(somevar); for testing, so I’ve created a snippet so I don’t have to type it every time. For that do to Tools > Developer > New Snippet… and there you’ll have a new document with something that looks like this:

<snippet>
    <content>;<![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <!-- <tabTrigger>hello</tabTrigger> -->
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

In between <![CDATA[ ... ]]> is where my new snippet will be which is console.log(${1:this});. The ${1:this} indicates where you want the cursor to be when you apply the snippet. You can replace ‘this’ for whatever you want or just remove it ${1}. You can also have a second place for the cursor to go console.log(${1:this});${2} like this when you’re done typing whatever you need in ${1:this} press the tab key and the cursor will instantly move to ${2}.

Next important thing to do is uncomment hello and replace hello with console in my example. This is the keyword that will trigger the snippet. Then uncomment source.python and change it to source.js as this snippet is for JavaScript.

Here is how the file should look like:

<snippet>
    <content><![CDATA[
console.log(${1:this});${2}
]]><</content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>console</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.js</scope>
</snippet>

Save the file and you’re ready to use your new snippet.

Shortcuts Using Emmet Plugin

Emmet is an amazing addition to Sublime Text to improve your HTML and CSS workflow. It allows you to quickly write HTML pages and style them. The best way to install Emmet is using Package Control and can go to their website to find out more emmet.io.

Once Emmet is installed you’ll be able to write something like nav>ul>li*3>a#link$ then press the tab key and you will have a menu with a list of 3 links each with an id. The $ sign represents a number that auto increments.

If you’d like to learn more about Emmet syntax they have a very useful Cheat Sheet available.

More Keyboard Shortcuts

Here a short list of some extra great Sublime Text 3 shortcuts.

Hope you find this useful and let me know if know other great Sublime Text 3 keyboard shortcuts.