How to Build a VS Code Extension: A Step-by-Step Guide

[00:00:00]Today we're going to be making the first ever VS Code extension on this YouTube channel. And this is supposed to be a video for complete beginners who don't know how to make VS Code extensions.

[00:00:11]We're going to try to do it within 30 minutes. So make sure you have VS Code installed and just create a folder called VS Code extension. And what we're going to do is we're going to use AI. So we have a prompt. And this is what we're going to create. We will build a VS code extension that adds a right-click command that you hi highlight some code you run copy with context it copies nice formatted version into a clipboard like so suppose I copy some piece of code um you know I have some code file I'll copy it and then when I paste it uh it will tell me where exactly what I what exactly I copied like login.ts TS file within the file path and it will also create this generated TS TypeScript thing. So it will detect what language it is and also like you know you can this is useful formatted uh pasted version that developers normally don't have to write you know all this random stuff over and over. So you can paste it in YouTube descriptions, GitHub issues, slack, discord. It looks clean and professionally automatic. That's the entire idea. We're trying to host this VS Code extension on the store. So what we're going to do is we're first of all let's go ahead step by step make sure you have NodeJS installed which is the long-term support version install it restart VS code after installing it then in the command shell you just make sure you have node and npm installed after that create a folder within u your directory call it copy with context so we're going to go to the folder so this is my CS okay so I'm going to create a new folder here and uh new folder copy with context open that folder inside and just open VS Code here. So yeah, so what we're going to do is you can see over here um we can just cross that one out and just open this one with code.

[00:01:56]Now let's go ahead and go move a little further and we have um new terminal generate the template uh template temp extension template. So we have to run this particular command. So what we're going to go is we're going to go into a terminal control and backtick is opening up a terminal and we run npx package yo hyphen package generator code hyphen yo code. So let's see it which start generating stuff for us and you can see over here importing JSON modules. All right so it says new extension typescript. We're going to press enter.

[00:02:28]What's the name of your extension? We're going to use the same name what we uh used which is copy with context. Let me see if I have it. And then when it says, what's the identifier of your extension?

[00:02:39]We're going to keep it as the same thing. What's the description of your uh extension? So the description of my extension, I kind of have it somewhere here. So let me just bring that in. All right. So I don't have it here. It's going to maybe it's [clears throat] no. So come on, man. It should be over here somewhere. Or I could just use that same description that was in the beginner uh files. So um hurry up, hurry up, hurry up. Okay.

[00:03:17]Um All right. All right. All right.

[00:03:22]So copy this stuff.

[00:03:26]Uh VS Code extension. Okay. We'll just start with that one. That's our description. Let's paste out of here.

[00:03:34]Paste as one line. So, VS Code extension that right adds a right click command.

[00:03:40]Okay.

[00:03:42]And just fix up the things over here.

[00:03:48]What the heck is happening here, bro? I think we just messed up a little.

[00:03:55][snorts] Okay, I just force turned it off. Let's do it again.

[00:04:01]Bro, I need the ex um Okay, let me say let me say over here.

[00:04:09]Give me a short description [snorts] on this VS Code extension and then we just use that description.

[00:04:25]All right, this is what we needed. Let's go back here.

[00:04:30]New extension. What's the name of this?

[00:04:32]Uh, copy with context.

[00:04:37]Uh, what's the name of a description?

[00:04:39]This one. Initialize. Yes. Uh, unbundled npm. Okay. Now, it's running the npm install command. So, just make sure you're doing done all that. Um after that once we do this command uh we have to go to the folder which is copy with context and then we npm install there. Okay. So okay open with code. Do you want to Yeah, let's just open it with code. All right cool. So it's created all this stuff. Let's go inside this folder. So I'm just going to cross that out.

[00:05:16]Uh you guys are seeing this a lot and go in here and uh just open this up.

[00:05:22]Uh, open with code.

[00:05:25]Okay, cool.

[00:05:28]Cursor just opened up for no reason. All right. So, now that we have in here, we'll do npm install.

[00:05:36]There's a node modules folder.

