12 Most-Wanted Sublime Text Tips and Tricks

By Thoriq Firdaus. in Web Design. Updated on November 26, 2018.

You probably know by now that we are fans of Sublime Text. It might look a very simple code editor, but it has a lot of hidden features underneath.

After exploring it for a while, you might be surprised that you can do quite a number of cool things in SublimeText. We went in and dug around for a bit and here are just some of the tips and tricks that we think you would like to play with.

Let’s supercharge your coding experience in Sublime Text.

Recommended Reading: Identify Code Error In Sublime Text With Sublime Linter

1. Selection

As a web developer, we would frequently do code editing. Below are some handy keyboard shortcuts that allow you do different types of selections in SublimeText.

Command + D	Select a word.
Command + L	Select a line.
Command + A	Select the entire content within the document.
Ctrl + Command + M	Select anything inside the bracket (which is useful when working with CSS or JavaScript)

Furthermore, Sublime Text brings lets us select multiple lines at once, which can significantly boost your productivity. There are several ways to perform this feature:

Command	Hold the Command key and click on the lines that you want to select.
Command + Ctrl + G	Select a code, line, or word first the hit this combo to select the others with the same instances.
Command + D	Hit this key to quickly select the next code, line, or word that has the same instances as you are currently selecting.

See how multi-line selection works below.

2. Sorting CSS

Commonly, we do not mind how CSS properties are sorted, as CSS will give us the desired output in the browser regardless of their position. But putting them in a particular order will make your codes more organized. In SublimeText, you can select CSS properties and hit F5 to sort the properties in alphabetical order.

You can also use a third-party plugin like CSSComb to give you more control over the property sorting rule.

3. Command Palette

You can do many things quickly with Command Palette such as rename new file, set file syntax, and inserting snippets. To show the Command Palette in SublimeText, hit Command + Shift + P, then the command you intend to perform. Here are some examples.

Renaming file

Set file syntax to HTML

Insert code snippet

4. Switching Between Tabs and Projects

We may have many files opened when working on a project. In SublimeText, we can switch through these files (or tabs) quickly with the following shortcuts:

Command + T	Lists tabs that are currently open. Select one to go to the tab.
Command + Shift + ]	This will bring you immediately to the next tab.
Command + Shift + [	While this key will bring you the previous tab.
Command + Ctrl + P	Switch between the projects that are listed on the SublimeText Sidebar.

5. Cross-File Editing

This feature would also be very useful when we are working with multiple files. For example, say that we have several code blocks that are very similar and spread across different files in the project. To change these codes efficiently, you can:

1. Hit Command + Shift + F in Sublime Text. Put the words, sentence, or line of codes that you want to change in the Find field.

Pro Tip: hit Command + E to quickly put the code selected in the Find input field.

2. Specify the file names within the Where input field or add <open files> so that it will only affect files that are currently open.

3. Put the word or code replacement in the Replace input field, and hit the Replace button.

6. File Crawling

I found this feature really helpful when I’m editing CSS. Hit Command + R. A dialog will appear with a list of CSS selectors on the document, as you can see in the screenshot below. You can search and select the selectors that you intend to navigate to.

I found this a more convenient way to search for code block than using the regular Find feature.

7. Spell Checker

I frequently write in code editor, and I also frequently made some mistake in the spelling. If you are like me, you can enable the spell checker in SublimeText in this way.

Go to Preferences > Settings – User in SublimeText, and add the following line.

"spell_check": true,

8. Sidebar Enhancement

This plugin, SideBarEnhancements, brings some great enhancements to the SublimeText sidebar. Once installed, right click on the sidebar, and you will find additional menus such as Open in Finder, New File, New Folder, Open With, and Open in Browser.

Tip: Hit F12 key to open the file in the browser.

9. Change SublimeText Theme

We can also change the entire appearance of SublimeText, and one of my favorites is called Soda Theme, which can be installed through Package Control.

If the theme that you intend to install is not available in the Package Control repository, you can do it manually.

1. Download and Unzip the Theme package. 2. Go to Preferences > Browser Packages… 3. Put the theme folder in the Packages folder. 4. Then go to Preferences > Settings – Users, and add the following line to activate the theme.

"theme": "Soda Light.sublime-theme"

10. Change SublimeText Icon

Apart from changing the theme, you can also change the icon. There are a bunch of nicely designed SublimeText icons that you can pick up in Dribbble. Here’s how you can change the look of the icon:

1. Download one of the icons from Dribbble. Ensure that the icon also comes in .icns format, otherwise you can convert it first with this tool: iConvert.

2. Run the following command in Terminal.

open /Applications/Sublime\ Text.app/Contents/Resources/

3. Replace the Sublime Text 3.icns or Sublime Text 2.icns with the one you downloaded.

11. Sync Setting

If you are working in multiple computers, you might want to keep and apply the same Settings for SublimeText across these computers. We can set this up with the help of Dropbox (and a small tweak).

First, run the following command in Terminal.

mkdir $HOME/Dropbox/sublime-text-3/
mv "$HOME/Library/Application Support/Sublime Text 3/Packages" "$HOME/Dropbox/sublime-text-3/"
mv "$HOME/Library/Application Support/Sublime Text 3/Installed Packages" "$HOME/Dropbox/sublime-text-3/"

Then run this command in Terminal in every other computer you want synchronized with the Settings that we have put in Dropbox.

DSTPATH="$HOME/Library/Application Support/Sublime Text 3"
DROPBOX_PATH="$HOME/Dropbox/sublime-text-3"
rm -rf "$DSTPATH/Installed Packages"
rm -rf "$DSTPATH/Packages"
mkdir -p "$DSTPATH"
ln -s "$DROPBOX_PATH/Packages" "$DSTPATH/Packages"
ln -s "$DROPBOX_PATH/Installed Packages" "$DSTPATH/Installed Packages"

Thanks to xMarekaccross for the tip.

12. Clickable URL

ClickableURLs is a tiny SublimeText plugin that would be very useful when you find a bunch of URLs within your codes. Basically, it will make the URLs clickable.

I have written about other things you can do with Sublime Text, including: