How To Create And Deploy A VSCode Extension

Visual Studio Code is so amazing because of all the great extensions it has to offer. Sometimes, though, the extension you need is not available so you need to create it yourself. In this video I will show you how to create your very own VSCode extension and how to deploy it so anyone can download it.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/v...
Async/Await Tutorial: • JavaScript Async Await
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:34 - Setup
06:34 - Creating A Command
08:28 - Writing Extension
18:02 - Publishing Extension
#VSCode #WDS #Extension

[@CodeWithTomi]

I've been waiting for this video... Because I know it will be simplified here☺️

[@AMP_PLUS]

TOMI!!!! REMEMBER ME ;)))))

[@JenuelDev]

I just realized this is the only channel where I can easily understand what you are talking about, SUBSCRIBED!

[@CodingNuggets]

I always see Ben making these extensions and wondered a little about how it's done. Now you come along and teach me how to do it Kyle. Thanks. See you soon!

[@zafaris]

Exactly! Ben Awad is the CEO of making VS Code extensions 🤣

[@maksimhristov3904]

Ben did a tutorial on how to make vs code extension

[@CodingNuggets]

@@maksimhristov3904 Guess I missed it. I'll have to look back.

[@BrianKapellusch]

I started building extensions for some of my clients about a year ago, and I was pretty amazed at how easy it is to get one up and running. There always seemed like a barrier to entry when it came to building Visual Studio (not Code) extensions. But now I feel like we're getting to the point where there needs to be frameworks or at least patterns for building larger vs code extensions. Or perhaps even vscode extensions to help to build other vscode extensions. I know I've saved my clients a fair bit of money by utilizing extension points like diagnostics to provide custom warnings and errors for things that simple linting rules can't catch. But as those extensions have gotten bigger, I've really had to focus organizing that code so that I and the others who will ultimately maintain it don't get lost.

[@Mr_Addy1]

hey are u still active i wanna know can we open the link of the blogs in the vs code itself

[@hsjeevan]

I was able to create my own extension and publish it to the marketplace. Appriciate all the effort that goes around making such informational videos. Thanks WDS!

[@aqua7897]

You are a true JS master, I can’t wait for your course!

[@zafaris]

I was thinking how someone would make a VS Code extension and then you upload this video! I know this is gonna be great 🤩👍🏽

[@thisissyedbasim]

You literally have a video on whatever I need 🥰. Thank you so much Kyle

[@laurenzrausche2387]

Hey Web Dev Simplified, I‘m that guy with the git repository. I‘ve always wanted to make a vscode Extension, but i dont want to watch the whole 3h of it. Thank you so much for your tutorials

[@lesmatheson6001]

Appreciate your focus on packing the video with meat and removing filler. I like when I have to hit pause frequently to try things out -- talking fast is not a problem.

[@jonasboon3702]

Great video! I was able to make my first VS Code extension watching it. Thanks!

[@xdanier4872]

A very clear and concise introduction

[@pranavjain9799]

This is an incredible video. It helped me make my first extension!

[@sinwookdo5083]

If not, replace it with the code below. 10:56 const { XMLParser, XMLBuilder, XMLValidator} = require("fast-xml-parser"); 11:18 const parser = new XMLParser(); console.log(parser.parse(res.data));

[@ambroseleung4730]

Thanks for that. For others wondering why this works - it's because fast-xml-parser made breaking changes from v3 to v4. You can also install the package again with: npm i fast-xml-parser@3

[@dawid_dahl]

Great and straight to the point. Thanks! 🙏🏻

[@RobDuarte]

This is such a great tutorial - thanks!

[@insaneviruss]

Thanks mate! This was helpful

[@kavilivishnu2258]

Thank you very much for the tutorial sir! My projects are all hosted on Netlify. I'm not able to get the XML format as you got for your blog page, sir. What should I do to get the same format?

[@vrindatyagi6744]

THANKYOU SO MUCH I SUCCESSFULLY MADE THIS TODAY!

[@proflead]

Thanks for sharing! I should try!

[@jieqiangwei7569]

can we use addEventListener or keyboardevent in vscode extension? I basically need to execute sth if user press a specific key.

[@sairfan06]

Thanks for a great tutorial, I want to know can we publish locally for installing extension for personal use only?

[@lofistudio9652]

I had this curiosity this morning

[@arvindkumar-ug1zf]

Thanks for amazing video

[@AlThePal78]

How would I edit the code because I want to do some other stuff to it updated my extension

[@OndrejPopp]

Tx for the intro!

[@RudraprasadMohapatraa]

Thank You Sir. Love and Support from Bharat (India).

[@haralc]

Is it possible to have normal extension project and also declare snippets?

[@neozoid7009]

Awesome tutorial , I have a Question Can I make and use a extension personally without publishing or uploading in vs code market place ??

