How To Create And Deploy A VSCode Extension
Вставка
- Опубліковано 2 сер 2024
- 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
![Lp. Последняя Реальность #107 РОДНОЙ ДОМ [Финал] • Майнкрафт](http://i.ytimg.com/vi/IK3QKzKUlHM/mqdefault.jpg)
I've been waiting for this video... Because I know it will be simplified here☺️
TOMI!!!! REMEMBER ME ;)))))
I just realized this is the only channel where I can easily understand what you are talking about, SUBSCRIBED!
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 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!
You are a true JS master, I can’t wait for your course!
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 was thinking how someone would make a VS Code extension and then you upload this video! I know this is gonna be great 🤩👍🏽
You literally have a video on whatever I need 🥰. Thank you so much Kyle
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
A very clear and concise introduction
Great video! I was able to make my first VS Code extension watching it. Thanks!
This is an incredible video. It helped me make my first extension!
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.
Great and straight to the point. Thanks! 🙏🏻
This is such a great tutorial - thanks!
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
Thanks mate! This was helpful
THANKYOU SO MUCH I SUCCESSFULLY MADE THIS TODAY!
I had this curiosity this morning
Thanks for sharing! I should try!
Tx for the intro!
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
Thank You Sir. Love and Support from Bharat (India).
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
ua-cam.com/video/jQAvPMR0VRs/v-deo.html
Thanks for amazing video
Helpful
Awesome tutorial , I have a Question Can I make and use a extension personally without publishing or uploading in vs code market place ??
Thanks for a great tutorial, I want to know can we publish locally for installing extension for personal use only?
Maybe awkward but love your voice and the way you speak 😅
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..."
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
♋︎ articles, obligatory N I C E
Is there a place that I cannot find you?😂
@@sainathsingineedi2922 It is the UA-cam algorithm, recommending us the same channels
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".
thanks!
My Bookmarks tab is basically turning into a Web Dev Simplified playlist...
Is it possible to have normal extension project and also declare snippets?
Enthamee.... Enth chekkan daa nee... Nee verum Poli...
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
Hello can we create vs code extensions with c# language?
i am getting an error:
"Activating extention: undefined publisher_wds
how to resolve it????
How did he find out you need a label && descriptions for the showQuickPick function? I couldn’t find that anywhere in the documentation ?
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
Awesome 👍😎
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?
Nice video
How did you create the rss.xml file, please?
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???
can i use the same personal access token for all my VSCode extensions? =D
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?
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
Fk this is the best video I ever find you save my life
I have two questions 1. How do I set a git rep for it? 2. How do I change the icon?
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?
how can i use the graphics here. i mean like react graphics
how to resolve :"xmlParser.parse() is not a function" error????
how to update the extension after publishing ???
nice course. but I came cross a problem when I start my project with typescript, 'axios' will be undefined
is it possible to build it with python
how to make this ubuntu linux
extenstion
yay
why not use TS?
Madlad coded a vs code extension in vs code
How to auto-activate the extension?
Hey can you please make a video about how to use "registerWebviewViewProvider" using JavaScript?
npm isnt on cmd prompt
what you on about
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??
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/
Don't work. The extention is not listed in Developpement host.
going through the same issue
did you find out what was going wrong
I don't like how you're always like "And it should work now. But of course, you need to install...."
Make a petty print extension in vs code for
HTML CSS JS JSON
i've not VS Code Extension Development (Preview) Option
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!!!
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
Please make a music player in react js please
4:00
0:21 no stack to full stack
to overflown stack oh lol
I tried everything but can't find the hello world command.
Who the hell is that one dislike guy 😕😕😕😕😕😕
69 items. Yeah that was not planned
sir make one more extension for indian, all comments of programming library any language will change english language to hindi language
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
For you it said added 2 new packages! for me. well... 856
69 articles noice
Second
First
10th
fifth
VSC < JetBrains Tools
the ternimal
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
Someone's been watching Ben 👁💋👁
"ternimal"
You make videos about apis but you don't have a api endpoint.... 🤦♂️
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
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