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:

🌎 Find Me Here:

⏱️ 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☺️

[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!

[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.

[JenuelDevTutors]

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

[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!

[lesmatheson]

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.

[laurenzrausche]

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

[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 🤩👍🏽

[RudraprasadMohapatraa]

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

[thisissyedbasim]

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

[sinwookdo]

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

[aqua]

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

[jonasboon]

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

[dawid_dahl]

Great and straight to the point. Thanks! 🙏🏻

[hammasshahid]

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 😊

[pranavjain]

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

[neozoid]

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

[luckyvanilla]

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

[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

[RobDuarte]

This is such a great tutorial - thanks!