 Hi everyone, I'm Emil. This is my friends Bogdan and Alexander. Today we will teach you how to develop the plugins or extensions for Visual Studio Code. I will show you how I usually do it and guys will help you if you will have some problems. Okay, so let's start. If someone do not know, Visual Studio Code is a new progressive IDE or code-redact editor. It was announced by Microsoft at 2015. It's open source, it's licensed under the mid-license. The whole source code is completely open and hosted on GitHub. It's an electronic application, so it's the text editor built using the web technologies. It has a lot of extensions and plugins, so if you do not have something at the vanilla Visual Studio Code, you can search for some extensions or you can create your own. So this is how it looks. I think it looks awesome. Okay, what extensions can do? Visual Studio Code has different types of extensions which you can create. First of all, you can create the appearance of your editor. I mean, you can create the theme for it. You can create the type of extension which adds the snippets for your code to your text editor. You can create extensions which add new key maps, key bindings, and so on. So the most powerful, in my opinion, extension is general extensions, which allow you to use the whole API for extensions of VS Code to create some beautiful things, to manage documents, to manage UI, and so on. You can create a type of extension which is called language server, which provides you VS Code the ability to work with your language because VS Code does not contain the parsers and language tools inside it. It uses them in language servers using the language server protocol. And you can add a new debugger. So it also contains a special debugger protocol. What extension is? Extension is just Node.js library. It runs on extension host, which is just a Node.js process. And it communicates with the main renderer process of Visual Studio Code using IPC. So this is how it looks in general. I mean, you have the electron, which have main renderer process and have renderer process and a bunch of extensions running in different processes. It also have debugger protocols and language server protocols and like a processing of debugger and language is usually located at another process. So what will we create today? Today I wanted to create with you the simple extension, which can help you to see how powerful extensions are. And it will be just a finger extension. So what we will use today? I will show you how to use notifications, input forms, status bar, review and content provider of Visual Studio Code. Okay. How extensions can be created? First of all, you need to have Node.js and Visual Studio Code itself. With Node.js, you can install the Yo-Man. It's a tool to create and manage boilerplates. And you need to install the generator for it, which is called generator code. So after you install it, you can just type Yo-code and it will give you a console application to create the boilerplate. It will ask you for some questions, like which type of extension you want to create, which technologies you want to create. Actually, you can write the extensions into ways. You can use TypeScript or JavaScript for extensions. I prefer to use TypeScript because it's very powerful and allows you to not have a lot of runtime exceptions based on types. Okay. I want you to download the source code of this application. It is hosted on GitHub. Please download it and open it in Visual Studio Code. Using this Git wrapper, I will show you all the steps. Is it okay? Can I start development? After cloning the Git, we will have this wrapper. And I want you to check out the first tag. Okay. Here we have at the tag v0.0.1, we have initial setup of extension. I mean, this is what you will have after you run your man generator. So what do we have here? We can see that actually extension looks like the average or general Node.js library. We have package.js so on. We have a couple of files regarding to TypeScript. And we have source directory. Here at source directory, we have initial extension code, which will just showing you hello world message. So how it works? Here at package.js so on, we have a couple of fields which are used by Visual Studio Code to understand how your extension works. First of all, we have the main which will show us, which will show to Visual Studio Code where the main file of your extension is located. Then it contains contributes field which shows the Visual Studio Code what your extension can do and how it can use the Visual Studio Code. So here we just defined the command called extension.hello world. This command is actually the name of event which will be generated by Visual Studio Code. So inside the editor you have the global event bus which can generate and emit these commands. So here we register the event hello world and another one in the important field is activation events which says our IDE on which events it should activate our extension because Visual Studio Code activates its extensions lazily. Only when you need them it will activate them to save your resources. So here we say that when the event extension.hello world appears we need to activate our extension. So let's check what this extension doing. Visual Studio Code by default and your main generator allows us to run the extension in two modes to debug the extension itself or to run the tests. So right now we will run extension. Okay, let's... Okay, I think it cached something from my previous installations. Excuse me for these errors because... Excuse me, chance to... So who already cloned this project? And it's run for you? Just install it, you have to install. And when I press F5 I can't see anything in the debug console or anything so that might be the problem. Okay. So you have this error, yes? You have the same error? So I guess you can just show them code, yeah, because... Yeah, okay. Okay, yeah, I think there is something cached in my file system so let's just check out the second part. Okay, the second tech is like... It contains the files, it contains the layout which I prefer to use when I'm developing extensions. Here I've just moved the tests folder from the source folder. Here I also added the index.ts. The tests index.ts is the main file to run the tests and in this file you can create, set up your test runners and Visual Studio Code will run this index.ts when you run the tests. So here I added functionality to take the... to run the tests with coverage. Yes. So I also changed a couple of things in TypeScript config and TypeScript linter. So just check what changed and it's just my preferred layout for extension development. Okay, let's check the third version of our extension. Let's check what changed. Here I started to change the actual code of extension using some API commands. So here I added the ability to ping some hosts and show the messages about this ping. You can see this is a couple of calls of the VS Code API. Here we can see show input box, which will show us the input box and return the text, type it in this input box. And I also have the show information and show error message calls. So let's try to run this. Okay, I also renamed the name of the command we will fire. So right now it calls ping host. Let's specify the host. And after the ping we have this message which says us that this host is alive, shows us the IP address of this host and show us the ping. So please try to do the same. Just run it. And what I also did here, I added status bar item. What is the status bar? Status bar is this blue line at the bottom of the Visual Studio Code. It contains some useful information. And also it contains the buttons which you can tap. So here I created the status bar item with the ping text. And here I, how to create it? We need to call the create status bar item API method. And it will give us the status bar item object. With this object we can manipulate the appearance of our status bar item. Like here I'm setting the text for it. Here I'm setting the command it will fire. And eventually we need to call status bar item.show to show it. So let's check how it looks. Here at the bottom we have ping button. And when we will press on it we will also have this input box to ping the host. Ok, Google is down. So another one important thing I changed here is the activation event. As you remember previously I used the activation event of command extension.hello world to activate our extension. But right now I changed it to asterisk. And it means that our extension will be activated on any event. Which actually means that our extension will be activated right after the startup of our editor. I used it to be able to show this ping button because we need to have it at the start of the editor. So be careful with this appearance of your extension because you can just slow down your editor if you will not be careful. If you will have some heavy tasks. Ok, let's go a little bit deeper. Ok, we can see that at the source directory we have a lot of files added. What did I do? I tried to implement the tree view which you can see here. This is the tree views. And I added the same thing for our extension. I also refactored some items like the main extension file. So the main file here is the ping tree provider which contains three classes. It contains class ping tree provider which implements the interface tree data provider from Visual Studio Code API. I also created two classes called probe tree item and probe ping tree item which implements the tree, extends the tree item classes. What is this? So the tree item represents the item in the tree. So all of these files here, for example, there is three items. The tree data provider is a class which will provide for Visual Studio Code these items and will provide the whole hierarchical structure of this tree. So let's start with the... Is this one? Tree items is just data classes which contain a couple of fields. So one of the important fields are labels which will provide the label for the tree item. Another one important field is the ID. ID is a unique ID for the whole tree. And Visual Studio Code will understand how your... will differentiate your three items between each other. Yeah, here I'm creating the ID. Yeah, and one of the other important things are collapsible state which will say Visual Studio Code how is your tree item collapsible or not. So you can see this is the collapsible item and this is not collapsible item. So that's all for three items. Let's look on the tree provider. This class should implement tree data provider and contains two important methods. One of them is the get children. It's the main important method because this method should give to Visual Studio Code the array of the items at which for the certain... which are the children for the certain tree item. For example, here we have the SRC tree item and for it this get children should return the array of these three items. The code is very simple for it. We just check which type of element do we have and just return the array of the children for it. For the elements at the root of the tree right here like here the element will be undefined. So let's check how it works. So here we have new tab at this place and we will show us our tree and right now it's empty. So let's check how it works. I will call pink again and right now it shows us the messages previously but most important it adds the new item for these three. And we can see this is the host and this is the pink for it. It runs pretty easy. To be able to show this tree at this view we also need to add special fields for packages on to the contributes folder, to the contributes object. We edit the view containers and views. These two fields just explain for us our editor which trees and which views will we have. So right now I can show you how to for example create the new one tree and tree item and you can just do it with me. So let's do it. You can copy and paste one of the previous classes here. So it's nothing special, it's nothing hard to do this. So at this tree item I want to show the actual IP of this host. So let's change this pink for IP. Yeah, exactly. Thank you. Right now I have declared the tree item class to represent our tree item to able to show it. I need to add it to the children's of the pink tree item. Let's do this just adding a new line here. Okay, let's check how it works. If it works, here we also have as previously this tree view. So here we added the new field here to show the IP of our host. So I think it was not so hard. Yeah, and I think the last but not least for today. So at the last tag here I added the ability to open the documents using our extension. So I added the ability to show the full information of our pink when we click on the tree item of this pink. Let's check what I did. So I added the content provider which implements the text document content provider interface. And the main method of it is called provide text document content which gives us the string. And this string will be the content of our document. This is very simple class, like a very simple function. To be able to open the documents, we also need to declare the scheme. So Visual Studio Code will understand which content provider should we use for exact scheme. Here I call it like a pink scheme. And at the final we need to register this content provider. So here we are, how do we do it? I call the register text document content provider. And then I provide the scheme and provide the provider itself. After that we can open the text documents using this content provider. To do this we need to create the URI which URI is just an interface which represents the URI to file which contains the path to file, scheme for it and additionally it can have the query. So after creating the URI we can show Visual Studio Code to open the text document for this URI and show this text document. So it's pretty simple. Let's check how it works. Okay, here we have our tree and if we click on it the new text document with the pink results will be opened. So the content of this text document is provided by our content provider. So for today I think all that I wanted to show you, if you did the same things for me like with me, you can ask any questions you have. Excuse me. So as I said we have the IDs for it and these IDs are unique. Here I'm using the tree provider. Here you can see I'm creating the ID using the index of the pink in the array of the all probes. So it will be unique and Visual Studio Code will understand that this is the different tree items even if we will have the same host for it. So you can see I can pink it again like a... Yeah, of course we can achieve that. We need just to create some more complex logic here like maybe not to have the array maybe we need to have some object which contains like a key pairs with the names of the hosts and the probe results for it. It's actually able to do. So everything you need to do is change the logic of this getChildren function any other questions? Yeah, yeah, yeah, problem. You are opening a text document, right? Yeah. Click on those three items. Can we achieve for the help of WebView as well? Can you repeat please? Can it be achieved? WebView. WebView? Yeah, of course. We can create the... Not only the text documents, we can open the WebViews which allows us to show the... like HTML page. You can use the JavaScript in this page. This page will be rendered by separate... by the separate Node.js process. And showing the WebView is one of the ways to create some custom UIs in Visual Studio Code. So usually how it works you create some WebView with the JavaScript inside it and your WebView communicating with your extension using the WebSockets. And you can like do some logic in the WebViews. Yeah, but you can do this. It's not so hard actually. So let's continue our... So like a conclusion, I want to say what extensions cannot do. Extensions cannot manage the document object model for the Visual Studio Code itself because it runs in the separate process and it is the limitations to provide the security. Extensions cannot use the Node Native Modules because Native Modules to use them you need to recompile your Visual Studio Code each time you like install the new extension with the Native Modules. So this is the limitations of the Visual Studio Code extensions. Here I have the bunch of useful links which I usually use to develop the extensions and just to use the Visual Studio Code itself. So the most preferred for me is the Visual Code extension samples when you can have everything... different examples of extensions built by Microsoft. And Visual Studio Code can do that. It's a very interesting site which shows you how to use your Visual Studio Code like a pro. So any questions? Okay, thank you for your attendance. I was glad to create this presentation for you.