[00:05:38]Everything is up to date. After that, we have uh what else do we have? Uh, let's go back here. Code dot. Okay. After that, we have in VS Code, press F5. A new VS Code window opens. extension development host. In that new window, press control shiftp. Okay. Okay. Let's go to the extension development host.

[00:05:57]So, it's control shift and P I believe.

[00:06:00]No, that's not it. Um I think it's F5 first. Yeah. So, first you press F5.

[00:06:07]Okay. You can see over here run extension copy with context. A new window opened up and fail load extension. Okay. We're getting this issue. Um so, we can just copy this problem. copy text and just paste that problem here. Um, and I believe it was pasted earlier. Sorry if I did this earlier, but I'm making this video so you guys can really understand the whole thing behind it. So, [snorts] what's the problem here is um, we have to open up package.json and find the engine section. So, go to package.json.

[00:06:42]Just going to cross this out. So this is a way to stop this and cross this. I just closed the whole thing. All right.

[00:06:50]So let's go back here and in package.json I would find the engines uh section and over here in the VS code section we replace that with the uh this version. All right. So okay we have to change it to this version.

[00:07:09]Sorry. So yeah, let's go back here.

[00:07:13]Going to copy that and just make sure that's replaced. You can put uh you can press a tab over here and everything looks good. Um now after that I think that that should do the trick. Uh we just change the version downwards. We just downgraded the uh version and then save. Close the extended development host window and press F5 again. So let's see what happens now. Press the F5 key.

[00:07:37]Run extension. Copy with contacts. It's building. You can see over here now it opened up a new window. Okay. And then over here on the right everything worked out. No problems anymore. Now we do control shift and P. And over here we have to write hello world. See we press this enter. We're not going to use ask in chat. Use the hello world. And you can see over here hello world from copy with context. That's a success. That's a good milestone. So save the video right here. Pause it. Sorry. Go to the subscribe button. Click on it and press the comment section. in the comment section just say I reached this far and thank you for these videos. Now also make sure you're liking the videos and now let's move forward. Now that we have this section done, we go towards the towards the next section where >> [snorts] >> um we just go to the okay we go in there. Let's go back. Let's go back.

[00:08:32]Okay, go back to the section here. All right. So, replace hello world with your real feature. You're going to add two new commands. All right. So, uh copy selected code as a markdown snippet and copy current file path. So, this is the current current two things.

[00:08:50]One we have to copy and then it's going to show us which uh which mark file it is. Right? It's a JavaScript C++ whatever. And it will tell us line number from one to whatever. Okay. and copy file current file path is also going to detect where the file is located in the you know particular disk.

[00:09:07]So open this uh file which is this extension.ts file in the source folder.

[00:09:12]So we go to the extension.ts file. We're going to uh stop this and uh man what's what's going on here? All right so we're going to go to the source folder and extension.ts file. So you can see over here this is congratulation extension copy with contacts is now active. So, we're going to have to remove all this hello world boiler plate that's um with it and we're going to replace it with what?

[00:09:36]We're going to replace it with this uh snippet. Uh copy everything inside this and with uh this particular thing. So, let's go back here and this is like the root of your extension file. So, over here we have a function which is get relative path. This is what how is it going to detect the relative path of vs code.workplace workplace get workplace folder and then it's going to use the URI uniform resource identifier and over here what you're going to do is we're going to use that in the workstation or work workspace return doc file if workspace um not true return docfile name and then also path so we just use the path with the forward slashes and it's going to return the file path for it this is the activate function um and this is just copying the selection And then after that we have the editor if it's not empty select some code first and it's going to select the code. It's going to add these you know back ticks that you were looking at in the beginning and it's also going to detect copy file path uh with these commands and so hopefully you'll see some of the executions working out uh register your commands in package.json open package.json and cont. Okay so in package.json so we're going to go and register our commands. So in here um you see package.json okay sorry in package.json we have a contributes [snorts] if you don't see contributes add it near the button near the bottom but inside the main JSON object. So in contributes I can go and search contributes.

