 Hi, I'm Sean McBreen, a Program Manager on the Visual Studio Code team. In this video, I'm going to show you how code can be extended and enhanced through the extensibility support that we announced at the Connect Event. With this, you can optimize code for your specific needs and benefit from the contribution the community has made. I'm going to start by recapping what Visual Studio Code is in the course scenarios it supports. Then I'll move to recap the announcements that we also made at the Connect Event. Obviously, the key announcements there was the availability of an extension gallery and a set of extensions, and I used the bulk of the time for this session to demo building an extension and using extensions inside Visual Studio Code. Of course, every month we update Visual Studio Code, so I'll close with a quick overview of some of the big things on the horizon, as well as we can go to find out more about Visual Studio Code. Visual Studio Code provides developers with a new choice and tooling, one that combines the simplicity and streamlined experience of a code editor with the best of what developers need for the core code edit debug cycle. It's the first code editor and first cross-platform development tool in the Visual Studio family, and it runs natively on Windows, OSX, and on Linux. It's a lightweight keyboard-focused editor, and at its heart, Visual Studio features a powerful and fast editor for great day-to-day use that has code navigation, customizable key bindings, syntax highlighting, bracket matching, auto-indiditation snippets, and much more. In fact, we ship with other support for over 30 languages out of the box. However, for serious coding, developers also often need more than just a great editor, and that's where Visual Studio Code really starts to excel with some evolved editing experiences, like Always-On IntelliSense code for code completion, richer semantic code understanding and navigation, as well as code refactoring. And we have great out-of-the-box support for ASP.NET 5 development with C-Sharp and also no-JS development with TypeScript or JavaScript, and all of this is powered by the same underlying and mature technologies that drive Visual Studio. Code also integrates with your existing tools, and one of the great benefits of this editor is you can just plop it directly into your tool chain. You can run the builds that you want, you can execute tests, and just about any command line script from within the tool. Errors and warnings are a single click away, making your everyday workflow even faster and easier. Of course, you need to properly store your source code somewhere, and we have great integrated support for Git, whether you want to store it on GitHub, Visual Studio Online, or some other repository. Of course, developers don't spend all their time just writing code, they go back and forth between coding and debugging. Debugging is the most popular feature of Visual Studio, and the one feature from an IDE that many developers have missed from the code editing experience. So Visual Studio Code includes a streamlined integrated debugging experience, and you'll see that when I demo shortly. And finally, when we first shipped our preview, we didn't have an extensible platform, and at Connect we added extensibility to Visual Studio Code. It lets you build and use plugins that other people have built, and it allows you to customize the edit, build, debug experience for your language and the way you want it to work. Okay, so let's talk about what we announced at the Connect vent. You know, the first thing to notice, we've had a lot of traction with Visual Studio Code, and we're happy to say that over a million of you have installed and used the product. And since we first announced the product in April, we've had six releases. So we've had a lot of momentum, but really we've built up to this beta milestone. That was the first announcement, and we've also open sourced the entire code base. So you can move up to GitHub, you can see the code as we've written it, contribute and make pull requests to the code base as well. And then we added an extension SDK, a rich set of documentation, samples and APIs that allow you to extend, customize and enhance Visual Studio Code. And that's coupled with a gallery so that you as a user for Visual Studio Code can discover the extensions that everyone else has contributed. So let me switch to a demo and show you how that works. Okay, so here I am on my Mac desktop. And what I want to do is quickly open up Visual Studio Code, code full stop. And that allows me to quickly open code. And here you can see it's, remember the file I had opened last time, which is a very simple markdown file, and it's opened up our markdown preview. It's actually one of the features people really like inside Visual Studio Code is a easy way to live preview changes in markdown. So markdown is one of the markups that a lot of projects use, but there are other markup languages out there. And one of the examples is LaTeX. And out of the box, we don't have any language support for LaTeX. Even though Visual Studio Code ships with a lot of languages, we can never ship with all of them. And so the actual editing experience for something like LaTeX is very raw. Basically there's no snippets, there's no support for anything like code completion bracket highlighting. So it'd be great if we could add that in. So what I'm gonna show you is the gallery inside Visual Studio Code. I just hit F1 and I type in xt for extensions and I can ask to install extensions. And what's happening here is we're querying a service that lists extensions and I can quickly type directly in there the sort of extension I'm looking for. And in this case, I want some support for the LaTeX language. Visual Studio Code actually includes a whole lot of different extension points. And one of the things people really like is things like themes as well. So I'm gonna install the theme as well as this LaTeX extension. You can see they both come down and installed, hit restart and refresh the shell and boom, straight away, I have a much, much richer experience for editing my LaTeX file. From here, I have snippets now. You can see the snippet collection and I have code colorization, bracket matching and more. And all I needed to do was literally install that extension and it works. And as an extension author, I don't need to worry about some of the complexities of things like themes. So I also installed a theme. Here I can hit F1 and type in theme for our theme chooser. And you can see that I can start rotating through themes and Batman is the one I just installed and you can see the impact of Batman live previewing in the background there. So there you go. That was really easy to contribute both, install both a theme to Visual Studio Code and add an additional language into our language selector so that any time you load a LaTeX file, you'll get that additional support. Now, how did we do that? Well, under the covers, we've added in support for using text mate bundles for both snippets and for colorizers and themes from Sublime and other areas. We provide a yeoman generator that allows you to quickly point to a directory or a URL that has a theme or a snippet and will create an extension and then you can package it up and publish it to the gallery. So maybe what I should do is show you some of the other extension capabilities in Visual Studio Code. So I mentioned that we had quite rich markdown support that people like but one of the features I really miss is a spellchecker for markdown. You can see in this file, it's probably all correct but it'll be great to know if I had any spelling errors. So let's see what it's like to build an extension that would contribute a spellchecker for markdown. So here I've got a directory that I can open up with Visual Studio Code and inside this directory, I actually have an extension for spellchecking. Let me just make this window a bit wider. And so this extension, oh the Batman theme is pretty tough on comments. Maybe I'll just switch to a theme I prefer. One of the most popular ones out there is Monokai. Why don't we try that? And what I have here is an extension's activation code. This is a single TypeScript file that sits inside a directory of other files. Those other files allow our debugger and copilers to work. Again, we provide a Yeoman scaffolder that makes all of those things very easy. So you just focus on the extension code you want to write. In this activate method, it's telling me that the extension's activated. It reads some settings of disk. For spellcheckers, that's important. Things like a dictionary of words that you don't want to spellcheck. It registers a command and you'll see this but of course for a spellchecker, one of the things you really want to be able to do is suggest fixes once you've found a problem. And then of course we tie into a couple of events. So changing a text document, we want to fire an event that creates diagnostics and also when you open a new text document. So let's show you some of the features just of the raw editor and how we can quickly peek to the definition of something like create diagnostics. I can navigate there as well. One of the things I see here is this convert severity function. I can navigate there as well. So it's easy to quickly navigate in through a code or peek in line where you are. And here I'm seeing some errors in my code. This info has a rig squiggly it's saying that property info isn't defined. So what I know is we actually just changed this to be the full word information and they need to update my code but I have that in quite a few places. So with the power of a great editor I can do a multi-edit or a multi-cursor edit and I can just type in the word and it will correct in all locations. And of course you would have seen that IntelliSense popped up and gave me a view of the enum that's there. So it's very easy to quickly edit your code navigate through your code and you've got rich editing support like IntelliSense and peeking to definitions I showed you. So you might notice over on the left-hand gutter here I have a breakpoint set in my code. And what I wanna do is this extension is just like any other JavaScript file inside Visual Studio Code and I want to run it and let's see what our extension development experience is like. So I'm just gonna hit F5 and what that does is it fires up a second instance of Visual Studio Code and this instance is the extension development host you can see the title there and it has a different border at the bottom different border color and what happens straight away is you see no spell checking inside my code because we hit the breakpoint and so here we have a rich debugging experience where I can get hovers and I can look at the contents of things. So one of the variables I have is something called problems. And that's a global that includes all the problems the spell checker has detected by the time it got to this point. So on my debug console I can quickly evaluate the problems I can expand it and see one of the problems that it found was in product. It thinks that it's got a couple of suggestions there in space product is a better way to do that and it's a spelling error. And there's other types of errors here as well. This is a complex expression, operational and it suggests that we replace that with working. Okay, so let's drop this breakpoint and let's just play the extension and I'll drop back into the running extension and you go, you see straight away that the errors have been detected inside my code and you see a hover here that says that in product is a better one and I can even invoke that suggests command that we saw earlier and do basically an old full stop and in product is this suggestion there hit enter and it'll replace that gallery in other era, I can once again replace that and down here operational, fully armed and operational that's probably better than working as I'll leave it as it stands. But you can see that we were able to actually add directly in a spell checker to Visual Studio Code and we have a development experience that's very rich. You can easily debug, navigate through the code and run it just from directly within Visual Studio Code. Okay, so let's now see what it would take to publish this extension so that others can use it. So I'm gonna close this window and here we have a command line tool for publishing extensions so that we can add this into the gallery. So VSCE publish is the command that we're gonna run and once I type that in, it's starting to publish script packaging up the extension and it's sending it up into the gallery. So now next time I run code directly in this folder, now remembering I'm in a markdown file in this case the readme file for the actual extension itself, no errors have been detected. But what I can do is I can F1 the extension gallery, extension install and I can type in spell and you'll see the spelling and grammar checker that I just literally published right now is available and I hit download and that will come down from the web gallery. My editor will ask me to reactivate and straight away in a couple of seconds you'll start seeing errors showing up. Markdown suggests back down, I probably need to add that into the dictionary. Okay, so that gives you a really quick feel for creating and editing an extension, running it and debugging it as well as publishing it to the gallery and it was a pretty simple extension but you'll notice that if you look at the code for that extension, there was no need for me to work out how to render the hover effect that you see here or there's gutter indicators for the errors as they're detected or I can directly navigate through all the intrinsic UI elements of Visual Studio Code. So as an extension developer, I don't need to develop any of those paradigms and as a user for Visual Studio Code, Visual Studio Code just continues to work the way I expect it to work. I didn't have to learn new ways to work with this extension. So okay, that's a simple extension for spell checking. Let's look at something a little bit more complete for Visual Studio Code. Okay, so one of the programming languages that's popular out there today is Go from Google and we ship with almost no support for Go within Visual Studio Code. So what I have here is a Go application but the experience is not very rich. I don't get anything like hovers. I can't peek or navigate. I don't get anything like any intelligence. It really is a very, very limited experience here. We do have colorization, but that's about it. So let's see what it will look like if I extend Visual Studio Code with support for Go. So I'm gonna go extension and install extensions and type in Go. And what I'll do is I'm gonna install that extension now and let's see what that does for Visual Studio Code. Okay, so Go has come down from the gallery and with a quick restart, let's see what additional features I get for the Go programming language in Visual Studio Code. So I'm gonna hit restart, the window refreshes and actually one of the first things we'll notice is slightly improved colorization. This extension includes a new text mate bundle that improves the colorization for Go. And now when I hover over things like these view event handler, edit event handlers, you can see that I get a hover event and I can even do things like peek into the definition of those events. So all of this was just added straight in as features from this extension. Another thing I can do is I get IntelliSense now. So valid path dot find and there's a lot of these fine string sub matches what I want in this case. So my editing experience is getting richer straight away. And here I can start typing in what I want as the command, but you'll see I'm also getting linting support. There's an error here, it expects a string. Well, this is where IntelliSense and that linting comes together. I can see that there's a path version that converts straight to a string. And that error will now disappear. The other thing that this contributed was a debugger which allows you to just do an F5 and a debug like I showed you, even things like an outline support for the whole code base. So it's easy to navigate across the code base. F1 and at, and now I can really just transcend across all of that code. So really a much, much richer experience for the Go programming language. Nothing that we shipped out of the box comes close to this. And already inside our gallery, we have support for many other programming languages that'll give you a much richer experience inside Visual Studio Code. Okay, so as a quick recap, what I've shown you is that we can add different languages through standard language formats and colorizes things like text mate bundles directly into Visual Studio Code. I then showed you a quick extension, a spell checker to mark for markdown. And that allows you to really quickly improve and enhance some of our core functionality. I pushed that straight up into the gallery so that everyone who has Visual Studio Code can now install that extension and get spell checking for their markdown. And finally, I showed you some richer extensibility where we have got an extension here for the Go programming language that really provides you with very evolved editing features inside Visual Studio Code, spanning from peak and code navigation, peak definition, find all references, of course, to IntelliSense, and then accumulating with the debugging experience directly inside Visual Studio Code. Okay, so with that, let's switch back to the slides and see what's next for Visual Studio Code. Okay, so back from the demo, hopefully you're able to see how easy it is to install an extension from the gallery, how easy it is to build your own extension, a basic extension like the spell checker I showed you for markdown, or a very rich extension like the full language support for Go. So what's next for Visual Studio Code? Well, obviously extensions, extensions, extensions. In the gallery today, there's over 50 extensions and there are gonna be more and more every single day. We're really excited to see where the community takes it and of course we'll be contributing our own set of extensions as well to Visual Studio Code. The number one request outside of open sourcing the product and adding a plugin API to Visual Studio Code has been code folding. It's definitely the thing that we're working on now to improve the code editing experience within Visual Studio Code. So look forward to seeing code folding, being able to collapse your code regions very soon. Obviously ASP.NET 5 debugging, that was previewed at the connect event and we'll be adding that in as soon as that's released for you inside Visual Studio Code. And then we're building up to our 1.0 release. We're gonna have a whole lot more to share with you. So an exciting time for Visual Studio Code. So let me close by telling you where you can go to find out more about the extension support in Visual Studio Code and Visual Studio Code in general. First off, we have our website code.visualstudio.com. This is where you can find all the documentation that you need to use the product to extend the product. And obviously if you haven't downloaded it, that's where to go to download Visual Studio Code. We have our source code now up on github.github.com, WAC Microsoft, WAC VS Code. And here you can see how we've built the product and hopefully contribute to the product by filing issues and pull requests to us. And the other thing, you can always contact us, the product team on our Twitter handle at code. We try to be really responsive there. So feel free to direct message or tweet to us and we'll follow up with you and see how we can help. So thank you. It's a great time for Visual Studio Code and we can't wait to see what everyone does with our new extensibility support.