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.
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!
I want your help to build my own Extension in VS code , Currently confused how to get started and how to integrate it with ML. Can you please help me out ??
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!
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.
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
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));
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
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..."
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
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 .
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.
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
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?
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
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!!!
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
Anybody in the community who knows that how to build a extension from scratch . I want a guide for my project. Please let me know if there is anyone who can assist me++
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.
![Hunxho - Ball Forever [Official Video]](http://i.ytimg.com/vi/nki9ZTF9Uls/mqdefault.jpg)
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.
hey are u still active i wanna know can we open the link of the blogs in the vs code itself
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!
Exactly! Ben Awad is the CEO of making VS Code extensions 🤣
Ben did a tutorial on how to make vs code extension
@@maksimhristov3904 Guess I missed it. I'll have to look back.
I want your help to build my own Extension in VS code , Currently confused how to get started and how to integrate it with ML. Can you please help me out ??
I've been waiting for this video... Because I know it will be simplified here☺️
TOMI!!!! REMEMBER ME ;)))))
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!
I just realized this is the only channel where I can easily understand what you are talking about, SUBSCRIBED!
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.
You are a true JS master, I can’t wait for your course!
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
I was thinking how someone would make a VS Code extension and then you upload this video! I know this is gonna be great 🤩👍🏽
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));
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
You literally have a video on whatever I need 🥰. Thank you so much Kyle
Thank You Sir. Love and Support from Bharat (India).
♋︎ articles, obligatory N I C E
Is there a place that I cannot find you?😂
@@sainathsingineedi2922 It is the RUclips algorithm, recommending us the same channels
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?
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..."
A very clear and concise introduction
Great video! I was able to make my first VS Code extension watching it. Thanks!
I had this curiosity this morning
This is an incredible video. It helped me make my first extension!
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
thank you so much, i had the same problem and this fixed it. :)
@@bridgersilk good man HAPPY CODING/
Enthamee.... Enth chekkan daa nee... Nee verum Poli...
can you make a video about how to create google chrome extension using node js?
I already have a video on that topic.
@@WebDevSimplified yes sir i watched that but I want to use node js module like puppeteer to scrape data that kind of thing.
and is it possible to deploy node js packages without running on server??
THANKYOU SO MUCH I SUCCESSFULLY MADE THIS TODAY!
Great and straight to the point. Thanks! 🙏🏻
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 😊
This would be awesome
ruclips.net/video/jQAvPMR0VRs/видео.html
This is such a great tutorial - thanks!
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".
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 .
Did you solve this problem?
Maybe awkward but love your voice and the way you speak 😅
Woah what a coincidence... I was just looking at Ben Awad's how to create an extension video
Double coincidence I watched that video yesterday
Tx for the intro!
I don't like how you're always like "And it should work now. But of course, you need to install...."
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.
exactly, I still have no idea how to start
@@janwilmans install node
because it's assumed that people who are watching this already know how to use node
Fk this is the best video I ever find you save my life
My Bookmarks tab is basically turning into a Web Dev Simplified playlist...
i am getting an error:
"Activating extention: undefined publisher_wds
how to resolve it????
about the step of adding the command string and title in package.json, I'll always have to add it manually? what if I have 1000 commands to be added?
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
I used Figma to design it completely.
@@WebDevSimplified ok, thanks for reply
I have two questions 1. How do I set a git rep for it? 2. How do I change the icon?
Thanks mate! This was helpful
Thanks for amazing video
Thanks for sharing! I should try!
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
my extension is working finally local but after publishing . It's throwing command not found issue.
any idea bro?
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?
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???
Awesome tutorial , I have a Question Can I make and use a extension personally without publishing or uploading in vs code market place ??
How did he find out you need a label && descriptions for the showQuickPick function? I couldn’t find that anywhere in the documentation ?
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
Awesome 👍😎
how to resolve :"xmlParser.parse() is not a function" error????
nice course. but I came cross a problem when I start my project with typescript, 'axios' will be undefined
Thanks for a great tutorial, I want to know can we publish locally for installing extension for personal use only?
can we use addEventListener or keyboardevent in vscode extension? I basically need to execute sth if user press a specific key.
How would I edit the code because I want to do some other stuff to it updated my extension
Don't work. The extention is not listed in Developpement host.
going through the same issue
did you find out what was going wrong
Can anyone point me to a beginner's resource that will help me develop an extension that interfaces with the default git extension? Thanks in advance.
Is it possible to have normal extension project and also declare snippets?
Helpful
thanks!
Madlad coded a vs code extension in vs code
how to update the extension after publishing ???
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!!!
Nice video
yay
Hello can we create vs code extensions with c# language?
Hey can you please make a video about how to use "registerWebviewViewProvider" using JavaScript?
how can i use the graphics here. i mean like react graphics
i've not VS Code Extension Development (Preview) Option
Make a petty print extension in vs code for
HTML CSS JS JSON
can i use the same personal access token for all my VSCode extensions? =D
How did you create the rss.xml file, please?
how to make this ubuntu linux
extenstion
How to auto-activate the extension?
I tried everything but can't find the hello world command.
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
it works just fine
now
npm isnt on cmd prompt
what you on about
0:21 no stack to full stack
to overflown stack oh lol
Who the hell is that one dislike guy 😕😕😕😕😕😕
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
69 items. Yeah that was not planned
4:00
why not use TS?
Please make a music player in react js please
VSC < JetBrains Tools
For you it said added 2 new packages! for me. well... 856
Anybody in the community who knows that how to build a extension from scratch . I want a guide for my project.
Please let me know if there is anyone who can assist me++
sir make one more extension for indian, all comments of programming library any language will change english language to hindi language
Second
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.
Too many stupid steps to build a simple extension ......... surely there is a better faster way somewhere
10th
fifth
First
"ternimal"
is it possible to build it with python
You make videos about apis but you don't have a api endpoint.... 🤦♂️
69 articles noice
Someone's been watching Ben 👁💋👁
can your girlfriend fight?