[@keithh7994]

How did he find out you need a label && descriptions for the showQuickPick function? I couldn’t find that anywhere in the documentation ?

[@pawejakubowski829]

Anynone has the same problem that after running F5 it doesn't run extension? Nothing shows in console and also no hello world command was available?

[@ShubhamAttri-rw2bg]

Helpful

[@KrishnaTiwari-fz4ev]

Hello can we create vs code extensions with c# language?

[@quochoangang6014]

Help me. When I use Fast xml parser in typescripts I have error "Command result ed in an error (command not found)". How to fix???

[@mastergamer4335]

can i use the same personal access token for all my VSCode extensions? =D

[@nurenijamiu]

How did you create the rss.xml file, please?

[@prajjwaldubey721]

i am getting an error: "Activating extention: undefined publisher_wds how to resolve it????

[@hosstaba]

When I try to use "require", I get an error, had to use" import" instead. Then when I use "axios", there's no "get" method. There's a "axios.default.get" method, but calling that causes this error: "Activating extension 'undefined_publisher.helloworld' failed: Cannot read properties of undefined (reading 'get')." I'm completley stuck, can you please help? I ssem to have similar issues when trying to use any npm package within an extension. I tried to use the package 'clipboardy", & again there was only a "default" method, & all other methods were within default, & calling any one of them would result in this error: "require() of ES Module c:\helloworld ode_modules\clipboardy\index.js from c:\helloworld\out\extension.js not supported. Instead change the require of index.js in c:\helloworld\out\extension.js to a dynamic import() which is available in all CommonJS modules." Please help! Your help would be greatly appreciated

[@othmane8954]

hey Kyle, nice video ! I have some sound issues sometimes, it goes really low for a sec or two, then go back to normal volume, and again ! (juste in this video in particular) Have a nice day

[@hammasshahid3566]

Great video kyle! Can you show how to make chrome extensions next? It will be very helpful for me since i really like your teaching style 😊

[@tiffanyk2743]

This would be awesome

[@vedantthombare1028]

kzbin.info/www/bejne/oIKkp4ODh5WJiNU

[@kodethat9761]

Looking for parseable documents... Found no documents It gives me this in the debug console even though i am running the default created files, any help is welcome

[@ravikiran925]

my extension is working finally local but after publishing . It's throwing command not found issue. any idea bro?

[@luckyvanilla388]

Maybe awkward but love your voice and the way you speak 😅

[@haydees1158]

thanks!

[@VidTDM_XD]

I have two questions 1. How do I set a git rep for it? 2. How do I change the icon?

[@SuboptimalEng]

♋︎ articles, obligatory N I C E

[@sainathsingineedi2922]

Is there a place that I cannot find you?😂

[@SuboptimalEng]

@@sainathsingineedi2922 It is the KZbin algorithm, recommending us the same channels

[@huizhong3713]

nice course. but I came cross a problem when I start my project with typescript, 'axios' will be undefined

[@jillpatel2998]

Hello,Can anyone please tell me which tools you used to create the pdf of webdev roadmap 2021 which was both in light and dark mode

[@WebDevSimplified]

I used Figma to design it completely.

[@jillpatel2998]

@@WebDevSimplified ok, thanks for reply

[@MalluStatusorld]

Enthamee.... Enth chekkan daa nee... Nee verum Poli...

[@prajjwaldubey721]

how to resolve :"xmlParser.parse() is not a function" error????

[@dancehalllyrics1303]

I was so close to go back and rename my project "The Other Side", so VS Code would print out "Hello from the other side".

[@rahulkhandelwal7034]

Can anyone help me I am getting an ERROR : property `name` is mandatory and must be of type `string ` Pls help me , how should be I resolve this error .

[@tonyfang5618]

Did you solve this problem?

[@shahadathimel8629]

how to update the extension after publishing ???

[@rangabharath4253]

Awesome 👍😎

[@ayushnautiyal9469]

how can i use the graphics here. i mean like react graphics

[@mplovecraft]

My Bookmarks tab is basically turning into a Web Dev Simplified playlist...

[@elihappinesspie]

What I had to do differently to make this work in typescript: 1. You have to invoke the .default thingy for axios. "const axios = require('axios').default;" 2. You have to import the XMLParser like this: "import { XMLParser } from 'fast-xml-parser';" 3. You then have to instantiate a parser from the XMLParser constructor, like this: "const parser = new XMLParser();" 4. THEN you can use the xml parser like this: "const articles = parser.parse(res.data)" 5. You have to declare article as any, like this: "const article : any = await vscode.window.showQuickPick..."

[@islamis_powerful]

At starting of this extension I faced a issue related to yo code i resolved it by these commands and also installed a package : command1: Get-ExecutionPolicy command2: Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser command3: PowerShell -ExecutionPolicy Bypass -Command "yo --generators" Please install this package : npm i -g yeoman-generator Thanks