[00:11:12]Okay in this section we're going to replace this thing square brackets. So let's see. Okay we got the braces here.

[00:11:19]Then we got the braces. is we're just going to use this one.

[00:11:23]So, we're just going to copy these and we're going to replace the contributes here with that one. So, delete that. Okay.

[00:11:34]I think we can go and make the this one is a little like off. So, tab it here.

[00:11:42]All right. I think that's good.

[00:11:44]Contributes command. And the first command is copy with context.copy copy selection and then copy with context copy selection and the other one is copy file path. So these are the two commands you're going to see instead of hello world anymore. So at hello mode hello world is going to disappeared. So if contributes already exists there's more commands section into it. Okay then test your real feature. Press F5 again. Open dev host window. So let's go back here. Press F5. It's going to run this dev host developer extension development host window. And over here what you're going to do is okay now you see this is a sample docker compos yl file that I just brought up from some random file okay and I just selected these uh lines 7 to 65 okay and I I'm going to basically control shiftp and you can see over here copy with context so we have two things one is copy selection and then the other one is copy file path what we're going to use is the first one so you see over here in the bottom it says copied with context and then there's a check with it. This is pretty interesting because now if I go somewhere like notepad right now if I paste it here you can see what it did for me this extension is you I told you that it was line number 7 to 16 it got me the file name which is docker compose it added this comment two forward slashes it added these back ticks and it also started the docker compose so you can see over here docker compose um I I start I copied restart from restart all the way to the uh volume section, [snorts] but it basically started and added everything that I needed. So, a developer is pretty much e in ease now.

[00:13:35]He doesn't have to do anything different or difficult. And now I can I can guarantee you this is going to work in any kind of file. Okay, let's suppose we copy the whole thing. Now, control shift and P and we say copy with context. This time we're going to use file path. So now this one is copied. Let's go back here. Now you can see over here this is the exact file path where this exists.

[00:13:57]So both things are working. It's telling us exactly what's happening. Uh that's what the file path was mentioned. Um and suppose if we open up a new uh file. So I'm going let me go on file open folder and uh let's just open up a C program. There's nothing here. Oh, yeah.

[00:14:17]You I think it's like folders. So, all right. So, let me just copy I suppose.

[00:14:25]Um there's nothing here. See, random.

[00:14:28]All right. So, I'm just going to copy this thing.

[00:14:31]And let's see. Control shift and P. Copy with file path. I'm going to use now copy file path. See?

[00:14:43]And let's paste it here. So this is going to show the uh file name bookc and uh the other one is control shift and p copy with copy selection and this is exactly what we needed. Line 115 it's a C file and it returned all of that. Super cool, super amazing and uh you know this is something really amazing. I'm not going to lie. If you guys like this so far, let me know in the comments what you think. too simple, too easy. If you can improve it, how you can improve it, make it more complex.

[00:15:16]So, let's move on towards the next section where we're gonna in um um so you can see in the dev host open any JavaScript or TypeScript file and highlight some file lines and then we press control shift and P. What we were doing, we run copy with context copy selection. We paste in a notepad, right?

[00:15:34]And you'll see the formatted snippet. Um if you test file path command you see control shift and P copy with context file path you'll get something like this if depending on like what the fu file path is mentioned here. So you can see over here right now it's just like that.

[00:15:49]That's why there's no uh long file paths in the VS code. But if you open up another one that has then it's going to show the you know the entire file directory like has subfolders to subfolders to subfolders.

[00:16:02]It's not going to tell exactly where it's located on the disk which I corrected now but it's actually going to tell where in the uh root from the root towards the end you know leaf node where it's existing. Congrats your extension already does something useful now putting it on VS code marketplace.

[00:16:22]How do we do this? We need two things.

[00:16:24]First a publisher account in the marketplace and a token path so VSC can upload. First, we install VSC up publishing tool in VS Code terminal.

[00:16:32]We're going to run this command. Let's go back here and we're going to run this command. So, I'm going to clear all of the things out first.

[00:16:45]All right. So, I'm going to say npm- gsc. We're installing this globally.

