Create a Hello World VSCode Extension From Scratch

John Lindquist: [0:00] Inside an empty folder, run npm init -y. This generates a package.json file. Then, we need to add a few devDependencies, so npm i -D, and we'll need typescript, and space @types/vscode and install those. With TypeScript installed, we can npx typescript --init, hit Enter, and this generates our tsconfig file.

[0:28] Inside of here, we want to make sure we have an outDir, so we can uncomment this line. I'll just say that are outDir points to a directory called ./out, and this will match up inside of our package.json.

[0:42] Our main file will be the same directory out/extension.js. This means when we create a source folder with an extension.ts file in it, and we run TypeScript, so npx tsc for the TypeScript compiler, hit Enter. You'll see we now have an out folder with an extension.js inside of it, and our package.json main file is pointing to that JavaScript file.

[1:11] We can set up a watch script, and we'll call this tsc -watch -p on the current directory. Meaning that once we run npm run watch, which is this script, hit Enter, every time we make a change to extension.ts -- let me console.log("hi"), hit Save -- it will update our extension.js.

[1:37] In our package.json, we need to define the engine as vscode instead of node. We autocomplete here, we can type in engines plural and just autocomplete, and select vscode. Then, we want to define our activationEvents. Ours is going to be a command, since we'll invoke this from the command palette.

[1:59] We'll say onCommand, and then, the name of my command. I'm going to namespace this to eggheadio.helloWorld. Then, when we activate our command, we need to define the command down here. We'll say commands, and feel free to use autocomplete a lot in here. This will be a command called "Hello world," and the title can just be "Say hello world."

[2:28] With all the basic configuration out of the way, we can start writing code, and we can export a function called activate(). This is essentially a function that gets called when the command is triggered. This takes a context which is an ExtensionContext. I used autocomplete, hit Enter, and it imported that for me automatically.

[2:48] Now, we can set up our command. We'll use commands which we can import and say registerCommand. The name of it was eggheadio.helloWorld, which we brought in from here, so this maps to this. Then, a function which runs when that command is invoked. We'll call this helloWorld, and we can define helloWorld up here, and we'll make this and async function.

[3:18] On our context on the subscriptions, we can push our command, and we have everything wired up. Once I come up here, go to Run, hit Start Debugging. We'll select the VS Code Extension Development. This will pop open another instance of VSCode where it's debugging.

[3:40] Once I open my command palette, I'll type in "hello," you'll see "Say hello world," and we got an error saying "'Say hello world' resulted in an error (command 'Hello world' not found).

[3:51] This means I made a silly mistake of mapping the package.json to the wrong thing somewhere. This command id looks like that belongs right here. If you run into that error, it means one of these isn't defined well, or maybe TypeScript wasn't running, and the extension wasn't built.

[4:08] We can do this, hit reload here, come back over here, open our command palette, type in hello, hit Enter. It ran our Say hello world command which did nothing for the moment.

[4:22] Let's go back into our extension and write some code to execute inside of our helloWorld function. I'm going to import the window from VSCode and grab the activeTextEditor. We'll create an assignment to that. Then, we can use the editor to edit our current document. This takes a callback which passes in an editBuilder.

[4:48] Using the editBuilder, I can insert at the position where the cursor is. To grab the position, I need to grab the editor, grab the selection, check the active selection, then this can be our position where we want to insert the text.

[5:07] Then, what we want to insert right here is just "hello world." It looks like position could be undefined if I check my PROBLEMS tab, like position could be undefined, so we'll go ahead and guard against position being undefined.

[5:21] If this is defined, then it can do this. I'll hit Save here, refresh, come back over here. I'll run my command of Say hello world, hit Enter. You can see it prints the text "hello world" right where the cursor is.

[5:37] Let's do that again. Say hello world. Say hello world.