Creating Custom Keybindings

[00:00:00]
>> Steve Kinney: So a lot of talk about, you can set your own key bindings. So let's talk about it. So like I said, if you find anything in here that you might want to use and it does not have a key binding, guess what? You can make one. Inf act, there's a bunch of ways to do this.

[00:00:21]
You could also just do, let's find what's one that we wanna add? I don't know, let's see what we've got in here right now. So you have a file somewhere depending on your operating system where applications keep their settings. That has all of your key bindings. Now, it is a JSON file.

[00:00:44]
This is great for a few reasons. VS Code does have a thing called settings sync, which will sync your settings. It does what it says on the tin. Having it as a JSON file, which is true for almost all of our settings, will also allow you to copy and paste them, which sometimes is super useful if you wanna share them or something along those lines, you can kinda take something, immediately have the JSON.

[00:01:11]
So this is one I set up earlier that we kinda saw, and we'll talk about the moving pieces in here, which is as I said before, I'm actually gonna delete this one for a second so we can see. If I go in here, we close this for a second.

[00:01:31]
Hitting control Backtick will open and close the terminal, but that was never what I wanted, and it drove me crazy. What I wanna do is do things here, go back over to terminal, right, and then jump back and forth. So one of the key bindings that we can add is, again, we saw that one here as well.

[00:01:58]
If you see two in a row, you just typed them two in a row, right? So in this case, desired key combination, you can press anything you want, hold your favorite chord. What's the most egregious thing I can press?
>> Steve Kinney: Right, and here we've got a commandId, and then when, right?

[00:02:25]
The commandId, everything in VS code has some kind of identifier, whether it's a setting or a given command. It's got some almost an object notation of editor.focus whatever, right? We look up here, it's like workbench.action.terminal.focus, right? And the other interesting part is there is intellisense in here, which is pretty cool.

[00:02:48]
So you could do something like this and you will see all of the options but you can also begin to take a look and try to figure out which one you were looking for. Now, there's probably an easier way to do that, which is, again, let's say the sort lines ascending, right?

[00:03:09]
We could go ahead and give it a key binding of, again, whatever you want that to be. If you are coming from an editor where it has a keyboard shortcut, you could choose to use that. I cannot because text mate it was F5 which is used in VS Code.

[00:03:28]
So we could do something like ctrl+shift+alt+s, right? Cuz I probably messed up, I have You open a file and have unsaved changes, and then you change in another editor, things get sad on you. So let's go ahead, change that.
>> Steve Kinney: Let's open up. Carrot in front and that's how we do it.

[00:04:04]
>> Steve Kinney: So yeah, you can see that this is like finding the one that is for sort lines ascending. It currently has no key binding. What happens when we clear out the search? It's all the options, right? And so for whatever you wanted to do, you can just go in here search for the thing you were looking for.

[00:04:21]
If you hit the gear, it will hyper focus the search for you. If you just kinda open up this keyboard shortcuts pane, you will see all the things, right, as well as where they come from, right? The built-in ones come from system, obviously the ones you define. So even though I don't remember the whole one, I know it's terminal focus, right?

[00:04:45]
There's there it is, right? You can see my user one versus all the ones built into the system, right? So you can edit that JSON file. You can also just go in here and come up with one as well. The name of the action is here as well, but you probably found it the normal way the key binding.

[00:05:06]
The interesting part is this when right, which is sometimes you only want the keyboard shortcut to work in certain situations, right? And the more granular you get here because you only have so many keys on your keyboard and so many modifiers, right? And you can start doing that weird command K other thing and start setting up entire chains and do weird things like bending your hands in unnatural ways to try to hit command option, control shift or whatever.

[00:05:36]
But the other option is to kind of get a little bit more granular on when something should work, right? For instance, and we'll look at a list in a second, you can say, hey, only when I'm in an active editor, or only in the explorer, or only when I'm editing a JavaScript file, right?

[00:05:57]
And get really granular about when you want one of these to happen, and kinda see those as well, right? So, obviously there are some very common ones, but there's a very long list as well for anything you might ever possibly wanna see. I think some of the ones that you will see.

[00:06:18]
Most common is editor text focus. You saw before in that terminal one, I had terminal focus. So you can have different keystrokes that only work when you're in the integrated terminal. And maybe they do something different when you're in the editor. It kinda gets you double bang for your buck if your brain can handle that.

[00:06:35]
But ideally, if you get to the muscle memory, your brain steps out of the equation for a little bit. The other one that we saw before is if it is just a true false, then you get to the point where you can just put it in there. If you wanna say, does it equal something, you can kinda say like, okay, if I am in a JavaScript file.