[00:16:53]That's what it means. Um, so once this is installed, check we're going to check if it works using this command.

[00:17:07]All right, so it's it's currently doing it. All right, so let's see. Okay, now we have this problem, right? So let's see what's the issue and what how it can be fixed.

[00:17:20]All right, so let's go here.

[00:17:26]So I tried running and then we say this thing all say this and we say butt got there's a common Windows 11 plus PowerShell issue. What's going on? In simple words, you installed VSC correctly. PowerShell blocks PS1 scripts by default for security. VSC VCE VSCE.ps1 is just a launcher script, but PowerShell refuses to run it. This has nothing to do with VS Code extensions specifically. So what is the safest fix is open PowerShell as administrator, press Windows key, type PowerShell, and then rightclick as an administrator, allow cop scripts for your user only. So copy paste this exact command and press enter.

[00:18:19]Okay. So, what we're going to do is All right. So, we're going to say PowerShell. We're going to open this up in the run in administrative mode. And then once we do that, we have to make sure we're in that particular file path.

[00:18:32]So, go here.

[00:18:36]I'm going to copy this path and I'm going to say cd and then space and then this.

[00:18:44]Now that we're in this, we can copy paste this exact command and press enter. So this is set execution policy.

[00:18:52]Execution policy remote sign scope current user. Okay. So what it does when it asks do you want to change the execution policy? Press yes. Do you want to change the execution policy? We're going to say yes. All right. So now that presenter this is saved now allows locally installed tools like VSC. It does not allow random indirect scripts to auto run. Close PowerShell. Close the admin uh PowerShell window completely.

[00:19:19]All right. Task VSC again. Open VS Code terminal. New window. Terminal. Make sure it's PowerShell. Okay. And then we're going to run it. So, let's go back here. We're going to cross this one out because didn't work out for us. And we're going to new new open terminal.

[00:19:35]So, let's cross this one out, too. And we're going to say okay.

[00:19:39]say control and back tick and uh okay I want to see if we have powershell there you go so within powershell we're going to run which command so we're going to run So we're going to run this one vc check it work okay okay I did I mess up again let's see so okay we're going to install it first and then after installing it we're going to run it and verify if it vsce is um it was properly installed in our computer.

[00:20:19]So all right, perfect. So we got the 3.7.1 and uh let's go back. Okay, you should now see a number, no error. You are unblocked at this point. VSCE is installed, PowerShell is configured, you are ready to publish to VS Code marketplace. If you don't want to change policy, then you can do something else.

[00:20:39]But we're done with that. Let's go ahead move forward. Um okay so now that VSC add publisher name in package.json this is the publisher name. Um so okay so let's go to package.json which is right here. Um publisher name. I don't know where do I [sighs] why why is this running? Stop. Uh I can't find publisher name. Control F publisher.

[00:21:15]All right.

[00:21:18]Um, where in package JSON should I add publisher?

[00:21:35]Okay, let's see. Let's see what it does.

[00:21:41]It'll show you precisely where you can have to add it. So in your package.json I was assuming it's going to be definitely display name add publisher right after version. So version publisher I was thinking the same.

[00:21:59]So over here version then just paste the publisher right here.

[00:22:10]Okay, I think we're good.

[00:22:14]Okay, after making that and it should continue to where it stopped but it just Okay, now after that create publisher plus token high level. Uh you'll do this on the v market Microsoft VS code marketplace site. You'll create a publisher one time. Create an Azure DevOps personal access token path for public login from terminal. Okay, I don't know how to do this.

[00:22:40]All right. So, I'm just going to say uh guide enemy through these steps completely.

[00:22:51]Don't miss anything since I am brand new. Oh, oh, oh, oh.

[00:23:01]Okay, so one second. Stop that and then pasted this and press send.

[00:23:11]Now yeah. So what we're going to do is Okay.

[00:23:22]So make sure you have Okay, that was there. Make sure VSC works in your terminal everything full create publisher and pad. Create the publisher one time. Open your browser and go to the B marketplace page. This is the publisher port the official VS code doc to it.

