back to listing index

My Overused Sublime Text Keyboard Shortcuts | Viget

[web search]
Original source (viget.com)
Tags: configuration sublime-text-2 editor sublime-text sublime-text-3 keyboard-shortcuts
Clipped on: 2015-12-11

Your friends at Viget present Extend, a Code & Technology Blog

Update

Dec 21, 2014

Added a note to shortcuts which require the Emmet package.

After giving a presentation that included some live coding, a few audience members asked how I was doing stuff so quickly. Of course there’s no one answer; it’s a combination of a bunch of simple shortcuts and a lot of practice. In response to that inquiry I thought it made sense to see what shortcuts I am using on a daily basis without thinking of it.

Here's a curated list of 15 16 shortcuts (and 1 custom shortcut), accompanied by gifs, that I use on a daily basis. Enjoy!

Selecting Stuff

Moving Lines and Text Around

Cutting and Removing, Copying, and Pasting

Text and Number Manipulation

Commentating and Aligning Variables

 

Select Next Match of a Selection: + D
By placing the cursor on a word and hitting + D, we select the word. Hitting D a few more time while still holding selects the next instance of the selection found. By hitting , then D three times, I have selected three iterations of the text.

Image (Asset 1/23) alt=

Select All Matches of a Selection: CTRL + + G
Same thing as above, except grabs all matches within the file. Careful using this one since it will grab all matches within a file..

Image (Asset 2/23) alt=

Select Opening and Closing Tag Relative to Cursor: + + K
This is a gem. Maybe you want all attributes to stay the same, but just want to select the tag. This shortcut will do that for you -- and notice you can do it with multiple tags at a time. *Emmet package required

Image (Asset 3/23) alt=

Select Between Container: CTRL + D
If you place the cursor between the text and hit the above command it will select the text, much like + D. But hit it again and you get the parent container, and again to get that parents’ container. *Emmet package required

Image (Asset 4/23) alt=

Select Between Brackets: + + Space
This is helpful for selecting everything between brackets. Works with CSS too.

Image (Asset 5/23) alt=

Move Line Up or Down: CTRL + + or

Image (Asset 6/23) alt=

Duplicate Line or Selection: + + D
If you have text selected, it will duplicate your selection. Otherwise, place your cursor on the line and duplicate the whole line.

Image (Asset 7/23) alt=

Indenting and Unindent: + [ or ]

Image (Asset 8/23) alt=

Cut Line or Selection: + X
Cuts a line to your clipboard, so you can paste it somewhere else.

Image (Asset 9/23) alt=

Paste While Respecting Indents: + + V
Another one I use all the time. In the gif I show both, pasting normally ( + V) versus the paste that accounts for indentation. Notice how the indents line up.

Image (Asset 10/23) alt=

Wrap Line or Selection with Tag: CTRL + + W
Wraps a line with a tag; start typing whatever tag you want, and you're done.

Image (Asset 11/23) alt=

Remove Enclosed Container Element: + '
This removes the parent tags relative to your cursor. Helpful for cleaning up markup. *Emmet package required

Image (Asset 12/23) alt=

Evaluate Math Expression: + + Y
I never thought I would use this as much as I do... but it's really helpful. *Emmet package required

Image (Asset 13/23) alt=

Increment and Decrement: + OPTION + or , OPTION + or
Holding will change the number by 10, and by 1 when not being held. And notice you don't have to select the number, Sublime Text is smart enough to update the closest number in the line. *Emmet or Hayaku package required

Image (Asset 14/23) alt=

Upper and Lowercase: + K then U, + K then L

Image (Asset 15/23) alt=

Comment Selection/Line: + /
This works across all languages, and works with lines or whole selections.

Image (Asset 16/23) alt=

Bonus! Use AlignTab with a Custom Keyboard Shortcut

The above shortcuts come with Sublime Text by default, but you can add your own custom shortcuts. The below example applies the AlignTab package using three custom key bindings to vertically align values based on =>, =, and :'s. Since I mainly work in JavaScript and PHP, these bindings account for almost every scenario I need, but you can vertically align with whatever character you want.

To duplicate gif below in your own editor, just install AlignTab, add the custom bindings to your custom key bindings file, select some code, and hit CTRL + + . or ; or =.

Image (Asset 17/23) alt=

Conclusion

Once you see a change that has to happen on multiple lines, there’s usually a way to accomplish the changes in fewer keystrokes than editing them one by one. By using a combination of the above shortcuts in succession to perform a repetitive or predictable change, you can greatly increase how fast you code.

Here's a short Gif that combines selecting all matching occurrences, copying the links' text, utilizing multiple curses to paste that text, and transforming that text to to lowercase.

Image (Asset 18/23) alt=

If you have any shortcuts you'd like to share, check out this post on how to make learning videos and share it with us!


Get More From Viget

Subscribe to get our monthly newsletter and occasional special announcements.

  • Email Address

Image (Asset 19/23) alt=
Tommy Marshall Front-End Developer

Facebook Twitter Google+

Extend is…

RSS

A Code & Technology blog—our thirty foot view. Primarily written by/for Ruby, iOS, and front-end developers.

  • Search

More Viget Blogs

  • Image (Asset 20/23) alt=
  • Image (Asset 21/23) alt=
  • Image (Asset 22/23) alt=
  • Image (Asset 23/23) alt=

We’re Hiring

  • Get Email Updates
Viget
  • Falls Church, VA
  • Durham, NC
  • Boulder, CO

Strategy, Design, & Development. Vigorous since 1999.

© 1999–2015 Viget Labs, LLC. Terms & Conditions : Privacy Policy