Become a VS Code Power User

Common Keyboard Shortcuts

Steve Kinney
Temporal
Become a VS Code Power User

Lesson Description

The "Common Keyboard Shortcuts" Lesson is part of the full, Become a VS Code Power User course featured in this preview video. Here's what you'd learn in this lesson:

Steve walks through some common keyboard shortcuts including Command-P, Command-Shift-P, and Control-G. Steve also introduces the "go to bracket" feature, the terminal shortcut (Control+`), and how to switch between editors and the terminal.

Preview
Close

Transcript from the "Common Keyboard Shortcuts" Lesson

[00:00:00]
>> Steve Kinney: Here's the thing about Cmd+P and Cmd+Shift+P, you're gonna mess it up, right? You're gonna mean to open the Cmnd palette, and sometimes you'll see the files, you could close it. We'll see who's got the iSpy, gold medal today, which is, if I hit Cmd+P, I see the file switcher, not Cmd+O.

[00:00:25]
That's a different thing that I never want. If I hit Cmd+Shift+P, what's the difference in the contents of that input field?
>> Speaker 2: Secure it in there.
>> Steve Kinney: It's secure it in there, right, which is nice, because it means if you hit Cmd+P, and you meant to hit Cmd+Shift+P you just type the caret and you're in the same place.

[00:00:44]
If you did the opposite, you delete the caret and you're in the same place. The only difference between those two views is whether or not they put a caret in there for you, right? So either one is an option as well. There's also this pound sign which, what's this?

[00:01:03]
This is actually super useful by the way. In the given editor that you're in, all of the quote-unquote symbols, right? Or this is actually in the project itself, right? So if all your functions are poorly named, this is not super helpful for you. But we've all got those ones that maybe pull in from an API and format your data, or something along those lines.

[00:01:31]
If you know the name of the function you're looking for, you can try to guess what file it's in. Hopefully, you've made that easy on yourself. But if you haven't, you can also just kind of do this. And this is looking for a symbol, right? So this is the same as go to symbol and editor, right, Cmd+Shift+O as well.

[00:01:49]
And so here you can jump to a given function, right, and see it as well. And we'll see some other ways to kinda jump around later. But again, I mean, I'm repeating it over and over and over again cuz it bears repeating at the beginning of this workshop for all of the things, pausing.

[00:02:07]
Anytime you catch yourself not thinking your big brain thoughts, think about, why? What am I doing? And yes, the act of thinking about why is a further distraction from your big brain thought, I get that 100%, right? But we're trying to do nice things for future us and not current us in this case.

[00:02:25]
Cool, cool, cool. So we split editors. The other option that you can do, there's things that you learn about an editor when you're preparing to teach a workshop on an editor. You can also open, yeah, the same file in a new window as well. I have never wanted to do that in my life.

[00:02:51]
I will split my editor a thousand ways on a big enough screen. I have never wanted to do that. The other feature that I think is probably better for writing than it is for coding is we've also got Zen mode, right? Which kinda focuses you in, you can change some of the settings here where you can only see a line or two.

[00:03:14]
Very probably good for writing a bunch of Markdown, usually not what I want when I'm coding. But more importantly, if you find yourself in this view, that's how you got there as well. And any of these are changeable, we'll talk a little bit about keyboard shortcuts in a bit.

[00:03:36]
But if we have tabs, we have got Cmd, Option Tab, or Ctrl, Alt and the arrows rather. And this will actually split across panes as well. So if I have this one here, I can kind of walk across the different tabs that I have, and it'll go from the first editor group to the second editor group, so on and so forth.

[00:03:58]
As well, like I said, we can jump between the different editor groups. Like I said, you've got that 1, 2, 3, 4, or you've got the ability to kind of move up, down, left, and right as well. The other one is, anyone ever have a failing test? Has that ever happened to any of you, yeah?

[00:04:19]
There's a bunch of really cool tricks, like sometimes you can probably just Cmd or Ctrl click on it and open it. But let's say you get something where it's like or maybe you saw it in the GitHub action or CICD where it's like, you have a problem on such and such file line 235, column 197, right?

[00:04:40]
Let's go over to this one again. The other nice thing you can do is Ctrl+G, or again, you just go to line/column. First, it tells you where you are right now but you could also say that I wanna go to line, I know 25.
>> Steve Kinney: Take me to line 25.

[00:05:06]
I can jump to whatever line I need to jump to and it'll shoot me down there as well. Again, the little things just for jumping around cuz, yeah, in a 40 line file, not a big deal. We all know the file I'm talking about. You have that, we all have that file.

[00:05:22]
We regret that file. Maybe it's some kinda auto generated data or something along those lines. We all have the file. Each one of our 1000 line files are different. Sometimes they are deeply problematic, but we all have them and so here we can jump around super easily. The other one that honestly is worth the price of admission alone to this workshop is, I just say what I'm gonna call go to bracket.

[00:05:56]
I'm gonna call go to bracket cuz it is called go to bracket, right? And that is why I'm going to call it go to bracket. So we again, go to bracket, is this Cmd+Shift+backslash. And what it does is let's say you were in, in this case, these parentheses.

[00:06:19]
>> Steve Kinney: As you can see very subtly. It will jump to the closing bracket, right, from the opening to the closing. There is another useful one that we will put a key binding to a little bit later, and the way that I discover this one is going. I really wish VS code did this, half the time when you really wish VS code did something.

[00:06:41]
It might and what do you do? You open up the Cmd palette, we sent you the theme here, then you step in bracket. There is also select a bracket, when we select everything in between two brackets. You will notice that this does not have a key binding, you can control all of that.

[00:07:03]
We will get there, we have an agenda. I promise you, we will talk about key bindings. But again, some of this starts with, I really wish it would do such and such. And then again, training the ability to go in there and find something I have never wanted.

[00:07:19]
I guess, there's a word where I might wanna do that one. Select a bracket again, just to show you the go to bracket. Except that I have definitely changed that one and overloaded it at this point. But you can jump back and forth between them. You will also find all the different places where you have other apps that have taken over keyboard shortcuts.

[00:07:44]
We will talk about ways to dedupe that, and at least on MacOS, see what some of them are as well. So here, we've got go to bracket, it will jump between the two of them. Other fun ones is that terminal we saw before, you can open it up, again, there's a terminal Cmd here.

[00:08:05]
But we can also hit, in this case, on a Mac Ctrl+backtick, and it will open up the terminal. Now the interesting one, again, this is where, there are some things that do not happen into the box. We will fix them all later, as again, we begin to build our own lightsaber.

[00:08:20]
Which is to get back to the editor, you can hit either Cmd +1 to get back to the first editor, or 2 to the second one. There's not really a great way out of the box to get back into the terminal, you can see if it works on yours.

[00:08:39]
But I think, you can set one up so you can go back and focus to it if it's already open. And we will set that up together in a little bit, but you can jump around again. These are all the things where that's not that hard, right? Also have a very small screen right now, not that I'm complaining about that the entire time, but right now I am.

[00:08:56]
But like all those things, if we can get all those little micro things down to the point we can just think our big brain thoughts and the rest becomes muscle memory, we are happier people. Are you gonna memorize all these immediately, cuz I said them once or cuz you read the notes?

[00:09:11]
Probably not, but if you just, again, build the habit, catching yourself and jumping down that you will see all of the various pieces as well. Like I said, there's a lot of work to do to customize the editor. All the ways that make us happy, again, the ways that make me happy might not be the ways that make you happy, and we'll talk about how to personalize and customize it in a little bit.

[00:09:35]
But out of the box, these are some of the high level ones that we have as well. In the kinda course website I did grab some of the common ones and make some pretty tables with what the various shortcuts are. Again, I got carried away, I put copy and paste in there, I don't know.

[00:09:59]
But, yeah, some of the common ones that you might need and use, because watching me go through every keyboard shortcut one by one is probably a form of torture. So there is a reference again, but pop quiz. What's the best way to figure out what the keyboard shortcut is for something?

[00:10:19]
>> Speaker 3: Use the Cmd palette.
>> Steve Kinney: Use the Cmd palette, right, again, building habit will not solve your problems overnight, but probably over a week or two will. So that's not a bad timeline, I'm into it, cool. So that's kind of something long and short of the editor layout as well, just checking real quick if I've got other big brain thoughts.

[00:10:45]
Yeah, the other thing you can do in there as well is, if you hit the up arrow, you can kinda also move through some of the things as well. Again, it's a fuzzy search. So you can kinda explore. As you can see, a lot of these have a little gear, right, that is the ability to add a key binding to it.

[00:11:04]
We will talk about that dedicated in its own little piece in a second or two, but kind of to give a little spoiler alert, right? You can kind of see some of where we're gonna go with this as well.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now