[00:23:39]Okay, open your browser and go to the Visual Studio Marketplace management page, I think. Okay, publishing extensions. This is the publisher management portal. The official VS Code doc links to it. Sign in with your Microsoft account. Same account you will use for the token. Okay. Um, this one, VS Code extension marketplace. Publish extensions. Sign in. Sign in.

[00:24:01]Okay.

[00:24:03]Going to use my Microsoft account. Let's see what happens.

[00:24:07]user password.

[00:24:10]Um, I don't know if I remember it. Let's see.

[00:24:16]Yep. I knew it. Other ways to sign in.

[00:24:19]We'll just do this one.

[00:24:22]Okay. We're going to have this email.

[00:24:27]Okay. Let me see.

[00:24:33]We're going to send a code.

[00:24:36]enter the code. So, let me get the code.

[00:24:41]Hopefully, 77 0 22 H.

[00:24:54]All right. So, now we're logged in.

[00:24:56]Cancel.

[00:24:58]No need that. We're not creating that.

[00:25:02]Uh, stay signed in. Yeah.

[00:25:05]Okay, we're signed in. All right. So, now that we are signed in, um, on the left side, create publisher.

[00:25:15]Build your own. I don't know. Left side, create publisher.

[00:25:19]Where are they even talking about? I don't publish extensions. Build your own.

[00:25:23]Okay.

[00:25:26]Sign in with your Microsoft on the left side. Create publisher. I don't know.

[00:25:28]Publish extension.

[00:25:33]Okay.

[00:25:35]Okay, it says over here on the left side create publisher Phil. Okay, publisher name. I think I think we're in the right place.

[00:25:43]ID must match what what you put in. Must match what you put in package. Example coding cleverly.

[00:25:54]Okay. Domain name.

[00:25:58]Save and create.

[00:26:04]Um domain name about you.

[00:26:09]Okay. I mean it gives so many stuff now to add.

[00:26:17]Okay. Give all this info. Give all of this info.

[00:26:25]I hope we can we can do it within 30 minutes. Oh man. I mean, we created it, then we're just publishing it. Okay. So, log in. Okay. Coding cleverly. Coding cleverly.

[00:26:39]Okay. Verify domain optional. Skip for now.

[00:26:43]Uh about you. This fill this thing.

[00:26:50]We're going to make sure we add that section.

[00:26:55]Uh where is it? About you, description.

[00:27:00]And then publisher detail logo. I don't have one.

[00:27:07]If you don't have a website, let's use this and or if you want brand based. Oh yeah, bro. Let's do this, man. Subscribe to coding cleverly, bro.

[00:27:23]Okay. And support.

[00:27:28]Yeah, I mean we'll create a repo um on LinkedIn. I don't know.

[00:27:36]Supporting. Uh okay, this is my LinkedIn. So I think it it's not the right LinkedIn. So my LinkedIn is actually cars if the car one. I think that's the LinkedIn.

[00:27:53]Yep, that's the LinkedIn.

[00:27:57]So, we're just going to put that in the LinkedIn section. Source code repository.

[00:28:04]We're going to make sure that we put that and Twitter.

[00:28:11]We have a Twitter. So, if you don't follow, please follow me at this Twitter account.

[00:28:22]Yep.

[00:28:24]So we're just going to add that here valid URL.

[00:28:33]Okay. So it doesn't consider that as anymore. Let's see. Twitter. If we just say Twitter twi t is it going to still work?

[00:28:46]Okay. Let's see.

[00:28:49]It redirects it to that.

[00:28:52]Okay, we need a 12 by 24 uh image. How do I get that?

[00:29:01]Let's see.

[00:29:04]Um, can I get the light bulb image?

[00:29:07]Let's see.

[00:29:09]Okay. And I'll say I don't know if it's going to fit.

[00:29:15]See, it's not gonna Oh, it did fit. Great.

[00:29:29]So I pressed create button and it's now going forward. So let's see what it does.

[00:29:37]I hope it starts publishing this because we now got going to have to upload this on VS code. Okay. So it says over here.

