Quickly Move, Select, and Manipulate Text in VSCode with AceJump and Expand Selection

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

AceJump enables you to move the cursor in VSCode around the screen as quickly as you can type 2 characters. This is drastically faster than the common workflow of moving your cursor around with your keyboard arrows or mouse. Expand selection enables you to select the text underneath the cursor and expand the selection to logical places to help you select the surrounding code. This lesson walks you through these shortcuts to power up your daily coding workflow.

John Lindquist: [0:00] Open the command palette and type install and select Install Extensions. Do a search for acejump. My preferred ace jumper is Code Ace Jumper. Go ahead and install that by clicking the green button here, and follow the instructions for setting up keyboard shortcuts, which are listed below down here for each of the types of jumps -- ace jump, multiChar jump, line jump, and selection jump.

[0:26] AceJump allows you to look somewhere on the screen, like the word reload. It will have the cursor up here next to return. I'll hit my AceJump shortcut and you'll see type will appear down here in the bottom left. I'll type the key r, because I want to go to reload. This will show an n highlighted, so when I press n, it will jump to that word.

[0:47] Anywhere on the page, instead of sending your cursor flying around the screen up and down and left and right, your eyes can just look to where you want to go, like to this noreferrer. I'll hit my shortcut, type n. You'll see an m will pop up. I'll type m, and the cursor jumps all the way from up here down to here.

[1:07] One setting that goes nicely with this, if you open your settings with Command-Comma and you search for cursor is the Smooth Caret Animation. If I disable this, you'll see when I jump around, I'll jump back to noreferrer, you'll see the cursor will just pop down there from top to bottom. Let me jump back up to return, and you'll see the cursor just pops up there.

[1:28] It's nice in your settings when you enable the Smooth Caret Animation. You'll see the caret will smoothly animate down to where you want it to jump to. I'll jump down to noreferrer, and you'll see the caret quickly glide down.

[1:41] The AceJump line shortcut allows you to jump to any line, beginning or end. If I want to jump to line 9, I can just type c. If I want to jump to line 19, I can just type w. I'm just hitting the shortcut. You can see jump to appears down here in the bottom left, and then type in the character where I want to go.

[1:59] Then the selection shortcut, if I want to select all the way up to the word and, I can hit the selection shortcut, type a, hit n, and you'll see it'll make that entire selection. Rather than having to drag your mouse across like this, it can do a much more accurate and quick jump.

[2:15] When you hit the jump to line shortcut then the selection shortcut, you can select a group of lines. If I want to start from 7 and select down to 18, you'll see u pops up. I'll type u, and it selects that entire block.

[2:30] Another shortcut that pairs well with AceJump is expand selection. If I want to jump down to this app right here and my cursor is here, but I wanted to rename this to something like Container, then I can jump down there to app, type m, then I can hit the expand selection shortcut, which will select that word, and I can just start typing Container.

[2:50] This will save you from either trying to manually select or deleting and then typing. It allows you to accurately just select that block and start typing. If you wanted to expand this even more, you could just hit the shortcut again and select blocks that you want to either get rid of or type over.

[3:07] You'll find this is common when if you want to jump to a class name, like App-logo, you jump to logo, then expand selection, and type in something like header or some other class name. I could quickly jump around, select things, rename this, without having to fly my cursor around or manually select things with my mouse.

[3:26] It's also important to know that there's a expand selection, but also a contract selection. If you accidentally select too much, you can minimize it and go back to as small as you want from where your cursor starts.

[3:41] If you open the command palette and type in keyboard shortcuts and select that and type expand, you can edit the keyboard shortcut inside of your expand selection in here.

[3:50] You'll also find the expand selection handy if you're at the end of a word or somewhere in the word as you're typing. If I hit expand selection here, I can just overwrite what was behind it. As you're moving around, hit expand selection. It's an easy way to select and overwrite words.

egghead
egghead
~ an hour ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today