Expand and Shrink Selection with VSCode

Kent C. Dodds
InstructorKent C. Dodds
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 4 years ago

Expanding and shrinking selection with VSCode's built-in intelligent selection feature makes refactoring code a breeze. In this lesson, learn how to do this with the ⌃⇧⌘← and ⌃⇧⌘→ keyboard shortcuts.

Instructor: [00:00] I got this counter component, and I want to refractor this a little bit so I can extract this on quick handler to a named function. The quickest way for me to do that is to put my cursor somewhere in the function, then hit control-shift-command, and then right arrow. This will expand my selection.

[00:17] It does so intelligently so that it expands to the right code tokens so that it actually makes sense. If I start here, it just grabs the identifier, and then I do right again, and that grabs the whole expression. I do right again, that grabs that whole arrow function right there.

[00:35] I do it again, and it grabs the function call of set count. One more time, that grabs the whole function. I can cut this, call this, increment, and then increment right here, and just paste it right there.

[00:48] Because VS Code does this intelligently, even if I have things formatted in a really funny way, this will still work by hitting control-command-shift, right, right, right. It's going to grab the whole expression. Now it grabs the whole arrow function just like it was before, because VS Code is doing this intelligently.

[01:07] That's control-shift-command, right, and left to expand and shrink selection intelligently with VS Code.