Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

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.

Further Reading on SmashingMag: Link

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 available4 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 Enhancements5 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 Tasks6 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:

  • Cmd ⌘ + Return ↵ (Mac)
  • Ctrl ⌃ + Return ↵ (Windows and Linux)

To mark as done:

  • Cmd ⌘ + D (Mac)
  • Ctrl ⌃ + D (Windows and Linux)

To mark as cancelled:

  • Ctrl ⌃ + C (Mac)
  • Alt + C (Windows and Linux)
Plain Tasks.

Sublime Linter Link

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

Sublime Linter.

Emmet Link

Emmet12, 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 Tutor13 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 Tutor14
Sublime Tutor.

Use Package Control15 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:

  • Cmd ⌘ + P (Mac)
  • Ctrl ⌃ + P (Windows and Linux)

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:

  • Cmd ⌘ + R (Mac)
  • Ctrl ⌃ + R (Windows and Linux)

Go to a line:

  • Ctrl ⌃ + G (Mac)
  • Ctrl ⌃ + G (Windows and Linux)

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

  • Cmd ⌘ + D (Mac)
  • Ctrl ⌃ + D (Windows and Linux)

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.
  • Ctrl ⌃ + Cmd ⌘ + G (Mac)
  • Alt + F3 (Windows and Linux)

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

  • Cmd ⌘ + Shift ⇧ + Space ␣ (Mac)
  • Ctrl ⌃ + Shift ⇧ + Space ␣ (Windows and Linux)

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

  • Cmd ⌘ + Shift ⇧ + L (Mac)
  • Ctrl ⌃ + Shift ⇧ + L (Windows and Linux)

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

  • Ctrl ⌃ + Shift ⇧ + Up ↑ / Down ↓ (Mac)
  • Ctrl ⌃ + Alt + Up ↑ / Down ↓ (Win)
  • Alt + Shift ⇧ + Up ↑ / Down ↓ (Linux)

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

  • F5 (Mac)
  • F9 (Windows and Linux)

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

  • F6

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

  • Cmd ⌘ + / (Mac)
  • Ctrl ⌃ + / (Windows and Linux)

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

  • Cmd ⌘ + Ctrl ⌃ + Up ↑ / Down ↓ (Mac)
  • Shift ⇧ + Ctrl ⌃ Up ↑ / Down ↓ (Windows and Linux)

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

  • Cmd ⌘ + Shift ⇧ + D (Mac)
  • Ctrl ⌃ + Shift ⇧ + D (Windows and Linux)

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

  • Cmd ⌘ + J (Mac)
  • Ctrl ⌃ + J (Windows and Linux)

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

  • Ctrl ⌃ + M

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

  • Cmd ⌘ + Opt ⌥ + . (Mac)
  • Alt + . (Windows and Linux)

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

  • Cmd ⌘ + Shift ⇧ + F (Mac)
  • Ctrl ⌃ + Shift ⇧ + F (Windows and Linux)

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

  • Cmd ⌘ + Shift ⇧ + [ or ] (Mac)
  • Ctrl ⌃ + Page Up ⇞ or Page Down ⇟ (Windows and Linux)

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

  • Cmd ⌘ + Shift ⇧ + P (Mac)
  • Ctrl ⌃ + Shift ⇧ + P (Windows and Linux)

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

  • Ctrl ⌃ + `

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 documentation16.

Distraction-Free Mode Link

  • Cmd ⌘ + Ctrl ⌃ + Shift ⇧ + F (Mac)
  • Shift ⇧ + F11 (Windows and Linux)

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://www.smashingmagazine.com/2010/10/50-powerful-time-savers-for-designers/
  2. 2 https://www.smashingmagazine.com/2013/10/powerful-workflow-tips-tools-and-tricks-for-web-designers/
  3. 3 https://www.smashingmagazine.com/2011/01/cleaning-up-the-mess-how-to-keep-your-coding-workflow-organized/
  4. 4 https://packagecontrol.io/installation#st3
  5. 5 https://packagecontrol.io/packages/SideBarEnhancements
  6. 6 https://packagecontrol.io/packages/PlainTasks
  7. 7 https://packagecontrol.io/packages/SublimeLinter
  8. 8 https://packagecontrol.io/packages/SublimeLinter-ruby
  9. 9 https://packagecontrol.io/packages/SublimeLinter-pep8
  10. 10 https://packagecontrol.io/packages/SublimeLinter-jshint
  11. 11 http://www.sublimelinter.com/en/latest/
  12. 12 http://emmet.io/
  13. 13 https://sublimetutor.com/
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/06/sublime-tutor-opt.png
  15. 15 https://packagecontrol.io/packages/Sublime%20Tutor
  16. 16 http://www.sublimetext.com/docs/3/api_reference.html

↑ Back to top Tweet itShare on Facebook

Jai Pandya is a full stack web applications developer and specializes in creating scalable platforms. He was an early engineer at SlideShare and later worked at LinkedIn after its acquisition. He recently co-founded a hacker collective, Mutables, where he works on interesting product ideas with cutting edge technologies. Machine Learning is his new found love.

He is passionate about better tooling and workflows for developers, which is also why he created Sublime Tutor, an interactive in-editor keyboard shortcuts tutorial for Sublime Text.

You can Follow Jai on Twitter

  1. 1

    Ivan Čurić

    June 17, 2016 12:50 pm

    I suggest using Sublime-expand-region as an alternative to built in selection expanding. Works wonders in HTML, CSS and JS. I couldn’t imagine working without it anymore!

    2
  2. 2

    Thanks Jai for the awesome shortcuts and tips. I found them very handy and use them very often in my daily activity. I have been using Sublime for 4 years now and still found your article very helpful.

    6
  3. 3

    I knew and use most of them…. the one that I didn’t know is joining the lines together… very, very handy

    3
  4. 4

    great article!
    Thanks!

    0
  5. 5

    some are new to me and VERY good. ST is so awesome :)

    1
  6. 6

    Kevin Kirchner

    June 20, 2016 3:13 pm

    Command ⌘ + Ctrl ⌃ + g to multi-select all instances of your current selection in the current file has also been an invaluable shortcut for me personally.

    7
  7. 7

    The ST Bible!

    0
  8. 8

    This is great.

    A few other great resources I’ve found are Wes Bos’s Sublime Text Book: https://sublimetextbook.com/

    and a Brain Dump on Sublime Text 3:
    https://selfteach.me/sublime-text-3-brain-dump/

    1
  9. 9

    Here is a nother useful one:

    In any numbered value, put the cursor on it, pressing CTRL + up/down arrow keys will change the value on one-per-click basis.

    ;)

    1
  10. 10

    Hi,

    SB3 is a great editor but has some tiny details (bugs) which make me crazy sometime. One of them is making Emmet working in Latte templates. Does anyone know how to do that?

    Thx in advance
    Pavel

    0
  11. 11

    I love Sublime Text and all its advanced features until I want to print my code. I know we should save resources and all, but no print function is simply ridicolous. It has been in the top 5 requests since the beginning and is not there yet.
    Sorry Sublime, but you wont get 70 bucks out of me till this is sorted out!

    0

↑ Back to top