Create Extensions for Visual Studio Code (VSCode)

Key Takeaways

one two three all were doing why don't you bring your buddy tutorial from I bet it was so after a couple of days actually after covering parks and everything however really we also talked to talk about Ashley and about how to create an extension or how to extend Visual Studio so creating an extension for Visual Studio code we're gonna see it through this video it's true so be like you know if you have actually been using Visual Studio code they will also increase total editor that a lot of people have been Mike we need to put a couple of you know the last two years or something they've been all like in and a lot of features have been added into this a lot of extensions it has a huge library of extensions made by the community and a lot of people are using it and use a lot of extensions you can take a look on mine it stages at lists in here I have a little bottle Emily so yeah without further to do why would you actually create an extension for Visual Studio code so one of the reasons you want to create an extension for Visual Studio code is for yourself so if you have like self problem or you want to automate some process so let's say on your project from every point that you create you do something like you know something like you try to create a couple of the three files that confuse with your server or try to concur with your custom server with custom your custom you know server think about doing behind the scenes your custom generation so these three forms you've been doing it for the every project you create or whenever you try to deploy this or share it with the team or someone colonial something that you can ultimately this by creating extension with the editor your line came in this case we're using video so you create an extension for that and you just you know click beside the other ponen or using command polish like you know i you say you're using a camp on clays confident you know for project or something this and it does that for you the extension you call koreans or otherwise you can just go create an extension that you release for people that uses for solving a specific problem something this or even automating a lot of things that happen in behind the season your projects so an extension is really really awesome thing to do with video pseudocode and this pseudocode to be honest it provides an immersive API to interacts with so taking a look on the list of the available extensions here there are a lot of them and there's also extinctions like this one dark bro a theme or if the Queen the theme I forgot we've seen that you can also create a theme so if you've liked a theme on I don't know awesome or sublime text then you want to take this theme and make it possible and you see the code you can do that as well as it's an extension everything is an extension if you want to create it so if you see there's a list of extension in here if you want to grab an extension you can go to be marked place dot visual studio to code or Visual Studio calm the slide this video code and search for the extension in here you can choose just from bb3 sure there's tension in here and you can install it normally but our point here is how we can create an extension so it has a documentation for creating extension you can just go into the documentation on code obviously do calm and search it on the talks in here you can just find extension generator and overview about how extensions gets created and how the actual process or the whole Visual Studio protocol the editor itself how it works and how extensions interacts with so you can clearly take a look on this game and how it works and everything to understand the behind-the-scenes everything but for now we just want to go in and clean extension and we recommend going ahead and we need through that because it kinda gives you a lot of information a lot a lot more you know info about how extensions of C work behind the scenes and how to create and expect advanced extensions and propose friendly extensions for your favorable code editor so jumping into this section that marries for us and you first got a need to install a couple of things for starting with creating an extension and reclaim extension we've got to create a specific project that interacts with Visio code with the specific modules that we've got a got from from the actual impairment repository installed on our project so we've got to do specific things that you know what let us you know create extension or use the video studio code API so first if you've gotta go ahead and install or run this installment command I'm using cement during here I don't know commander or whatever people actually call it but I'm using that and you know use it just like a normal CMV dozy shell in here so it can easily type that with no problems so we're going to need to do just go ahead and install globally and make sure to install on globally yo so yeah what is it is it's just like um a library or a framework that allows you or a tool to better say it's an automation tool that allows you actually to create or generate projects for many many other flavors for many are no editors libraries it lets you generate the projects that will allow you to actually work with them very very easy without going into the actual you know heavy in path building process now it's really you know heavy for you guys and it really you know trying to create a project for our set up a project from scratch for dealing with the library like for example react or angular or something like this so we've gotta get go to yo and the second thing I'm gonna be installed generator touch code so those are really important to make sure to install them Google believes they've Sam I really did that process so just run that it gotta take couple of said you know menace because it has a lot of things actually in the cub generator and to be honest let me just take a look on yo man I know so this is the extension that allows to generate or you know generate a scaffolding project for any tool out there so it's available for angular backbone react polymer plain play all things whatever you actually look like for are you gonna find it or are you gonna find a scaffolding generator to I really made for your forum yo man to just you know on github erotic or so you need to install that and work with us and show you how you can use this and how you can generate for this time so I'm just gonna go in and open up a new one here so I don't know why this is just things stops working or something so we're gonna just go ahead and open up a new thing in here and make sure to let it choose the directory where you want to put the projects is really matters so it doesn't really matter for me because they already did that but I just want to show you how we can create it so just type in yo since you have installed it go buddy so it's available for everything so just type in yo in here and we've got a time code so which means we're gonna generate a project specifically for the Visual Studio code so this is that just like a scaffolding for Visual Studio code extension project so just type of that it will try to run our you know behind the scenes and it just gonna give you some choices you can take a look on them on this particular page this page actually provides you the whole steps you need to create a project and set up an extended extension pretty much and it gives you a little bit of an information and getting started with extensions so there we go we've got a list in here so what you want what you actually need to choose from the list is depending on what you want to create for the extension this it's actually one single type of extension of something this these are plenty of them and you probably need to create I don't know or like different themes and different type of sánchez day it's like a time script or a normal extension or mph is just to do curb extension that interacts would be you know the core API or Visual Studio code using time script but if you're not familiar with Java school time scare or something just go ahead with Java scripts because everything is gold and JavaScript in here and I'm gonna use JavaScript to be honest you can create a color theme as a people talking about you'd create a language support which means add a brand new language support for that so let's say you've created a new language like dart for flutter or something like this you can just go ahead and add this support for you for visual studio code you think you know add a code snippet if keymap an extension pack which is holding lucky music extensions for you a language pack you know multiple languages and that's also for so all this are available for you you can create from them but we were just gonna simply go ahead and choose the new sanction javascript so make sure to do that and you just like you know we're gonna ask you about the name of your extension so for the name I'm just gonna go ahead and do like you know consul I'm gonna say console.log cleaner so I'm just gonna create an extension that allows me to clean or remove the Consul Blanc code or pencil lines of mines from my you know files or projects so whenever they just run that command or run into clear that's it just like gives every single one and you tries to clear that it's just like an example there is a plenty of extensions out there in the marketplace that does that same thing but I just wanna you know visualizing this for you guys and give you how the API actually works and how things actually work so just giving it a name then you can give it into fire I'm just gonna use the same name as it ended to fire then you can give it you know whatever description in here you can give it a description because if you will need to you know bocklage this or deploy this into the marketplace for people to download and use it like a real word thing for deploying you might want to add this to take this seriously for put in the description together putting in the two party together but if we wanted to just do it for testing purposes just you know put whatever in here then press ENTER after pressing enter what it's gonna happen is just like you know gives you a pass you want to enable check in from JavaScript configuration you might say yes yes if you want to initialize the git repository most cases you want to do that I don't watch which package manager you want to use I'm gonna use for node package manager and it's all it does in here just gonna create a couple of things on our project and it starts immediately installing the model is we're gonna need for our project so I already did that already set up a project this might take a couple of minutes so we don't really want to miss them time on this particular thing so off to just you know we need to wait for that and everything's gonna be creative for you on a single separate folder so you know when you hold er with the name of the console.log cleaner with the name of your extension that you've typed up there and it's gonna be created on the you know the diverter you are actually in here and everything is gonna be there so I'm just gonna help go ahead and open that I already in there so we don't really need to create that one more time ah there we go I just need to open it use your code you can you can do the same just you know by going to the projects and opening normally how you would with any other projects and there we go so this is the actual project set up this is the you know the groceries under the projects files and all the configurations inside of that so this is really really important and we're getting started so after watching this video or something like this you want to just get deeper and deeper you can go and read the visual studio code extension and Quick Start MD file or read me follow so this allows you to give you like you know who contraction about extension or what it does and you know within me I think about this project and how he works and everything so here I just you know don't really want to do any of that I'm just gonna take it simply there's no problems and I'm gonna get rid of that so I really put nest last think either so I'm just gonna get rid of that for a second and get over that as well so I don't really want to put anything so you're gonna get everything in here like extension georgeann's on the following here and if you just go to the pen tour JSON you cannot find a little bit different effect or do something you acting you know dealing with if they try to create a new genus project before or something like this they don't find it you've gotten like a name a display name of version which starts from 0 0 1 the categories and the activation events so this events are specifically made for Visual Studio code event system and we've got like a main which is the main entry point from this this particular area you can clearly tell that whenever you try to execute this or whatever the extension starts executing it starts from the energy point of the file extension audience which is right over here so this is the main entry point extension audience and we've got a couple of commands to be running in here and screams protesting and stuff and we've got our dev dependencies that needs to be installed for the extension actually to work perfectly so this is this is all you're gonna need to know about that's for the extensions I've totally before I don't we just get delete that because I know it's gonna be a little bit you know me and more later about this but for the Institute of genius in here we've got this is the main entry point which means whenever the extension is towards whenever you try to activate the extension this is the first power that gets executed from the energy environment obviously the girl gonna go ahead and execute this chip Accenture J's file firstly so if you just click just go ahead and take a look on that what if the guys in here we've got grow acquiring visitors to their code and by doing this what do you mean I'm getting the actual API methods or the interaction of visuals of your courses this is what you're gonna need to do is gonna be installed for you automatically so you don't really need to create a barney and you knows and you've got a function in here up right over here so this function is called activate and the name in here is you know really really matters you don't really want to change that or something because we just do code how's that by default and you have another like function that's called deactivate so the activity function what it does whenever you try to run the extension from the command panel for for example because most of the extensions are in Visual Studio codes run an extension or something like this you've got to go ahead and open up the command panel to do so you can just go ahead I know you think well here so you can just go to you and just click command palette or you can just go through control shift B and it just opens to you a command panel up there so opening command Paul you can search for extension name in this case there's like an extension for example in here that it's called PO loco which turns some Macau it into an also screenshot or something like this and also to snip that code which is pretty helpful but this is how you can basically open up an extension or Visual Studio code so whenever we try to run them as beginning it's a couple of second and we try to run the polar code in this case would be are actually calling the activate function so the activation function gets called whenever we search for our extension name on the command prompt and press ENTER to run them so this is this is what you're going to need to upload the extension and how against running so the first thing gets executed once you call the extension is now activate function and inside of the activity function it has like a in some of this context what it does and simply the main context of on the actual ad to the ocean running on which is the visual studio code edit your contacts gets passed into and here I've got a console long which means just like for testing purposes it says by default that is congratulation your extension your extension name and there is no answer which means it's running and everything and here the main partner so we're coming here we've got via serial code which means we are accessing the API probably accessing the commands a peon and we are registering and come in why you mean why we do certain command is simply like whatever you use like the command palette everything in here you find for example the polar code or opening default browser which is an extension itself or clear console launch a little different extension then we're actually creating and probably just two command method what it does is just simply puts the name in here so I just tries to reach us to the command on the command panel and everything so for the extension and we're actually going to totally to grab the name from the package.json so it goes into the extension object and clear console logs for you probably gonna find it hello or something already change as so you can change that as well and make sure to change it into the package.json so in the package.json scroll the way down to find commands so inter contributes commands and here you've got like a couple of commands which means an array of commands actually so got a command 1 which is the command that we're putting accent you talked earlier console Long's and the title the command which means that gets displayed on the command panel so this is a time so the other ones the sites are and everything in here is the title and this is the command name so make sure to put whatever title here and this title I'm putting in here putting clear console Long's in Vienna which means you know to get a different name from from the other extension of already installs in place so just give it a name that gets displayed on the command palette and this is the extension command that gets take executor so you've got a need to reference that the same thing in here without mistakes to work perfectly ii think it takes so this is the first parameter is actually the name of the extension or the command of the extension the second one is the actual callback that gets executed once we click on the actual command count so for example gonna click on the polo code in here this function or this callback is gonna be executed for us and here you can you can put whatever thing you know you can take this as the entry point of your program that gets executed something and we're gonna just simply I'm gonna use you just in your code but window remember we are accessing the actual Visual Studio code context so we can access whatever we want we can access the terminal we can access our node via the Explorer of the site Eric's going to access extensions the barber we can access or more define the settings we can even access windows which means the basic windows API that allows us to create Windows or delete windows or put some custom text and show windows just arbitrary like this and we can we can do a plenty of other things so using the window namespace and you're just accessing the window namespace and we can just go ahead and like image show information message and this will allow us to show a pop-up on visual exam she's gonna put yeah our extension is activator or something so just you know to make sure that everything is working pretty much fine to show them a window you can actually as well access the console log it gets printed in something other cost along as we were doing up here and everything so yeah this is this is what you basically want to take about this is a main entry point whenever you someone clicks on the the command power or something this is what gets executed and everything but now what about the disposal thing that is happening here so as we clearly see the register command method returns at disposal objects which is has the type actually or disposal what is this is whenever we try to you know exit the visual studio code or the extension just you know like he know the job gets activated now it's time to deactivate which means these tracks or gets removed from the actual memory to free up some space from the memory so this is gonna be like you know you've got with that in the contacts subscriptions then push it which means it's a memory and putting dispose of there so whenever you just do a Newcomb make sure to put disposal and the subscriptions array or to make sure that everything gets read out of the memory because it works with pointers and stuff so this is a really really awesome or good step to do if you want to keep everything clear and your extensions safe and everything with no problems and box so now to write an expert extension enough talking about how it works in song for an extension you simply need to go ahead and run into the debug mode and likely I'll reach to the code we have like an integrated debug mode in here that runs everything what you simply need to do you could just you know press f5 to run the debug mode or you can just go and into the green icon up here to run the debug mode but I'm just gonna push an f5 in here and everything gonna work for your pretty much and you can clearly notice that it opens a new instance or visual pseudocode for us with no problems so in this this this particular window in here what we have in let me just go back into where we were so this particular window is just for debugging purposes you can clearly notice the title is has been changed into exception development house which is only for development purposes and now in this particular you know window in here what we have is we have actually the extension activated and we can use it and as I've said to access an extension or running we've gotta go ahead into the command palette and we have got to type the the extension name which we have put it in the palette or JSON on the command it look like a title so whatever title you're put in here you're gonna find it right over there on the command palette which is in this case I put a console logs there now not this one because this this one is actually a separate extension installer a third point one but this hours or a custom extension just by clicking that I've got this so yay extension is activated Saphira see we've got our first window popped up for us and we've created they showed it into actually we just either care anyway I've got our first interaction with the BS code AP on awesome so we'll just sort of jump into a little bit more deeper thing rather than that they're just gonna try to Ameri our application or clear console cleaner thing accession works pretty much as we expected it to be so they're probably just gonna jump in stop debugger right over here and I'm gonna go ahead and do the which projects and creates a new Scriptures gonna you know maintenance at cleaner Jas we're gonna handle the cleaning process of the console logs so if you have like a file and have like like a different cost allowance only for debugging purposes well this extension is gonna do for you it just goes through each one of those and deletes it but you know since it's not really working and everything I just want to point out and share your city guys how to interact with the because II do carry API and give you an introduction how you know she works so got everything behind this is our just gonna copy bases so we don't really want to waste time and every time just execute explain what I'm doing behind the scenes in here so first I'm just gonna grab the Visual Studio code you know core API and for that I've got a class remember the class it has one single method clear console logs I'm gonna you know create instance of this class and call this method later on and this particular time what I'm doing in here is grabbing the actual editor and I'm telling you here pseudo API window access to the actual window and I'm getting the currently active images what you mean by that is the actual editor that's currently active so in this case the current actively returned this particular visual studio code instance is the clear endogenous you know document or file if we change that this is now active this is the b-41 active so this variable holds the currently active additive so we've got that in a variable let me make sure that's not nor and upon which means it's a valid and everything otherwise if it's slower and defined we're just gonna show up a message our error message tells it that there's no integer open up so you've got open up an editor first then you know we can we can run the extension for you afterwards we're gonna do is just grab the documents and what anybody documents is each video code instance or each video studio code integer so this is a single integer the other one is a single editor and so forth is initiated or linked with a specific document the document has the actual data of the integer which means has the text that you actually see in here it has some snippets it has you can you can get specific line of code out of position or out of range you can honor you can edit the actual a lot of Arizona's over so it is the document holds the actual data or the context of the editor okay so we got the document up there then we get the actual text of the document using the text method out of the document which returns us normal string Drex with you know a decorators thing like with a forward slash and everything so everything there and what I wanted to do in here is like find everything that represents a counselor and I'm using a regular expression to match the console.log line so whenever you find for example a cultural dot long something like this with just just finding a console.log would do job for me I'm just gonna go ahead and delete this using the extension whenever we run is to use in the community pool so this is this is the main idea behind how the extension actually works I'm just feeling real bad - it just for testing purposes what I'm doing in here I'm just splitting the text using the new line so we split the text then we map through the text we get each wine of this and we get the index of course and then we use the review expression we test through the code line so if the count line has any console.log or something so it is an actual comes along it's not something like a variable or any other expression so it's actually a console what we're gonna need to do just as count so long we found this and we just you know I'm doing an information message we found the code line with a console 1 so in this case I'm not played you know doing something rather than that because it's a little bit more advanced it complicated but I just want to point out to you guys and show you how the app API and tracks with each other's and how you can use it and finally whenever you creating a different class on a separate file you've got to go and you know explore this so I'm going to export and cleaner and this is everything's Bader's on no chance so there's no ESX or ESP you know presenting here so you've got to use the new genus system in your Joe so you always need to remember that now under the extension since the entry point is here I've gotta go ahead and remember that or require it so I'm just gonna say cleaner sort of God against the class and I'm gonna wire this to be quick so I'm just gonna go in and guess the clear of these script files we've created afterwards if we would get the cleaner everything I'm just gonna come and create an instance or instance to class or we're coming initially and objects so I'm gonna come on same cleaner equals new cleaner and you know we create a new cleaner right over here create a new instance out of it and now or want is whenever you click the or what we activates the actual extension out of the command palette or from the command polar what we need to do is just like pool cleaner clear console logs so we actually call our methods and this is this is everything you've gotta need to do you can also in here go into the the context and subscription and disclosure and everything and you can you can actually dispose or you know and cleaner upon us to get disposed whenever the application with extension has finished doing everything and its job so we can free up some memory so yeah yeah there girls is all you're gonna need to do for our class and you have any helps things like this just you know machinima class and Cory your method that does the job and there you go make sure just to only call it under the function callback which is the entry point of the the command that gets executed once we you know click on V or choose it from the command pal and there we go so this is this is all you've got to need to think about and for that the activates function what it does is pretty much you know deactivate the extension once we get or exhibitors to your cousin Victoria need to worry about this because it has a documentation but for simply creating extension and interact with the API this is all you're gonna need to do you can now just go ahead or run the debug mode so f as I've said before and he runs to you an extension development house for if you see their current Norfolk trying to go behind me use on just time or choose clear on console logs look what he tells me there is no open text integers which is right said how we have no Oakley text editors or something this but if we try to put in here for example on connect with console.log hello there and I'm gonna put like a variable me equals movie for example and I'm gonna number thing and here I'm gonna put another console log which is gonna be an MC but also log so just for testing purposes in making sure that everything is groups will be much fine now we need to run the command caller again make sure the currently opening editor is the active editor and you're not actually putting the welcome or something this make sure to go and you know like your selection is only currently in edit really wanna you know it run needed the extension and run the command palette click on so long Vieira and there we go with copy message so console don't walk the first console to login here and concept along hello there which is which is this one so it's getting everything it's getting all over the console logs but it's not giving young show you know lines of code your expressions and stuff on the variable declarations which is pretty good we can take a look at that as well on the debug console you know the terminal type of you in here and you've got everything like all the console ones on the unsure documents or the phone everything is there and the extension is pretty much working fine but it's not really doing anything you can you can implement that you can put that as an example for you or some practice for you but you know this is just a simple thing to point out you and show you how everything actually works behind the scenes in how you can integrate or create whatever extension you want using features city of code API now for the API you can go ahead and just take a look on the API on here there's everything you want to need to know about we want to create a real word extension about rather than that's you know that was such a different you know we did story or for visual studio code very simple thing I bet you fans just want to show you why creating visual studio dissenters are really we also and you should consider doing something like this if you're really using or logging using visual studio code on your daily basis so thinkers are watching I really do it because of intermission subscribe push that like one and why not and I don't know you're hopeful comments really helped me out throughout the the stores are making more stores being more creative bustling it so you guys are watching I said again I'll see you all hopefully in the next one