[00:29:45]Okay.

[00:29:48]Okay. So I'm going to add this manage publishers. I don't know what the heck happened here. [snorts] Your publisher profile is like your developer brand on your VS Code marketplace. Once you create it, once you you can publish unlimited extensions under it. So, okay. Now I'm in this page. What to do?

[00:30:16]All right. So, it should add something here. Perfect. You're exactly where you should be. The screen says your publisher was created. You need to publish your extension from the terminal. Uh, I'll guide you through the steps command by command so that you don't so you so I I'll also tell you what not to click so you don't get lost.

[00:30:33]Create the page. Page name. Simple. Uh, what what this page means. Simple.

[00:30:38]Publisher coding cleverly created. No extensions yet. Totally normal. You do not upload anything from this page.

[00:30:43]Publishing is done from your computer using VSC. Um do not do not click upload here. Ignore manual upload for now.

[00:30:57]Okay. So I see I see this button uh let me see over here. If I say, let's see, let's see. I'll say, okay, I'm going to go here and I'm going to say, um, man, the heck.

[00:31:26]I'm I'm in this page.

[00:31:30]What do I do next?

[00:31:35]So, let's see what it does.

[00:31:41]What to do next? No skipping. You don't.

[00:31:46]Okay. You don't need to click on the website. Do not click new extension on this page. Um, okay. Uh, this button is for manual uploads. We are publishing the correct developer way using the terminal. You can literally say this on YouTube. You don't upload extensions from the browser. VS Code extensions are published from your local machine. So go to your extension folder in VS Code, uh, which is right here. Right. And what we're going to do is, uh, open VS Code and make sure you see package.json and you see source extension.ts. So package.json you see over here. Um, and source.ts, which is the extension.ts file, which is right there. Right, you are inside copy with context.

[00:32:30]Now open the terminal new terminal and then final check must pass which is this one.

[00:32:37]So let's go just say one more time. So and it passed again 3.7.1.

[00:32:44]If you see a number version which is good if error stop and tell me login connect your computer to marketplace run exactly vs login coding cleverly.

[00:32:55]Now I don't know if this is the um so I don't know. Oh it actually worked.

[00:33:01]So marketplace visual studio publisher personal access token for p publisher pat. It's asking for what will happen now? You ask for a personal access.

[00:33:10]Paste the pat you created. Enter. If it succeeds it will not show an error. I don't know where the pad is. I didn't even create it. Uh where is it?

[00:33:18]Um so I'll say oh did I just miss a step? Uh VSC login.

[00:33:26]Uh paste. Um okay. Create your publisher. Okay. Go back to VS Code to your project. Um okay. Uh make sure you're inside the folder. I'll say I don't have a PAT.

[00:33:41]Didn't create one.

[00:33:45]Okay. So let's see what it does.

[00:33:49]Uh no worries. Just you just need to create the pattern. find uh follow the exact exactly on Windows. So open the pad page go to Azure DevOps in your browser uh sign in to Micel account using your publisher and the right click click on profile icon click a personal access token if you don't see it uh in the page create a new token and then you're going to have to do all of that and then you're going to do that VSC login. So let's go ahead and cancel this and let's go back to the Azure DevOps. Go to Azure DevOps in your browser.

[00:34:23]Uh, can you give me this link? I actually want to see where it is because they said over here um um so they said actually over here in the uh what is it called?

[00:34:38]Go to the extension new terminal um pup pad. I don't even have it.

[00:34:48]Azure DevOps. I don't even see it. Where the heck is Azure DevOps? Let's see.

[00:34:59]Sign in with your same Microsoft account for uh user for your publisher. Sign in.

[00:35:05]All right.

[00:35:08]Um now what? Uh in the right uh right top right click your profile icon. Top right click your profile icon.

[00:35:18]Okay. I see that something. Click personal access tokens. I don't see those. My permissions. I'm in ID view my bill.

[00:35:27]Uh settings. Ignore.

[00:35:34]Um I don't see the personal access token.

[00:35:38]Bro, where are you? Where are they referring to? And why does this keep happening?

