← back to articles

Shortcuts And Tips For Improving Your Productivity With Sublime Text – Smashing Magazine

Save article ToRead Archive Delete · Log out

12 min read · View original · smashingmagazine.com

Shortcuts And Tips For Improving Your Productivity With Sublime Text

Sublime Text is, no doubt, one of the most powerful text editors out there. The number of satisfied users attests to that. If you explore it, you will eventually see how beautifully its powerful features are hidden behind a simple and elegant interface.

If you have been using Sublime Text for some time, now is the time to upgrade your arsenal with new ammunition. I’ll be taking you through some of my favorite tips and tricks. Knowing them might just unleash your hidden powers as a programmer to the world.

Sublime Text Plugins Link

Package Control Link

Package Control is a one-stop solution for downloading and managing Sublime Text-related plugins and themes. The installation instructions are available1 on the Package Control website.

Once it is installed, you can access it using the command palette. To install a plugin, press Cmd ⌘ + Shift ⇧ + P (Mac) or Ctrl ⌃ + Shift ⇧ + P (Windows and Linux), and then enter Install Package and press “Return.” The list of plugins in the repository takes a few moments to load, but then you can type the name of the plugin you are interested in and install it from there. Some of my favorite plugins are listed below.

Package Control.

Sublime Text’s default sidebar can only do some limited tasks. The Sidebar Enhancements2 plugin supercharges Sublime Text with commands for opening the file in a browser, copying, pasting, copying a path, duplicating, deleting and more.

Sidebar Enhancements.

Plain Tasks Link

Plain Tasks3 converts Sublime Text into a powerful to-do list manager. You can install it via Package Control. Create a file with .todo as the extension to activate Plain Tasks on top of it. For other tips, you can access the tutorial provided in the plugin, available at “Preferences” → “Package Settings” → “Plain Tasks” → “Tutorial.”

For a new task:

To mark as done:

To mark as cancelled:

Plain Tasks.

Sublime Linter Link

Check for errors in your code using Sublime Linter4. The plugin provides a framework for linting your code. The actual linting is done by various plugins (for Ruby5, Python6, JavaScript7 etc.), which means you need to install Sublime Linter first and then install syntax-specific linters for your code. Extensive documentation8 is available.

Sublime Linter.

Emmet Link

Emmet9, once known as Zen Coding, is an indispensable tool for any web developer. It is probably the most productive and time-saving plugin you’ll ever find.

Writing code takes time, and HTML grunt work such as writing tags and wrapping classes with quotes can be boring. Emmet takes care of all that. It magically expands abbreviations into a whole HTML or CSS structure. The syntax it uses for these abbreviations is inspired from CSS selectors. Let’s watch it in action.

Emmet.

Sublime Tutor Link

Sublime Tutor10 is an interactive in-editor tutorial for keyboard shortcuts in Sublime Text. If you have just started with Sublime Text, the plugin will instantly boost your productivity by teaching you nifty tips and tricks within the editor itself. The plugin uses the spaced repetition technique to make sure you remember the commands it teaches.

Sublime plugin: Sublime Tutor11
Sublime Tutor.

Use Package Control12 to install the plugin. Once it is installed, you can access the tutor via the “Help” menu or the Ctrl ⌃ + Alt ⌥ + K keyboard shortcut.

Sublime Text Functions Link

Go To Anything Link

This is probably the most powerful and most-used command in Sublime Text. Navigate through files, folders, symbols and lines with ease.

To go to a file:

Press the keyboard shortcode, and start typing the name of a file. Sublime Text will perform a fuzzy search and fetch you the desired file instantly.

Go to a symbol:

Go to a line:

To go to a specific line in a file, type a colon followed by the line number, or use the keyboard shortcode.

Go to anything.

Word Selection Link

Put your cursor on a word, press the keyboard shortcode, and the word will instantly be selected. If you press the same key combination again, Sublime Text will go into multi-selection mode and select other instances of the same word in the document. You can use this method to quickly add or replace text in all instances of a word.

Word selection.

This is another way to achieve the same thing. Instead of incrementally searching for a word, it performs a bulk search of the word under the cursor and switches to multi-selection mode.

Expand Selection to Scope Link

This shortcut is extremely useful for JavaScript developers. It selects the current scope. Pressing the same key combination again selects its parent scope. The video makes clear how it works:

Expand selection to scope.

Break Selection Into Lines Link

Use this shortcut to break the selected area into multiple lines, putting Sublime Text in multi-selection mode. I use this trick to quickly convert a list of words into an enclosed array of strings.

Break selection into lines.

Column Selection Link

Use this shortcut to select a column in Sublime Text. Put your cursor anywhere in the document, and then press the shortcut to select columns upwards or downwards. This also takes you into multi-selection mode, like the two commands above.

Column selection.

Sort Link

I like to keep my CSS properties sorted alphabetically. This command is extremely useful for that. Select the block that you need to be sorted (pro tip: use Ctrl ⌃ + Shift ⇧ + J to select an indentation level), and then press the keyboard shortcode.

Sort.

Turn on Spellcheck Link