[@bridgersilk]

thank you so much, i had the same problem and this fixed it. :)

[@islamis_powerful]

@@bridgersilk good man HAPPY CODING/

[@oomg_litx1957]

Nice video

[@muhmmadirshad7376]

how to make this ubuntu linux extenstion

[@tazimrahbar7882]

Hey can you please make a video about how to use "registerWebviewViewProvider" using JavaScript?

[@amitdutta3875]

can you make a video about how to create google chrome extension using node js?

[@WebDevSimplified]

I already have a video on that topic.

[@amitdutta3875]

@@WebDevSimplified yes sir i watched that but I want to use node js module like puppeteer to scrape data that kind of thing.

[@amitdutta3875]

and is it possible to deploy node js packages without running on server??

[@btcls]

Fk this is the best video I ever find you save my life

[@sebin7856]

is it possible to build it with python

[@haralc]

How to auto-activate the extension?

[@kavindesivalli]

Woah what a coincidence... I was just looking at Ben Awad's how to create an extension video

[@sainathsingineedi2922]

Double coincidence I watched that video yesterday

[@tgp_assassin]

npm isnt on cmd prompt what you on about

[@william3588]

why not use TS?

[@tigidou3344]

Don't work. The extention is not listed in Developpement host.

[@prakhargupta5410]

going through the same issue did you find out what was going wrong

[@martyrd0m]

Make a petty print extension in vs code for HTML CSS JS JSON

[@codedecode1498]

Madlad coded a vs code extension in vs code

[@zencraftitalia9368]

i've not VS Code Extension Development (Preview) Option

[@BostYT]

I don't like how you're always like "And it should work now. But of course, you need to install...."

[@armaganboi]

yay

[@yash1152]

0:21 no stack to full stack to overflown stack oh lol

[@dreamslayer2424]

The first part of the video shows him typing the code npm install - g yo generator-code; however, what he does not tell you are what configurations and installs he has made to VS Code that allows him to run the extension to use the npm command.

[@janwilmans]

exactly, I still have no idea how to start

[@olamilekanajibola7686]

@@janwilmans install node

[@waadlingpenguin4863]

because it's assumed that people who are watching this already know how to use node

[@kiko_game495]

Respected Lord! I have a great video idea for you and I personally wanna make it, a VSCode ChatGPT extension that reads all the code and finds bug and replaces the code with debugged code in a click! I think it will be a fantastic video.. Guys please like so that he sees it!!!

[@avijitchanda7944]

Please make a music player in react js please

[@abhisheksrivas4589]

I tried everything but can't find the hello world command.

[@bco-fm5qu]

For you it said added 2 new packages! for me. well... 856

[@n0o0b090lv]

4:27 i paused video then tested and in the console was nothing THEN i went on 2 day rambaling instaling reinstaling typescript instaling typescript other nonsence and today i got tierd and just started tutorial agene got angry agene at this part but then i heard magical words "dont worry its my extension" ..... to say the least i was dead inside

[@n0o0b090lv]

it works just fine now

[@kumarutsav1123]

4:00

[@akgang602]

Second

[@mohamedshuaau632]

69 items. Yeah that was not planned

[@rishabhverma7730]

Who the hell is that one dislike guy 😕😕😕😕😕😕

[@samarmohan9891]

First

[@starboy_AJStar]

sir make one more extension for indian, all comments of programming library any language will change english language to hindi language

[@kartikmahajan620]

69 articles noice

[@grzegorzsokalski7328]

VSC < JetBrains Tools

[@NinjaAhmed-cp3pe]

10th

[@amitkesari2000]

Upon adding the axios part at 13:35 , and trying to run its giving error : ApplicationInsights:CorrelationIdManager and a dialog stating command not found. If I remove axios line its working fine. Any ideas what is wrong? Details:stackoverflow.com/questions/71349358/command-not-found-error-in-developemnt-of-vs-code-extension-due-to-require-ax

[@thehood0279]

fifth

[@zedleclair6638]

the ternimal

[@andrewchu6370]

I feel uncomfortable with that thumbnail. Staring into my soul... Little do I know, I’m staring at his screen. He should feel more scared

[@deansprivatearchive]

"ternimal"

[@chubbyshady]

Someone's been watching Ben 👁💋👁

[@Stoney_Eagle]

You make videos about apis but you don't have a api endpoint.... 🤦‍♂️

[@prathamrajgor]

How to add a sidebar to an extension. You didn't teach things which a person would actually use. You taught what 100s of tutorials have allready explained before you. You should try to make videos on topics which haven't been covered yet not those which allready have been explained before by other people.

[@agentstona]

Too many stupid steps to build a simple extension ......... surely there is a better faster way somewhere