[00:35:45]Just going to log in with this. Okay.

[00:35:47]Microsoft account does not access to this. What is happening? All right.

[00:35:58]Give me all the links and steps for this. I don't know what to do.

[00:36:12]I mean, if I created a live stream on this video, I don't know if it was going to get close, but what the error usually means selected a user account does not exist in tenant Microsoft. You sign in with your Microsoft personal access personal account. Azure DevOps is trying to use an organization tenant where your account is not yet registered. Uh, Azure DevOps requires you to create or join an organization first before it creates pad creation. This does not mean you need a different email. This does not mean you did something wrong. You just need one miss um create an Azure DevOps organization following exactly in this order. dev.asure.com.

[00:36:50]Sign in using my account. Use the same account you use in the VS code publisher. So I'm just going to sign in after that once we signed in if you see the same error continue. Anyway, create an Azure DevOps organiz. This is the key. After login, you should see a page that says something like create an organization or new organization. Uh create a resource. I see uh Azure Cosmos. Create an organization. Azure for students. I don't even see the uh navigate useful links.

[00:37:22]U bro I don't even see where it's talking about that. So, I'll just copy this.

[00:37:30]Um, so if you don't see it, go directly to this link. Okay. Um, so I'm in this link, Mic Visual Studio Dev Essentials, create new organization, and I say okay, I would like information tips, get started with Azure DevOps. All right. So after that, it says new organization. Organization name, give it as whatever. I'll say coding cleverly.

[00:37:57]Paste that one in. and dev and then after that any name is fine that this is internal region choose closest US is fine um after that create new Azure subscription it should be free uh then click create this step requires your outlook account with Azure DevOps so create new Azure subscription I don't know why I clicked that uh click Click create. I didn't have to do that. This uh click step registers your Outlook account with Azure AD DevOps.

[00:38:34]This fixes the tenant error. I clicked on a random button. I wasn't supposed to be doing that one. And I think now it's going to ask for my card information or something. So maybe we go back one step.

[00:38:48]Okay. Continue. Bro, what the hell is happening? Okay. United States and All right. So continue. All right. D um let's see. D V W Q Y V3 continue and it's not working. So this is great. I think I now create the pad. No, before that I have to click on this. I don't know. I have to go back here. Um, personal for personal use from the United States complete address. Oh, no. It's It has a feeling it's definitely going to do something.

[00:39:43]Let's see if I add uh let's say Texas.

[00:39:49]I have a feeling it's gonna Yeah, it's gonna do something. Let's see.

[00:40:01]Yeah. And now you can see all my information here.

[00:40:05]Um, yeah. So, go to pad direct link.

[00:40:08]Then after that should work.

[00:40:12]Build with Azure.

[00:40:21]Now we're going to go here.

[00:40:23]It's not working right now. This is going to take forever, bro.

[00:40:30]I don't know if the organization exists.

[00:40:33]Still doesn't exist. I knew it. It was going to ask for payment information.

[00:40:38]Why does it ask for payment information?

[00:40:48]Why is it asking for payment information?

[00:40:54]I didn't.

[00:40:57]Okay, let's see what it we um see. Go back home and uh over here over here let's just go back in the create organization continue and paste that this for N Y H Hey uh I can't click on continue.

[00:41:45]It requires me to add an Azure subscription.

[00:41:54]uh and then asks for a payment method.

[00:42:02]But I I want to do this completely for free.

[00:42:09]So why do I face this issue, right? So let's see what it does.

[00:42:18]Come on, man. Why is it why am I pausing stuff for no reason?

[00:42:24]Cancel. Cancel. Cancel.

[00:42:29]All right. Retry that. See what it does.

[00:42:34]The most confusing part of the whole process. And you're not doing anything wrong. To be clear, don't panic. Uh, important truth. No sugar coding. Azure DevOps now requires an Azure subscription to create an organization.