[00:06:55]
And we will see various abbreviations for TM, which actually does, for all the joking that I do stand for TechMate. Which one of the things that editor brought to the table, which is, yeah, let's say you're in a TypeScript file. It knows the TypeScript is a super set of JavaScript, so anything that would work in the JavaScript context also works in the TypeScript context.

[00:07:21]
If you are in a JSX file, that is technically JavaScript React, which is all of JavaScript plus JSX. TSX files get you into a language mode called TypeScript React, which is all of JavaScript, all of JavaScript React, all of TypeScript, right? And so there is a cascade, kinda subclasses as well.

[00:07:42]
So you do need to be a little bit careful about that. But yeah, terminal focus, the diff editor for when you're doing a get diff, you have different commands for resolving conflicts, right? Again, all the things you find yourself doing by hand if there's not a shortcut, you can give it one for yourself.

[00:07:57]
That's a very personal journey, and you should decide what works for you given whatever keyboard layout you have. I've got a big boat of a keyboard at home versus if you're always on a MacBook. I got an F20 key that I can play with but that kinda changes.

[00:08:15]
Some other ones that I went cuz there's a lot, I'll show you how to see all of them in a second. And to debug which one you're in in one moment. Some other fun ones that maybe as I looked at the big list could be useful to you.

[00:08:32]
Again, sidebar focus, sure. A lot of the logical operators that we know and love from JavaScript with one less equal sign, work in here as well. So double equals [INAUDIBLE] equals. But generally speaking, okay, if it's in the terminal focus and I've got a terminal open or if it is in an editor and it's a JavaScript file, right?

[00:08:55]
Or Ruby, what have you. If it's for inserting a comment, right? Certain languages have the same comment syntax, right, C in JavaScript, for instance, as well. If you wanna find out, if you've taken this to its natural conclusion, and you're really trying to get super granular. VS Code is an electron app.

[00:09:22]
Electron app is effectively node and Chrome blended together, which means,
>> Steve Kinney: You can toggle the developer tools and that looks like something we know and love, as well. And so, now you could do something like,
>> Steve Kinney: I wanted the other one.
>> Steve Kinney: Expect contact keys. And you get this fun red thing here, which kinda looks like when you're inspecting an element in Chrome.

[00:10:06]
And let's say, I don't know what this file is. Let's go back to this other file over here. Find something, and you will see this giant object. If you really ever want to know what are all the things I can win in a key binding? Well, this is the answer to your question, and now you know why I didn't put the full list on the website.

[00:10:33]
And this will change depending on the extensions you have installed, too, right? You can see, all these Github ones, I'll give you a lucky guess which extension added those, right? But if you are trying to figure out, you can kind of grab a given thing in the editor and get all the true and falses, right?

[00:10:53]
Obviously you're gonna get more falses than trues, right? But you can say, okay, input focus is true. I think editor focus, which is, I'm not finding it anytime soon, will also be true in this case. So on and so forth.
>> Speaker 2: So can you chain these together when this and this is true and this and you just keep combining things.

[00:11:20]
>> Steve Kinney: Absolutely, so if we check out this is like a system one, and you can actually go in there and see all the system ones too, cuz it's JSON file. You can kinda get a sense of what it might look like for some of these, for focus terminal, my user one terminal has been created cuz I'm using the same keystroke as creating a new terminal pane.

[00:11:40]
So if terminal has been created and it supports terminal, there's ways to disable it, right? Cuz then don't do anything. But, for any of these, you can use end to end, ors, equals, right? You get a few of the logical operators where you can kind of get granular, exactly when this ought to work.

[00:11:59]
That said, the more complicated you may make this, it's one of those things when it works is great. And when it doesn't, kiss your morning goodbye, right? Cuz you will tweak this? But if you're getting false positives, I think it's better to then, I wouldn't start out egregious with a very long logical chain, right?

[00:12:21]
I would start out with the simplest possible option. And then if I got false positives when it was triggering, when I didn't want it to get a little bit more granular over time. And like I said, at any point, you can toggle those developer tools, go back over here, and do the inspect context keys, find exactly where you would have been or wanna be in this case.

[00:12:46]
And you will get all of the true and false values and you can kinda work backwards from there. That way, you're not playing a weird guessing game, because simpler version of this is randomly guess. Or let's be honest with ourselves. Copy and paste things you found from the Internet, which really works most of the time.

[00:13:04]
Honestly, for simple things. If you're in some bespoke language where there's not a lot of, if you're in a Lua file inside of whatever, you might be on your own a little bit. And you can kind of deduce it from here as well. So as we know, for reasons that nobody quite understands.

