Develop Anywhere with VS Code

[Music] thank you we're so excited to show you today how you can use vs code to develop anything from anywhere my name is Bridget murtal and I'm a program manager on the vs code team here at Microsoft and I'm Connor Pete I'm a software engineer on vs code all right so while this is going to be a demo pack session we first want to set the stage with just a little bit of context it's no surprise that we're in an increasingly remote distributed world with even more complex applications as we've talked to customers over the past few years we've observed how their coding scenarios have evolved over time for instance they may have a huge mono repo that doesn't really fit on their local machine or they may be working on machine learning and data science workloads that are really GPU heavy or we've gotten interest in using the latest remote Technologies directly from vs code like the windows subsystem for Linux or WSL which provides a real Linux kernel on a Windows machine as we've talked to customers and we've observed things getting more complex we really feel like your development environment shouldn't have to feel complex so we found that our continued opportunities to provide an even greater remote development experience for instance you should easily access the code you need backed by Source control you shouldn't be restricted to just the terminal or just the browser or just the desktop you should be able to work wherever and however you want and feel more comfortable and everything should feel as seamless as possible with these motivations in mind in 2019 we released the vs code remote development extensions which let you use WSL a container or a remote machine as a full featured development environment you can access any source code or dependencies on those remotes directly from your local vs code the command the extensions also run commands directly in the remote so things are going to work just like when you work locally now I do want to mention that you may remember the first two extensions under a different name remote WSL and remote containers when we launched vs code remote development we used the word remote to mean hey I'm developing somewhere other than my traditional local desktop but understandably users would come in and hear remote and think well this WSL or this container must be in the cloud or must be on someone else's machine which doesn't have to be the case so late last year we renamed these extensions to just WSL and Dev containers to be a little bit clearer now into the next year 2020 work was continuing on another project that fits really well into this remote Vision GitHub code spaces code spaces provide Cloud power development environments suitable for any activity whether it's something short term like reviewing a PR or something longer term like actually developing your application you can work on code spaces in the browser or in vs code desktop with the codespaces extension now while we were making all these great advancements in remote Technologies we still kept in the back of our mind the vs code team's original Vision which was actually to build a development tool that could run fully serverless in the browser back in 2019 the top level.dev domain names became available for purchase so we grabbed a vs code.gov not really sure what we were going to do with it fast forward to 2021 and we released vs code for the web which is a lightweight version of vs code running entirely in your browser we released it at that bscode.dev domain name it's not that we've gotten some context and what we've been doing in remote and web Technologies over the past couple of years in vs code let's see it in action I'm going to get into some demos so I'll switch over to my browser here and I'm going to start off on github.com as I'm sure a lot of us are working on code on GitHub and this code here this devcontainers.github.io is actually a website that we publish as part of information about Dev containers and their open specification which I'll describe even more a little bit later but all you really need to know right now is this is a repo stored on GitHub and I'd like to go ahead and explore the code maybe make some edits and contribute back to it so I could totally clone this in local vs code if I wanted but I can also choose to prepend to vs code.dev to the beginning of it now when I do that we're going to see that in the browser it's going to look just like my desktop vs code we're going to see for instance on the left it has all the activity bar icons that I'm used to with the file explorer and search and I can see the actual files that were in my GitHub repo already loaded in my editor here we can see a preview of my readme and if I'd like I can scroll down and I can actually go ahead and make some edits to my readme as well so if I felt like this website could use even more excitement let's add an exclamation let's say and we can see here we get syntax highlighting and colorization and depending on the kind of language like for something markdown or HTML or css vs code for the web is really going to provide you a similar powerful experience like you get in the desktop now that I've made a change here I can see in the source control or the SCM view that the change is indicated here and if I'd like I can just go ahead and commit it back to my repo and that change will show up on gab and it'll show up wherever else I have access to this code continuing on the left here we can see I have the extensions view so just like local vs code or vs code desktop we can install extensions to make our editor even more powerful something to know is that some extensions will work out of the box in vs code for the web without any other modifications but for some it'll require a little bit of work just to make sure that they're web enabled so to ensure as an extension author that your extension can be used anywhere with vs code we really recommend checking out our web extension authoring guide which we have on our docs so that way you can learn even more and get even more users to be able to use and love your extension as we continue on the left here we can see we have the typical accounts and gear menu and if I click on this we can see that I can use settingsync which I think Sandeep was just describing and that's going to ensure that if I'm working in the browser I can still have the same extensions and shortcuts and key Bindings that I'm used to in the desktop and I can ensure that my vs code editor is what I'm used to no matter where I'm working so I'd like to go back to the Explorer here and let's just say I know this is the home page of my site inducts.html and I'd like to just again I'm so excited about Dev containers vs code day I'd like to just add like some more exclamations here now I'd like to actually run this site to see how it's working and to test out the change that I just made I don't want to just commit it without testing so typically I'll open up the run and debug or open up the terminal when I open up the terminal here I'll see that they're not available in the web editor and again this is because this is a lightweight version of vs code running entirely in the browser so it's going to be a little bit different than the desktop version but it's no worries because we provide easy ways to be Contin for you to continue working on another environment so I could click on continue working on and I see I have different options to continue in a code space or continue in my desktop vs code and for some even greater information about continued working on and GitHub in the browser our colleague Joyce has a session later that we really recommend checking out for now I'd like to try out a GitHub code space we mentioned these are these Cloud power development environments that sounds really interesting to me now I can go ahead and create it from here but just to save a little bit of time I've gone ahead and already created my code space and I have it running here we check it out we can see that this is pretty similar again to vs code Dev or vs code desktop I have all the same icons I have my files here but we can see if we open up the terminal or run a debug it's a more full feature vs code experience because it does have compute backing it it's backed by a virtual machine unlike vsco.dev was which is a more lightweight version of EOS code so I think I'd like to go ahead and try running this app I'll go over to the readmix I think there's some information there about how to run it and let's scroll down we can see okay so there's some steps to build and run and also in here it talks more about Dev containers and I said this is even a site about Dev containers I think it's also worth touching on that so we can see in our project here we have this dot Dev container folder and within it is a Dev container.json a Dev container is going to tell vs code how to spin up your development environment with certain tools or dependencies or languages installed so for instance in this Dev container Json I can see that it's a Jekyll image that's because this site runs on GitHub Pages which is going to use Jekyll And Ruby so it's really cool I could configure my code space with all the kinds of languages tool sets vs code extensions that I really need it's also worth noting that you can use Dev containers in vs code desktop as well with that Dev containers extension I was mentioning so you can have the same configuration again no matter wherever you're working we've also found that Dev containers are a broadly useful tool Beyond just vs code or just GitHub code spaces so we opened up a Dev container specification last year with that goal in mind and containers.gov which I'm about to run now is going to be your perfect spot to learn all about this spec as well so I'll go back to the readme got a little bit sidetracked by my love of Dev containers there and I'm just going to copy this command to launch our app let's paste it and let's see our website run you're gonna see it looks just like if I were to run a Jekyll or Ruby app locally and cool code spaces even took care of port forwarding for me that's really convenient I'll open this up in the browser get connected to my port and there we go we can see we are at our Dev container website which again you can actually access today at containers.gov Super recommend checking that out because it has that change I made as well and I can click through it's just like the real website is and this was a really convenient way to be able to explore an app make changes and run it without having to worry about installing anything on my local machine which is awesome so now that we've gotten an overview of some things that we've done from 2019 to 2021. I want to pass it over to Connor here to talk about some of the other work that we've been doing in the remote space uh yeah thanks Bridget so like I appreciate it showed uh because pieces was a big step forward and allowing people to uh like usually like spin up and like connect to and develop their code anywhere um so you can like just go and GitHub like code space like connect to it and get going but at some point we realize that there's more to like than just like running your code on like GitHub so people have like home servers like PCS VMS and stuff that they want to connect to and be able to develop there as well uh so the traditional way to do this has been through uh like my SSH so um it's like you run like an sh service on your server then you connect there and then you're connected um so our first prototype of what became tunnels was actually building a remote sh for the web but realized that like this isn't actually kind of the whole story so if you have a home PC or even just like a VM behind a firewall you probably don't have a static IP or like an open port like that they can just connect to so that brought us to the idea of tunnels where um if someone can like install like run a service on their machine and then access it um like over there like over the internet then we could have happened be able to open it on vs codeb um so that's what became this new kind of enhanced code CLI um so vs code has always had a command interface built into the top application that you've installed vs code you've probably seen like little checkbox like added to my path um when you install vs code um but now we actually have a CLI base uh being able to be I downloaded and installed as a standalone component um I'm with this we added a tunnel sub command as well as a remote channels extension um so so I build a new CLI so um the viscode itself is a desktop application but in order to actually like run this on the server you probably don't have a desktop environment there so we wanted a a binary that you could download and run on the server uh separately from the entire vs code install uh we also wanted to make sure that the CLI had an identical interface whether you installed it via desktop or whether you downloaded the new CLI itself um and then finally you saw this idea of if we have this like remote capable like installable CLI we can also use that to kind of like consolidate how we do run those in vs code so on today for example uh definitely can connect to a container running over sh running over sh or running into BSL but but to do this it actually re-implants like large chunk of logic it's found in the SSH extension found in the WSL extension um and then and then similar similarly you can use remote ch2s into a Windows machine but but you can't then open a WSL workspace like you could if you're actually running locally on that machine so um if you're building this like new CLI that we can use that we can use like for tunnels like can we also use this to enable kind of those like nesting of remotes through a common protocol that would then say let uh like WSL call through tunnel and be able to like actually open a real obviously workspace into Windows PC and that's something that was they were still working on that we should have news on um probably in the coming iterations um so as I mentioned uh the CLI uh needed to be like easily installable uh portable and then also if it's being used in these other modes it also has to be pretty small and fast to install um so vs code itself as you probably know is a fairly large electron occupation it bundles like a lot of our own code but also a large chunk of like chromium and node.js um so kind of the like next kind of like natural step for us as like a typescript kind of shop uh of a b to build the CLI using node.j using node.js um and and while that would have been like really easy node.js itself is already like a 44 megabyte dish download plus whatever other code that we might add that we actually have to like write us ourselves to enable the scenario um so that actually brought us to building this new CLI as the first large component of vs code to be written in Rust and like as a result it actually worked out pretty well so the the CLI is currently about a six Meg download and takes about uh the same amount of ram so that really neat um enables you to like run this like in the background even on like a small you know 120 120 128 megabytes like VM that you might have Without Really impacting your candidate operations um so yeah uh now let's actually see how this works and and I'll go ahead and actually run this new tunnel CLI there we go hopefully my screen comes up there there we go yeah so to download the CLI um uh like you can go to error code.visual studio.com homepage and then if you and then if you choose other platforms you'll see that we have now um as of I think a month or a month or two ago this new seal I downloaded the bottom of each platform so depending on what platform you're on um if you're running servers get a chance to draw Linux you can go ahead and download that through there and then usually you probably won't actually you probably actually want to copy the download link there and just download it directly onto your server so I've already done that so let's go ahead and actually connect to my server um I just have a little like Minecraft server that I've run for for me my friends here so I'll teach you that to get started um I'll then go to a code CLI folder here and the first thing I want to do is I'll use wget to actually download the CLI so I will download that there you see it's pretty fast about six megabytes as I said um and now let's go ahead and extract that uh try to remember my guitar arguments it looks like we did that there so now if you run code you'll see the usual help this is pretty similar to what you get if you run uh the desktop vs code CLI um but you see we have this new subcommand called tunnel so I'll go ahead and run that I think I've already logged onto the server once so won't ask so it won't ask me to log in again so it should just be able to start the tunnel and then I'm and then now it's running and I can connect to it so uh you can't connect to it in vs code Dev but the first thing I'll do is actually show you how to connect on desktop so if you're running on so um if you're running my PS4 desktop you actually connect to this tunnel just like you could if you're for example running a code space where you can connect to code space from bsq desktop uh to do that what you want to do is First Look for the remote tunnel extension and then you'll want to go ahead and install that there we go and then once you have this you can open the remote Explorer on the left hand side right there and you'll see that there's this new option for remotes so you have tunnels and Sh both both in one View and we see that we actually have this Minecraft my tunnel here called Minecraft is running so I can go ahead and connect the ads and then it'll connect to that it'll probably download the vs code server so I've actually don't uh basically run the vs code server that runs all your Extensions by default uh if we only run that after you actually connect to it and so this is to help minimize our footprint make sure it's like a small as small and speed as possible at least until you actually are running stuff on there um it's not reconnected uh you can um like open a folder just like you normally would I can go ahead and open the the little folder that I was working in before and we can see that inside this folder we have the the code CLI um as well as that archive that I just downloaded here um we have a full terminal I'm not sure why that's still still popping up I might have to fix that um yeah so uh now I can do everything that I would normally want to do just like this so um this is like fine if I'm running locally but then like what if I'm you know on the go and like someone picks me on Discord and says hey you know the Minecraft server is down so um you can also use VSCO Dev from any device in order in order to do that so I actually have a little iPad emulator here which is kind of small but you can probably see it um so if I have my iPad I can just go to uh vs code Dev right there and then if you open vs code Dev you actually get the uh these the the the the the Note 10 extension built by default on vs code Dev so you have to hit the sign in button here so I'll go ahead and allow it to sign into GitHub there we go authorize that and then once you sign into GitHub you should see the channels here and then just like you would on desktop you can connect it to that tunnel and then you'll see that we are now connected once it builds up and we have a I'm a full full terminal there I'll just continue this on on um on my main PC just so you can actually see what I'm doing so I'll go ahead and just open vs code Dev here um it's um it's just like how like it showed for for code spaces uh you can uh then like create files it and then you can also like board ports so forwarding ports Works in tunnels just like it does and um encode spaces so what I can do is go ahead and like make a like new like home page I can say like hello world and then I can serve it and then you'll see that it automatically for the port and and I can go ahead and notepad it and open that in my browser just like I couldn't include code spaces so yeah uh so that's how tunnels Works um give it a shot today um yeah so uh uh with this like kind of like new sub tooling um it's obviously like new language where traditionally attached a typescript um a product um so like there were some challenges yeah first of all um there's a lot there's like a lot of excitement inside Microsoft for us and you might have seen like some news articles about like you know different parts of Windows now being written um in Rust but it's still a new language company where we have like very mature processes for example if you're writing a c-sharp application you know c-sharp has been around for I think 21 years or so and the rest has been around for much for much shorter period of time than that uh so like there's a lot of like kind of questions and stuff that have good answers um and good scenarios if you're writing C sharp but don't have uh yeah same kind of like processes in place for us yet um and then also some also similarly if you're interacting with systems like in Microsoft um I'll have tooling and stuff like isn't really made Fortress yet so for example the tunnel service is owned by a super team in Microsoft and we had to kind of write um the the rest tunnels SDK because they didn't have the um the you have the knowledge or time to like build out a whole new language of SDK just for us but more importantly is making sure that the community can selection actually actually contribute to vs code so um as others have mentioned vs code is a product we'll find open source and in the communities and probably is incredibly important for us so like we want to make sure that uh the bar contribution is still like very low both for internal as well as external contributors um so if something is like a capture or Joshua developer there's one like patch you know a quick plug in vs code like you don't want to have them have to install rust or or works like learn rust to actually be able to to contribute um and that's something that that we're still working on that we're like new to tackle as the CLI kind of um gets more ingrained in in vs code for example like one idea is that um um like most developers have like a container system running on their machine um already for some reason by this point so something that we could do is we see that uh like there are continuous locally but there's locally we could um automatically build the CLI inside of a container instead of building it uh locally on the user's device um yeah so uh that's a kind of a quick overview of the latest addition to the uh vs code uh like remote family of extensions and Stereos um and I'll turn it back to to finish this off thanks Connor so as we've seen today we have a unified set of remote experiences that are suitable for just about anything at its core vs code is a code editor and it integrates with other environments these remote and web Technologies to become even more powerful and flexible you can really make your vs code environment what you want and need it to be which is what allows us to use vs code to develop anything from anywhere we want to thank you so much for joining our session today we're really excited to hear your questions and your feedback we've included some resources that mention some of the things we talked about today so we'd love for you to check them out and as always happy coding thank you so much Bridget and Connor I think it is always so exciting to be able to hear how you can use vs code outside of the limitations of your local machine so it's so cool to see all the options you have we do have a few questions from the chat so first off can you say What's the difference between vs code.dev github.dev and codespaces yeah that's a great question so vs code.gov was the first technology that we saw me Demo today and you could think of that as your lightweight version of vs code where you want to explore some code and maybe it's something you have on your local machine or maybe it's something in GitHub or something in Azure repos or somewhere else you can do quick exploration quick edits look at issues and pull requests as well and then once you're ready to truly run that code and get a little bit more of a compute-backed experience then you can go transition over to GitHub code spaces or your desktop vs code and github.dev is just like vs code.dev but it's a bit more GitHub focused so you can actually go to any GitHub repo and hit the dot key github.dev will load up so it's just a little bit more GitHub themed interesting that's great um well I had you mentioned tunnels before so how are tunnel data excuse me how is tunnel data secured uh yes like you did I was like you did like actually didn't see me like login when I first started uh running to haul because I already logged into that machine but on both ends and there's an old gaps login either with GitHub or Microsoft in order to authenticate yourself and then you can only connect it to your own tunnels and then also once connected to Tunnel then I created is actually uh like enter encrypted from uh both the your local machine to your note server so we can't intercept it like no Community data um yeah awesome and um Parson app in the chat asks um can you use the remote development in network restricted environments like over internet without GitHub um so uh like you do need to actually be able to like connect uh to the uh both GitHub in order to authenticate as well as to our tunnel Service uh domain name in order to actually like establish the tunnel from end to end um both of these like domain names are actually published on a recommendation um so if you go to uh uh code.co.com and go into the like tunnel section of the docs um then I I don't know whether it's off the top of my head but you can make sure that like that domain is allow listed inside of your firewall and then you should be able to have that work awesome yeah awesome thank you so we have another question from Carlos in the chat and they ask are all my plugins in my vs code desktop synced with the vs Dev web version that's a great question so they totally can be you can turn on settingsync and then you can log in Via GitHub or Microsoft and then once you have settings sync enabled then you can bring over everything not only your extensions but also other key bindings and settings let's say and bring that into the web editor and you can bring them to GitHub code spaces too that's such a good call out because I feel like we just talked um and saw Sandeep talk a bit about setting sync so it's really cool to be able to see that um into the remote development space as well and one thing actually I do want to uh call back to Bridget that you mentioned was hitting the dot for github.dev I feel like that is such a lesser known feature that people know about um so can you just reiterate that one more time absolutely so you can go to any repo on github.com and if you just press the period key or the dot key on your keyboard it's going to load up that vs code for the web experience so it's going to be more GitHub focused so for instance you're only going to be loading up GitHub repos in there so if you decide hey this is awesome I'd also like to load up some ethos elsewhere or stored locally then you can also move over to vs code.gov awesome that's one of my favorite things to Showcase anytime we're in front of people and be like hey did you know I'm literally just hitting the dot key and then boom you have this entire editor in your web it's so cool okay one other question we have in the chat we have a Marco asks on my desktop I use Dev containers for development if I open a tunnel through vs code desktop I can't work with the container any chance to add support for that uh yeah so uh it's part of like what I mentioned where we have kind of the Celiac is kind of the glue code um it's currently like not possible yet but actually I'm um I was like working this week on it so uh uh soon um I expect to probably like with the next a few iterations in the next few months we'll enable that um probably starting with the BSL is what we're working with for first of all right I love that we're able to talk about things coming up we get to talk about talk with you all who are actively working on the product right now thank you so much for that demo um and I I appreciate being able to jump into that so just to note that we got a couple of questions from the chat keep going with the chat we're going to be here all day we love to talk with you and we have tons of knowledgeable moderators in the chat helping you out and sometimes they're going to be able to get into the live stream and we'll shout you out yeah absolutely so thank you so much Bridget and Connor it was a pleasure hearing from you um and we're excited to see how everyone can use remote development in their workflows

Channel: Visual Studio Code

Views: 15,028

Keywords: vscode, visual studio code, vs code

Id: c0L85sFHF2I

Length: 27min 38sec (1658 seconds)

Published: Fri Apr 28 2023