Creating an Extension with JavaScript

[00:00:00]
>> Steve Kinney: So, yeah, that is the simplest example. Let's jump into a slightly less simple example, and we'll get progressively I'll kind of show you three layers of this. Now, again, you saw the AI toolkit. You can see where the natural conclusion of this is, and there are other ones, again, for all sorts of fun things like you can control basically any part of Versus Code.

[00:00:21]
You can even hook into Copilot, and make chat sessions. The documentation on it is really last time I checked, terrible, but you could do it. So we'll go in and so we've got a few other ones. We're gonna go and look at, what was the name of the other one?

[00:00:39]
Comment highlighter, so we saw those extensions before that did something like, we'll make all your to-dos or fix me of various color, right? And so this is a very high level take on that. So this would have been if you ran the generator and you said I wanted a new extension JavaScript, right?

[00:01:03]
And so now there's a little bit more going on in here. Not a lot more, but a little bit more. So what do we have in here? Okay, we've got package J Sound, we love those. So there's a few things, this one contributes a command, and that command is extension.decoratewords.

[00:01:25]
An extension could literally be the name of your extension, right? And so, the one I'm working on for temporal, it's actually temporal.. You saw those other ones, like github.so you would probably give it a better name, but I couldn't decide on one, so we went with extension. Obviously, you do not want to clash with existing ones, that is bad.

[00:01:50]
So you will also have a publisher name that you can kind of put in here as well. The other one that's kind of interesting is activation events. So we talked about before that all of the extensions have a cost, right? So then the trick is to be very judicious with when that plugin gets activated.

[00:02:14]
If it is just something that you trigger a command, then you don't even need to have activation events, it'll be should you run one of those commands? It will be activated, right? And that is great for things where you want to open the command palette and run it cuz then your extension has, other than registering that it exists, doesn't have any cost until you kick it off, right?

[00:02:38]
But in this case, what if I want to find this? Like the first example of this is like, find every fix me and give it a red background. I can wait until someone says, find all the fix mes, or I can do it under some conditions and there's lots of different conditions.

[00:02:50]
In this case, I'm saying if they open a file that is in the language JavaScript or TypeScript, activate the extension. So it's fix me, it could have worked anywhere, I'm making a point, leave me alone. And we have one command that we expose that we contribute called decorate words, great.

[00:03:13]
Other fun stuff in here, we got ES Linconfig, a folder for tests, whatever. Nobody provides tests, that's not true. And then in here, let's go hide some stuff for a second. In here, we're now like, other than pulling in the VS code library, we're just in regular JavaScript land, right?

[00:03:39]
You're like common JS. Yes, and the VS Code API is actually pretty good, but it does take a little bit, which is. All right, we wanna have this decoration type for all the fixed means. We're gonna get a transparent red. And this is just creating a text editor decoration type that we'll hold on to.

[00:04:03]
And then there's nothing really about VS Code other than there are some things in here which is, we've got this function called decoratewords which is get me the activeTextEditor, right? Which one is the cursor currently in. If you cannot get one of these, we're done. There's no activeTextEditor, there's nothing for you to do.

[00:04:27]
Done, all right from that document, editor document, get the text, what is currently typed in there. So you could do all sorts of things in this point. You could analyze the code and do things with it. You could modify the code and rewrite it back in there. You could do all sorts of things that you want to do.

[00:04:49]
What we're gonna do is we're going to look for the word fix me in here and find them all. And like keep go looking for them and for each one, find where it starts and then plus the length of the word and push a new range onto it.

[00:05:12]
So like every fix me, find the first character where was it. Plus five, that's usually where it ends. So all those positions cuz yes, we think text files are all these long things, that's all newlines. It's just one long string. Find the start and stop of every fix me put it into an array, right?

[00:05:33]
You thought you were done with regex, you didn't know that my examples. Both of them, the next one too, all include regex. I don't know why I do this to myself. Could I technically have used the TypeScript compiler and grabbed an AST and done all that I absolutely could have and you would hate me even more than you do now.

[00:05:54]
I will do an entire full day on the TypeScript compile API. If anyone wants that, nobody wants it, I'm obsessed with it. All right, so we've got all the ranges and then all we're doing is editor set decorations for that red background and all the places that you found the word fix me, right?

[00:06:14]
The hardest part of this is actually the regex piece, right? I could grab every other range and just like make the entire editor.polka or something like that, do all sorts of terrible things. Okay, back into the land of some amount of VS code as we made this function called subscribe to document changes, which is, hey, that decorate words thing, we're gonna look for every fix me.

[00:06:43]
Do it whenever the document changes, or they go to another active editor cuz, then active editor is different. We wanna scan that file instead. So it'll only work to the point where you are talking about the extension or no, due to left, that was spell checking an entire code base, that's just a bad extension.

[00:07:10]
No one needs you spell checking files that aren't open. No one needs you spell checking files that are in node modules, right? I'm only dealing with the file that I have currently I've opened. So, let's just do it with the active editor, and then you don't have your battery melting out of your USB ports.

[00:07:30]
So here, whenever the document itself changes, or they change what document they're looking at, we are going to rerun that function, and we'll run it once, just when it activates right? Probably, now that I think about it, was I being a little egregiously excited, sure, but it works.

[00:07:54]
And then the really only two things that you need to export from this file, the only two things that you truly need for it to be a VS code extension is activate and deactivate. What do you do when the when the extension starts up? And how do you clean up after yourself on the way down?

[00:08:18]
So if you need to close database connections or clean up some files or what have you, you can do that in deactivate. And so here we go, we're gonna subscribe to the document changes. Yeah, then I call it again cuz that's just the command itself. So we'll show an information message and we'll decorate the words.

[00:08:44]
The important parts are un-activate, we're gonna do this thing, we are registering the command. So that will show up as a new thing in the command palette, right? And then also it's gonna run when the extension activates and every time the file changes as well, right? So now, what does this look like?

[00:09:08]
We can go ahead, is that a Java cup? We know that I have it only working on JavaScript, so check this out. I'm gonna go to JavaScript.
>> Steve Kinney: And you can now see if I have the word fix me, it gets a red background, to do does not.

[00:09:37]
>> Steve Kinney: Right, so we went from just having a theme to something that does a certain amount of code analysis. Now, again, you can hook into any part of this editor, right? You wanna open up a pane where you just render some text, cool. You want a little web page in there, great.

[00:09:54]
You want to modify the editor pane or the LA, have an outline that works slightly differently, awesome. You can do all of those things, it's just like what APIs you wanna hook into, right? But it can be as simple as a theme, it can be a little bit more involved as analyzing the files, doing whatever.