[00:13:24]
Windows and Linux use control for everything. MacOS uses command, there is no command key. This is the world we live in. This is why I can't switch computers, not because the operating systems are better or worse, but because I have muscle memory at this point, and so I pay too much for computer every time.

[00:13:40]
Cuz that's where the keys are. You can also say in this case, if I wanted it to be slightly different on a Mac, I could give it a Mac shortcut. This is useful if you're trying to make a file that you are sharing whether as a VS code extension, which we'll talk about later.

[00:13:56]
I guess, if you're syncing your settings and you're on two different computers I don't know how you live like that, but whatever, you can theoretically specify it for a different OS to be a different keystroke. So if you find that that key means something on Linux, right, then you can choose to do something slightly different in that case.

[00:14:19]
Cool, the other ones we saw before, which are these multi stroke key bindings. And so for instance, one of the ones that I use a lot is, let's say I have two panes and I can't see anything anymore and I'm frustrated and I wanna cry. One of the ones where you can just kill an entire editor group is Command K, then W, and that is just you hit Command K and then w, real quick, right?

[00:14:51]
And I won't save, close that entire editor group, right? You can make these yourself
>> Steve Kinney: By simply doing something, it's a comma in this case or a space rather. So if you did cmd-k, control backtick. Good luck switching your finger from the Command key to the Control key and getting that dance down.

[00:15:22]
But should you accomplish that muscle memory, right? Now, you can kinda buy yourself almost name space for some of these keyboard shortcuts, because now you hit Command K. And if you get to the next one quick enough, I would probably not choose another modifier, but we saw before it was Command K, W.

[00:15:39]
So you hit Command K, and then you hit W, and then it'll close the entire editor tab. So if you ever see those, or if you want to do something like that, you can theoretically have one followed by another by yourself a little bit more space. Like I said, that is probably for the use case in which you know what you're doing at that point.

[00:16:02]
I cannot come up with a hypothetical situation in which you would need to do that. But one time, maybe three years from now, you'll be like, I need that. And I'm glad we did this together. Cool, cool, cool. I'm gonna put that back. As you can see, this one, for instance, for defining key binding is command K.

[00:16:23]
So you just double tap that one. And you could also just press whatever you want, in case you don't wanna remember the weird syntax, right? So you could do, I don't know, ctrl+shift+f1, right? And that will be the new keystroke, it will put a new one in there.

[00:16:39]
I would probably use that visual editor that you saw before, but it's up to you as well. Cool, questions, comments, concerns, cries of outrage on key bindings? Don't get carried away cuz you will do the thing where you set up a bunch and don't remember any of them.

[00:16:57]
>> Speaker 2: Can you chain commands together, so one key binding that could do multiple commands at once.
>> Steve Kinney: I love when you ask a question that it's like, I'm ready for.
>> Speaker 2: [LAUGH]
>> Steve Kinney: The question was, can you have one keystroke that does multiple things? No ish, not out of the box, there is an extension called multi command, which has 139,000 installs.

[00:17:22]
So you are not the first person to ask this question. And you can install this and as you can kinda see what the syntax looks, where the command will be this "extension.multiCommand.execute", but then it has a bunch of things you can kinda type in a row. So you would set up the individual ones, and then you could have it, it's kinda macro in Vim, right?

[00:17:46]
Where you can kinda say, again, this case is like cursor down three times, which is a thing, I guess. But you can put together an entire sequence of things and change stuff together, you just need an extension. Many times, if it is not built in, the answer is, there's probably an extension for that.

[00:18:02]
And the nice part is, when we look at some of the extensions in a little bit, it should make it very clear how crazy you can take it. You could build a full size app inside of VS Code, right? And as many reasons why you might wanna do that.

[00:18:20]
Insofar that, a lot of stuff is taken care of for you, right? You don't have to package your own electron app then, or host your own website. You can just have an extension. We will see an official first party extension later that very much walks that line of app with inside of an app, right?

[00:18:38]
Which could be useful for a lot of various use cases. We'll even build a very simple version because, most of the work is not necessarily VS code related as regular old JavaScript. So we'll look at some examples towards the end of building our own extensions as well, it's gonna be great.

[00:18:54]
And it is one of those things where my hope is, at the time you're like, yeah, that's cool. And then a week from now, you're like, I can do that thing, that thing that I wanna do, you almost definitely can. We're building one. I work at this company where we build a developer tool called temporal, but then the ability to spin up the server, to spin down the server, open the given workflow in the browser.

[00:19:17]
Or see the list of running workflows, you can do that all from the editor. And you can kinda take the thing that you work on or something. This is obviously we're building this for consumers of the product, right? To kinda be integrated in there as well and be able to spin up all those things very easily.