No more getting disappointed by typographical errors after the code has made it to the review stage. Use this key to quickly toggle the spellchecker.

Turn on spellcheck.

Comment Link

This is one of my most frequently used shortcut. Marking comments in any programming language is made simple with this shortcut. In an HTML file, it puts in a pair of <!-- --> tags, while in JavaScript it puts // at the beginning of a line.

Comment.

Bubble a Line Up or Down Link

Want to move a snippet of code five lines up? Cutting and pasting is really old school. Use this keybinding to take the snippet wherever you’d like. Press the shortcut again to keep moving it further up or down.

Bubble a line up or down.

Duplicate Selection Link

By default, this shortcut duplicates the current line and puts it on the next line. If you select a region and press this shortcut, it duplicates the whole region.

Duplicate selection.

Join Two Lines Link

This joins the following line to the current line, replacing all white space in between with a single space. Performed on a block of lines, this joins all of the lines together.

Join two lines.

Go to Matching Bracket Link

Use this command to move your cursor from one bracket position to another. This is especially useful when you get lost in a long method and want to reach its starting position (or vice versa).

Go to matching bracket.

Close HTML Tag Link

Use this shortcut to close the currently open HTML tag. It inserts the matching closing tag at the current cursor location.

Close HTML tag.

Find in Project Link

This is the grep equivalent of Sublime Text. It finds a term within an entire project. The special thing about this command is that it is blazing fast. There are options to make it case-sensitive and to perform a regex match as well.

To search for a particular term in the current document, project-wide, put the cursor on that term and then press Ctrl ⌃ + E, which will put that term in the search box. Pressing the shortcode above populates the project-wide search box with this term.

Find in project.

Switch Between Tabs Link

Just like in a web browser, you can open multiple tabs in Sublime Text. To move from one tab to another, you can use the shortcuts noted above, and use Cmd ⌘ + T (Mac) or Ctrl ⌃ + N (Windows and Linux) to create a new tab.

Switch between tabs.

Command Palette Link

As you become proficient with Sublime Text, you’ll want to access the menus less and less and instead be able to do everything with a few taps of the keyboard. With the command palette, you can quickly type a command, and Sublime Text will do a fuzzy match with an existing set of commands, letting you access the commands from a convenient place.

Here are some things you can try in the command palette — set the syntax of a newly created file, sort lines in the current document, and install a plugin using Package Control.

Command palette.

Show Console Link

Sublime Text comes with an embedded Python interpreter. It’s a handy tool to execute Python commands or to quickly test Sublime Text’s APIs when you’re developing a plugin for the editor.

Keep in mind that this interpreter comes bundled with Sublime Text, and it is different from your system-installed Python. The purpose of this console is to interact with Sublime Text’s API for plugins. You probably used this console when installing Package Control.

Show console.

To learn what can be done using Sublime Text’s plugin API, consult the documentation13.

Distraction-Free Mode Link

For writers and others who need to be able to concentrate intently, Sublime Text has an even more minimalistic interface. Use the shortcut to toggle distraction-free mode on and off.

Distraction-free mode.

Text Command-Line Helper Link

Sublime Text includes a command-line tool that makes it super-easy to work with files on the command line. To get it working on a Mac, you need to make it available in your shell.

Assuming you’ve placed Sublime Text in the “Applications” folder and that you have a ~/bin directory in your path, you can run the following:

ln -s "/Applications/Sublime 
Text.app/Contents/SharedSupport/bin/subl" ~/bin/sublime
Text command-line helper.

To use it as the default editor for commands that prompt for input (such as git commit), set the editor environment variable.

export EDITOR='sublime -w'

On Windows, you can use subl.exe in a similar way.

Conclusion Link

Sublime Text is full of such powerful shortcuts and commands. You probably won’t be able to remember these just by skimming this article; rather, you’ll need to practice as you’re going through it. List the most useful shortcuts for yourself, and refer to them regularly as you’re working with Sublime Text. Practice is the key. You are on your way to becoming a Sublime Text ninja.

(ms, il, al, ml)

Footnotes Link

  1. 1 https://packagecontrol.io/installation#st3
  2. 2 https://packagecontrol.io/packages/SideBarEnhancements
  3. 3 https://packagecontrol.io/packages/PlainTasks
  4. 4 https://packagecontrol.io/packages/SublimeLinter
  5. 5 https://packagecontrol.io/packages/SublimeLinter-ruby
  6. 6 https://packagecontrol.io/packages/SublimeLinter-pep8
  7. 7 https://packagecontrol.io/packages/SublimeLinter-jshint
  8. 8 http://www.sublimelinter.com/en/latest/
  9. 9 http://emmet.io/
  10. 10 https://sublimetutor.com/
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/06/sublime-tutor-opt.png
  12. 12 https://packagecontrol.io/packages/Sublime%20Tutor
  13. 13 http://www.sublimetext.com/docs/3/api_reference.html
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

Quick Tips

↑ Back to top Tweet itShare on Facebook

Log in with GitHub account

Create a token at your GitHub settings page and paste it in the text field below