[00:42:45]There is no longer a 100% zeroclick, zero card path to create a new Azure DevOps organization. However, you can still do this 100% free if you and you will not be charged. Microsoft requires a payment method only for identification ver verification not because Azure DevOps costs money. Uh what free actually means here Azure DevOps basic usage is free. Uh publishing of VS Code extensions is free. Creating a pad is free. You will not be charged unless you manually enable paid Azure services.

[00:43:12]Microsoft just wants a card on file to prevent abuse. This is a standard get across GitHub, AWS, GCP, and Azure.

[00:43:19]Correct way to continue. Safe and free are the two real options. What you can do is option one is this is what 99% of the code extension authors do happens to do. They add a card mark creates a free Azure subscription. Azure DevOps organization create creation unlocks.

[00:43:32]You create your p you publish. You publish your extension. Zero charge. All right. So create new Azure subscription on the screen. Opens the Azure free subscription flow. Choose free trial.

[00:43:43]This would say something like $200 of credit free for 12 months. Ignore this.

[00:43:47]You don't need any of this. Add payment method. Add a debit. This is the for verification. You will do not be charged. And then when you finish it, this will create your organization instantly. So go to the uh important safely step. Do this immediately after.

[00:44:01]Go to the portal subscriptions. Uh check uh click on your subscription optional but smart uh spending or leave everything unused. Default if you ever never create resources you don't. Okay.

[00:44:14]Option do not recommend. Find an existing organization owner. So, that's the other thing. Um, let me know what you guys want to do because we're we st we got stuck here. Uh, we got stuck only if we add an aure subscription. So, to get this Azure subscription, I might have to pause or add my payment information and then we can move forward. Otherwise, uh, it won't allow me.

[00:44:38]So, you know, depending on this video, we have gotten this far. So I think it's better to finish it because we've already started it. So let's see where we can do this.

[00:44:54]So I'm going to go back here and uh I understand I would like my Okay. So I'm going to stop this for now and it's going to ask me stuff. So, I'm gonna go and pause this for now and um Yeah. Yeah. Yeah.

[00:46:39]Okay, this is interesting.

[00:46:51]I'm just gonna make sure it should be matching.

[00:46:57]I don't know why it's has an issue.

[00:47:18]Okay.

[00:47:30]Man, why are they so budgy on everything, man?

[00:47:38]Everything. They just want us.

[00:47:43]Let's see this one.

[00:48:31]Yeah, buddy. Let's just try to see. Man, what the heck is happening here?

[00:48:39]Why are you not allowing me?

[00:48:43]Everything looks good.

[00:48:48]And still you guys have an issue.

[00:49:01]>> [snorts] >> All right, guys. I start I started and tried with two different uh cards, but it didn't work for me. I even tried it.

[00:49:39]So, I tried my best. I couldn't do it.

[00:49:41]But I hope you love this video so far.

[00:49:44]And uh let me know what you thought about this video. Thank you for watching it till the end. And maybe on a live stream or maybe some future video, I will kind of sort out this payment issue because I tried two different cards and it didn't work. So if that ever comes up up, I'm going to I'm going to put that link in the um in the video so that you can download this extension. But right now currently what we can do is we can just put this on uh GitHub. So just one moment.

[00:50:13]Uh let's create a quick repository and put this on GitHub. So let's go here.

[00:50:19]Um, and we'll just create a new uh not an issue repository and we'll call it VS Code VS Code extension.

[00:50:32]All right. And I think we had a description.

[00:50:36]So, let me see the description. We had uh one second.

[00:50:56]>> [sighs] [snorts] >> There's going to be somewhere.

[00:51:07]Um, come on.

[00:51:15]All right. Got the description. We paste that in. We create the repository.

[00:51:23]Um, now we go and uh initialize the repo here.

[00:51:31]Um, get in it.

[00:51:37]Get add get commit m first commit get push or get checkout hyphen m main I don't know I messed up again um let's see what was it get checkout no get branch hyphen m main um get remote at origin and then get push.

[00:52:17]And that's our extension. Thank you for watching the video. Hope you enjoyed and learned a lot about how to create VS Code extensions. Subscribe to the channel and stick around for more videos. Peace out.