VS Code for the Web: vscode.dev

[Music] hey hey want to see something cool yeah open your browser and type vs code dot dev and press enter and boom you get vs code running right in your browser you can open a folder on your local machine so i'm going to select this folder here ask me if i want to view the files then i can look at all the code inside so i can do all of the code editing that i would normally do and that includes things like multiple cursors and when i make changes to this file these changes if i click save are saved to my file system now here's another cool thing you can do if you come to extensions here and find a theme that you like a lot let's say fairy floss just right click and say copy extension id now try this come up here type theme and then paste the extension id copy that url send it to a friend and and what's up folks welcome to the vs code weekly live stream we have an exciting one for you today we're going to talk about vs code.dev hopefully you saw that announcement uh yesterday i think that was yesterday it seems like it seems like years ago it was yesterday uh we're gonna do that today and it's so it's very exciting for us because we have so much to show you uh before we get started as usual go to youtube youtube.com code and subscribe subscribe subscribe we really appreciate that hang out with us on tick tock tick tock.com at vs code we'd love to connect with you there and don't forget about our meetup group all right we got all the bases covered i think we do awesome so thank you for being with us today we are we are covering a big announcement i mean there's no other way to put it um when we did vs code day back in what was that january i think man that feels like oops turn this turn the volume down sorry about that about it feels like a lifetime ago but back in january the keynote session eric gamma talked about vs code an overnight success 10 years in the making and one of the things that he mentions in his keynote is that when he first came to work at microsoft that his mandate was sort of to build an editor in the browser that didn't feel like it was in the browser and as of yesterday vs code.dev has launched in sort of the realization of that vision and to talk with you about that today we've got bridget murtagh my colleague one of my favorite people and pm on the vs code team uh let's see let's add bridgette hey there she is hey bridgette hey burke what a great way to start the day one of your favorite people good for the labs like what could get better than this thank you so much i set the bar i apologize i i've had too much coffee and i'm feeling overly uh friendly so uh your audio is just a tad quiet is there any chance you could turn that up just a bit it is a tad quiet um i don't think i've changed anything from my microphone so really the problem is me as is per usual that's okay work together now we have we're gonna have another guest do we need to add that person now or should we save that for later introduction hey hey tana what's up hey how's it going uh this is my miss my other favorite person can you have two i mean you can only have one favorite person even more than one i like chocolate and ice cream it's hard to find it's true when all my kids are around i tell them like when the others aren't around i'll say don't tell your brothers but you're my favorite and but then i say that to all three of them i don't know if is that bad parenting i don't know you're playing with fire for sure probably a problem so anyway i'm off topic so back to the subject vs code.dev uh i gave an intro but bridget tana what is it and what are we doing today yeah absolutely so burke touched on this but the vs code team's original vision was really to build a development tool that could run fully in the browser so we've been hard at work bringing that vision to life and we're super excited to show you more so without further ado i think i can hop into some demos to really just show you what it looks like live so i can go ahead and share my screen awesome do a few clicks not as smooth of a transition as you know making it out to be there all right um are you able to see that there not yet hold on let's here where's your screen oh it's coming up there we go what is that it's a nice picture all right that that is what edge is showing up here do you know what this is anybody chatting to recognize this picture i'm curious yeah chat let us know it's a cool picture um all right so if i go to vscode.gov that's all you have to do to get to vs code for the web you can see it loads instantly and it looks just like the vs code that we already know and love um and so with this here we didn't have to install anything um and we're gonna have a lot of functionality that we can go ahead and explore so let's try out some things we can go ahead and let's try creating a new file you can see i already have a few different options here for maybe some different extensions i have installed but let's just start with a text file for instance and also just like the desktop i can go ahead and select a language to get started so vs code is still going to guide me throughout the process and i think i want to start off just with some markdown sounds like a good way to start my day and i want to say hello from the web you know sometimes i don't always remember my markdown syntax perfectly so i'm going to go ahead and open a preview see we can totally do the same functionality that we're used to in the desktop it's awesome and then if we like this file i can go ahead and file save or control s i could save it to my local machine which is awesome and so we really have this cool local development tool and then rather than just creating new files i can also go ahead and open projects or files that i already have on my local machine so i'll go ahead and close out of this i don't need to save it i'm not too committed to that header file right now so what i can do here is i'll say open folder over in the explorer and i have this html project that i've been dabbling with so i'm going to go ahead and open it and we can see that vs code prompts me to grant permission essentially for the website to be able to view the files so i'm going to grant access and that's because browsers like edge and chrome are able to use the file um what's it called like the file system access api that's that's what it is um and so that's going to basically give the web page access to my local file system so that way i can go ahead and use vs code for the web to do local development which opens up some really neat scenarios so i can go ahead and work on projects that i have saved locally like this one and even for other scenarios like where i don't want to install anything um i can go ahead and work on lower powered machines like a chromebook or it opens up to these really cool scenarios where i could do development on an ipad we know that's something that folks are really interested in and with the launch yesterday we've already seen people using it on ipads i'm very interested yeah everywhere the giant ipad i feel like this is it yeah so we can see here that in our html file you can see we get syntax highlighting we're going to get completions we're getting information as we have as we highlight some of this text here and let's say i'm not super committed to some of this coloring that i have in my header so what i can do here is i get this i get the css color picker that i'm used to in desktop which is awesome and go ahead and change the color i'm prompted to save my changes and i've been previewing my file over here just refresh it real quick automatically loads up it's pretty cool development tool to work on these local projects um so with this experience we see that for these like webby type languages like html and css we're really going to get a super familiar experience just like the desktop essentially but really for most languages we're going to have some level of support so some level of like syntax highlighting or completions or bracket pair colorization and we'll get even more into that a little bit later on in the presentation um but i'm gonna close out of this for now i'm happy with my singular change i think that's good so we've seen how we can now start new local files or open existing local files and projects and beyond just the local files we can also work on projects that are stored remotely so for instance if i have some projects that are stored on github as probably many of us do i can totally work on them in vs code for the web and there's a few really simple ways that i can do that in the lower left hand corner here i see i have the option to open a remote window and the commands here are also available through the command palette so through ctrl shift p or command shift p also we can access all our commands like we do in desktop so through here i can see i've lost option to open a remote repository so i can search through repositories on github and go ahead and open them up really easily in the editor but also a really neat trick is i can go to any github repository on github.com so for instance i have this app that i've been working on and i can just go ahead and prefix vscode.dev to the beginning of the url and what we're going to see happen is it reloads and then we're going to see that now that project is loaded up in vs code for the web and again it was super fast loading didn't require any extra install setup nothing like that and now once we're here we're gonna have some other cool features that we can take a look at so for instance maybe as i'm working on this project i realize like hey like this specific line here i want to go ahead and save this for later or i'm collaborating with some teammates on this project and i want to be able to easily deep link this them to this file or this line in this file really i can go ahead and right click on it copy as i can copy as a permalink or copy github permalink as markdown and then what that looks like is if i paste that there we can see that it'll then bring me specifically to that line so it's a pretty cool trick to be able to navigate to specific parts of your repo as well and again over in the left here we're going to have very familiar parts that we're used to in desktop so we're going to have search and go ahead and search my repo and we're going to see right now we have results in a single file and that's because it's using github text search which does provide us some level of accuracy but we can become even more accurate by enable indexing for exact text searches and i can choose to either enable indexing just for this repo or for all of my instances so i'll enable it just for this one and then once i do that we can see that it's going to fetch the search index and it's going to then come up with some even more options so now i have multi-file search even more accuracy which is pretty cool i can go ahead and commit changes really easily because i was playing around here earlier updating the readme i'm going to go ahead and delete that it's not really an integral change so i'll say update readme changes are going to be committed directly to the branch i'm working on i can just go ahead and commit that and then this change is already going to be available on my repository so no extra like get set up or anything like that or cloning or saving code to my local machine it's all still just in the browser and if at any point i want to go back to that repo that i have in the browser i can click on this hamburger menu here and i can say go to repository so i have also really easy going back and forth too some other cool features you can easily create new prs um they give a pull request and issues extension is going to automatically be included so you can get those features um that extension is also available in desktop and so if you've used it at all we definitely recommend it for using like pull requests and issues and things like that directly in vs code without having to leave the editor at all um and also what's cool click on the gear here you can switch between stable and insiders even so if you want some like the latest features and fixes in vs code you don't have to worry about like oh like i need to go to some other link or memorize that you can just click on it right here which is pretty nice um yeah so we can see that there's like a ton of different options here for collaborating for making changes really easy integration with github um and so then you may be wondering like hey like i'd like to then go ahead and actually like test out my changes especially if i'm like committing a big one or opening up a big pr that totally makes sense um but since this is a lightweight version of vs code running entirely in your browser there isn't any back in compute so if you want to like run something in the terminal or run and debug what you'd want to do is continue working on in another environment so how you can do that is we see already in the terminal here it says terminals aren't available in the web editor to use it you need to continue in another environment so we're provided easy paths directly here we could either clone this repo locally continue our work there so we could actually run our code get the full power of vs code or we could even create a new code space on it too so you have these easy integration points all right so that's kind of like a look at some of the github integrations but beyond even just github because vs code for the web has support for other source control repositories as well um we can take a look at support for azure repos so over here i have the same repository stored on um azure devops since azure repose is part of azure devops and similar to how we saw on github.com i could just go ahead and prefix vscode.dev to any github.com repo i can also prefix vs code.dev to any azure repo or branch or tag so let's go ahead and try that i'll go over here we're gonna see it loads up and there we go and something worth noting is that the azure repo support is still in preview so right now the support is read only so that's why you're gonna see like this little lock here it's read only but it's still an awesome way to go ahead and get this like rich browsing and reading experience directly in the browser um and being able to like search and go to different branches and those kinds of features as well so yeah bridget if i could jump in just real quick this is i mean there's so many awesome things that i just saw the prefixing vs code.dev in front of the url i didn't even know you could do that we have a bunch of questions from chat do you want to take those now or do you want to wait and go through everything first uh maybe we could take a couple and then we could take even more at the end if that sounds good to you yeah let's do that so let's just start with the hardest question you'll have you'll get this morning all right all right here it is so cyrus wants to know does this completely replace github.dev all right that's a really good question um so for those of you who have maybe seen github.dev that's basically a customized version of vs code for the web it works on any repo on github.com you can access it just by hitting the dock key on a github repo and it'll load up a customized version of vs code for the web on those repos and so we consider that to be a really good companion for working with github making lightweight changes to any repos and working on prs um but what's neat about vs code for the web is it has support for additional repository hosting services and like some even more routes is what we call them so like wall vs code.dev it'll have the slash github route similar to github.dev um it's also gonna have like slash azure repos it's also gonna have some like other routes that we're taking a look at so that's kind of like the difference and so i think github.dev definitely still is like a great companion to github definitely is like deeply integrated and has great uses um but they kind of have like their separate uses as well if that makes sense it does and so here's another great question which i think we can answer real quick and then move on sure so does this work on a chromebook yes it does um so without having to install anything it'll be a great tool for things like chromebooks or um scenarios yeah where maybe you didn't want to or you weren't able to previously install vs code so go try it out on chromebook and let us know i think you can install vs code on a chromebook but i don't think it's very straightforward yeah we have setup steps i believe either in a blog post or a doc um so you could check those out as well if you were interested in installing vs code but this just takes away those install steps awesome all right i will uh we'll proceed i know we've got a lot to cover all right sounds good um so yeah so that github.dev question and touching on routes actually sets us up really well for kind of like the next points of the demos which is this idea of routes and urls so up to now we've seen vs code.dev github to look at github.com repos and we've seen slash azure repos now so we can look at repos that are part of azure devops but there's even more routes than that um so similar to the desktop vs code we can really customize our vs code for the web experience through rich extensions and things like that but unlike desktop we can customize it through these specific urls and routes so one that's really cool is we actually have this theme route so i'll show you what that means so there's this one theme that i've kind of like heard about and i've heard that it's really cool and it's called night owl so i'll search it up here and what you can do here is you can copy the extension id of any theme and then all you have to do is then switch it the url to slash theme so it's going to be like the part of our route here and then slash and then you can paste um the id of the theme and so then we're gonna see here that our editor reloads and then we can see that it's installing the theme and then we see also the theme took effect now and we didn't have to like specifically install it from the marketplace there and so now we're told like welcome here's a preview of night owl theme in visual studio code for the web um and so it's neat because we now have these shareable urls where we can quickly try out different themes that we're curious about and we can like play around with them we have these test files so we can see if we really like them and we also have the option here to either keep the theme so hey like i really like it i want to continue doing all of my work in the web with this theme or if i want to keep trying out some other ones maybe i'm not really committed to this theme i don't have to keep it so i have a couple of different options here and what's cool as a theme author yourself or as an extension author is you can actually add a badge to your extension readme so that way users can even easily even more easily try out your themes and like share them with friends and things like that so i'll go over here so here we have a theme and we can see we have this badge preview and vs code.dev so i'll click on it and once i do that we're going to see that the editor reloads and now i have a preview of a new thing so i have the preview of this theme and i can choose to either keep or don't keep it again and we're going to see that the url here is just like the other one that was generated and if you have an extension that has multiple themes in it you can either specify which specific theme you want in the url or the theme tester is going to automatically choose the first one in that pack so it's really cool because as an end user you get these easy urls where you can try out themes quickly and as an extension author yourself you can really help users quickly try out your themes and get even wider adoption of them which is awesome um all right so that's one additional route and then we also have another really cool one that we want to highlight that helps with collaboration and that is the live share out um so some of you may be familiar with live share or if you are like an active vs code user you probably are familiar with live share have used it to some extent but in case you're not um live share is an extension that really helps with collaboration um so it's kind of similar to maybe if you're working on like a document with some other folks and you see everyone's cursors together and um in this case everyone could maybe be working on some piece of code or a project together and see everyone's like cursors in the code project together and the live share sessions can either be one-on-one or they can be one-to-many uh so like in the classroom setting livestream works out really well so liveshare is now enabled in the web so you can go ahead and install it in vs code for the web and you can either start or join live share sessions completely in vs code for the web which is awesome so here i already have live share installed we can see here that i can either join a session and i can join a session that was either started in vs code for the web or i can actually join a session that was started in vs code desktop as well so there's a lot of flexibility and no matter where i'm working or like my friends and colleagues are working we can all collaborate together really easily and if i said share and i generated a url um i can see here that like if i pasted it i can click properly we can see that it actually generates a web url as well um so i could like go ahead and join in another tab for instance but i'll go ahead and stop that there i don't think we're super interested in seeing me collaborate with myself on code well i was gonna say we could put the link in the chat and just let everyone just let everybody join live share all at the same time let it be how can i possibly go wrong yeah yeah i don't think sharing like a mass link to people has ever gone wrong in the history of things sorry cat i cried but yeah try it out it does work so um but yeah so that's kind of a look at some of like the routes and just like a touch on some of the extensions for instance like with live share but even beyond just live liveshare there are a lot of really cool extensions that we can go ahead and use on the web um it's worth noting that most ui extensions like themes and snippets and grammars will already work in vs code for the web um but there are some other interesting extensions as well that do work so we want to go ahead and highlight some of them and show what you can do already um so for instance if i go over here a practice that we typically use on the vs code team and you can totally check this out it's in our public vs code repo is we use notebooks for a ton of things and we'll use that for monitoring issues and monitoring status of like apis for instance and so for instance this is one of our notebooks on the team that we use and we use it to monitor the status of like proposed and enabled apis and things like that for different iterations and so what i could do here is again because this is a repo on github.com i could just go ahead and prefix this url with vscode.dev and a slash we're going to see it reloads in the web editor and then what's neat is that it's going to be automatically shown up as a notebook and so i don't know if you were concerned like oh it's just going to show up as like the text nope it's actually a notebook and that's because the github issues notebook which allows us to actually run really valuable and interesting github issues queries is enabled for the web so for instance now i could go ahead and run these cells i could get the results i could open them up and so i can fully run the same queries that i would run in desktop vs code and that kind of thing fully in the browser which is awesome and we also have some other cool use cases for like notebooks or running fully things in the browser and so you may be familiar with like for instance like python notebooks it's a really common one so if i go over here um this is a typical python notebook it's ipi notebook that kind of ending if you've worked with notebooks or your data scientist at all in any way and so you may be looking at this it's like first of all it's like wow this is awesome that it like loads up like this envious code for the web but what's cool is that with um some like kind of web magic and some really hard work from our team as well we're able to get it so that jupiter notebooks can run properly against a pi died kernel in the web so here i can actually go ahead and run these cells in the web so that's a good time to show this comment which i've been waiting on but that's exactly what this comment is is can we do what you just did and so what you just did was you just ran python in a web browser with no back in compute environment how in the world is that even possible yep so we have i'll show you the extension um but we have this theos code pie diet extension that one of the engineers joyce on our team has been hard at work developing um and so it provides this kernel for vs code and for use in the web and so you can read even more about it through this like readme and this kind of thing um but yeah like there's different experimental technologies like iodide and pilot and those kinds of things to allow us to run python in the web and so as these kinds of technologies get further and we experiment more with them we're going to be able to enable even more experiences in the browser yeah it's so phenomenal i think that's you know webassembly powered this sort of web containers idea but that just that still blows my mind that that's even possible but uh all right go ahead i know we've got much more to do and we've got tana's patiently patiently waiting on the streets okay all right we're almost there just so many cool things um and then in here i also happen to have this image and another engineer team daniel he develops this extension called luna paint which allows you to work on images directly in vs code which is pretty cool because like why do you want to leave vs code for any of your work when you could just continue to work on it directly in your editor so for instance if i open up a png i can see that if i have the luna paint extension installed i can go ahead and work on it maybe i want to mark it up i want to go ahead and circle this so even more extension power directly in the web um and then i have one other one um and so again i've kind of been navigating between like going to github.com repos and adding vs code.dev to the url but we can totally navigate through them through the lower left here or through commands and say open remote repository and navigate to other commands or other repos rather so what i could do here is there's one other repo that i want to take a look at i don't need to save those changes i'm going to continue on um another cool extension we have um that a colleague that we work with jonathan carter works on code swing allows us to run basically webby languages directly in the browser as well and so we have code swing here that way for instance if i make changes here it's like html i can get responses and then one other thing worth noting is there is another route so if i update this from github to codetor this repo is cool because it's configured with a code tour and now codetor is an extension that allows us to basically have these guides and paths through repositories to maybe have lessons or to teach people a new code base so we can see here that now the code tour is enabled in this repo and so we can step through it we can learn more about the repo and all of this so i can say next and i can step through it which is really cool and so now we've seen all these cool extensions that work but not every extension is going to work in the web and so for instance if i searched up like c plus we can see a variety of these extensions have an explanation because they're not available in the web um it goes down there here we go okay so it's not available in the web but for languages like c plus plus a lot of other languages i mentioned earlier that a lot of them do have support included automatically in the web and we can see here a chart of some of that support that is included and what's cool is the support is built on its open source project called tree setter you can learn even more about it uh if you look up tree sitter um but beyond just like the languages like c plus or rust or go you may be wondering like hey i have another extension and i'd like to go ahead and enable it in the web we definitely want more extension authors to enable their extensions because that provides these really compelling experiences like the ones we've already seen and that's what my teammate tana is going to show you more about so i'm going to go ahead and pass it over to tana and hey tana if we could i'm going to start you off with a question before we get started on your demo and then folks we're gonna get cut off if you're on learn tv but we're gonna go long today because we have a lot to cover so please hang with us on youtube uh youtube.comcode and that way you won't get cut off all right so let's start off with a quick question which i think is a good question that some people are going to have which is i use firefox on ubuntu and it doesn't have a open folder option available what's going on oh uh i actually don't know the answer of that question immediately um bridgette would you happen to know i have firefox and i don't have open folder available um i think that maybe because firefox is not like chrome or edge where it doesn't have the access to the local file system through the file system access api so i'd like to see if you're able to try it all with chrome edge if that goes away if you're still having trouble on other browsers as well definitely let us know yeah that's exactly right the file system api is supported in chrome and edge but it's not supported in firefox or safari yet uh and so on places like an ipad you can't hit your file system but you can upload a file from an ipad uh so you try that out if you've been coding an ipad so with that sorry tan i threw you a curveball there uh go ahead yeah no worries um cool well thank you hopefully you can see my screen yeah not yet i gotcha there we go there we go okay cool all right um so once again i'm also in vs code.dev and i actually want to highlight an extension so there's this extension that lets you make slideshows just directly out of markdown it's called marp and so my entire slideshow which is only like four slides is all done through mark and it's available on web which is really cool because then i can quickly just make a slideshow i did this like last night really quickly and it looks great and it took me like five minutes so good shout out to mark um but yeah so extensions for the web so you'll see that some of your favorite extensions will work on web but a lot of them won't um and a big part of that is that like if you have an extension that has code it's not completely easy to make it work for web right away like you just have to do a couple changes um but if you have like a theme or you have snippets like any extension that doesn't have a main in this package.json will work but if you do want to make your extension work the most important thing you can remember from this part of my talk is this web extension guide um if you click on that it'll be available here and it's a little bit lengthy but it has a really good in-depth overview of everything you need to know from the anatomy of extensions in the web to like what you need to do how to create a new one or how to migrate your own so i'll quickly go over some of the highlights from that but um i won't go super in depth i highly recommend reading this if you're actually looking for like a step-by-step guide um to migrate your own extensions or to create a new one so uh like i mean like we mentioned earlier um some of the extensions will work just out of the box and the other extensions won't but they're not actually that different from extensions that do work in vs code dev so meaning like a lot of the code that you'll be doing for your extension will probably be about the same the only difference is that for extensions that run on vs code desktop um normally you can just make an extension that has multiple javascript files or typescript files that become javascript files and you have multiple of them and you just link to the first one that has your activate function and the rest of your extension will just work and that's the general like how you make a simple version of how you make a vs code extension but for web we need that extension bundled into one javascript file because we load up one single javascript file for your extension and we can't have multiple so i think that's the biggest challenge or possibly like the newest thing that for some of you might be learning is how to bundle so there's a couple different bundlers we recommended webpack that's not the only one there's many other bundlers but essentially the goal is to have it down to one javascript file um and that is like pos probably most of the work so that's part one um and then part two is uh we have this thing and i'll just show you the table uh this table looks a little bit overwhelming but it's available um online and i'm just gonna kind of going through this list part two is that normally an extension that has code has a main and that's where you point like extension.ts has this activate function um similarly we have just a browser entry point so it's the same thing but instead you would point it to that one javascript file and i'll show you examples of this right after um and then finally this is a little bit more of a nuance but um you can't use uh node libraries in web just because they're not built into the browser so libraries like fs path os all the other built-in node libraries that you might be using in your extension unfortunately you can't use them directly on the web so you need to use a web compliant version so either you can use like there's a lot of npm libraries that have like a substitute for some of these node libraries that are web friendly like path browserify or os browserify or you can add some fallback functions like hey you know if this uh node specific library doesn't work then i'll do this instead um you just need to add some fallbacks for that and you can do this through webpack so webpack has some really cool uh like configurations so you can have fallbacks in certain environments um so that's the other caveat and then along with that file system is quite important you want to read like if you have an extension and you want to read all the files of their workspace or what they're working on um the the best equivalent to that for web is the vs code file system provider which is an api that's created just to help you open files read files write files everything so i actually have it open here um this link will just open up the uh vs code dts like the interface file that explains all the different functions available so you can have like watching for changes in the file but any information about the file reading directories writing direct creating directories everything is available through here um so that i'll close these so don't get distracted um so that would be another important part is going through if you have any code that involves working with the file system to replace it with the vs code files as a provider it's pretty similar but there's just a little bit of syntactical difference with those so to actually show what this looks like um a couple of months ago martin and i another engineer on the team we decided to help some of the popular extensions migrate just to see what it's like to a migrate and be just help kickstart having more extensions on the web so we went through some of the popular ones and we helped make prs to actually migrate them over to the web so i was going to show you two of them that i worked on and what i needed to do these are simpler examples but i think they cover most most cases um so the first one was rainbow indent so essentially uh it's an extension that like colorizes the indent so you can see it easier and this one was pretty simple um i'll show you here and then also showing you on vs code essentially the first thing was i had to add a webpack file um because they didn't have any bundling before they just had typescript compiling which is completely normal for a vs code desktop extension but we needed to add a webpack bundler so we can make it into one file um and then we needed to add some fields to the package.json i'm going to jump into vs code because i just like the wavius code it's just easier for me to parse so uh while we're here this is the webpack file that i added this is the project um the main thing is you can actually copy this directly from the guide it's available so you can just copy it right off and it has everything that you mainly need so some key parts is you need to make sure that the target is web worker a lot of times when you're making extensions you would want the target to be node because that works for desktop but for this one since you want it to work on web you need a web worker um when i mentioned that you might need some fallbacks for some functions that might not work on web or some modules that might not work you can add the fallbacks here under this resolve this is the same as your main normally where you point to where your uh extension starts and then the rest of it you can kind of copy but they're just dealing with like loading typescript and so on and like what to output the file as so that's the first main thing you need and you can copy and paste this directly from the guide um if you're not really familiar with webpack and you just want a starting point yeah that was my first question tana is that i am very scared of webpack chat i'm just gonna be honest and so does this just kind of work for every extension i just need to add this webpack file yeah essentially you might need to adjust these uh like uh where your extension starts because i mean this one starts the source but maybe you have like a different folder structure so you just need to adjust this um and i actually have another example uh a webpack change but this one is like a copy paste from the guide and all you have to do is maybe uh change this and be wary of where you're outputting so in this one when when it's bundled the final file will be uploaded onto a disk web folder so you just need to be aware of where the file is going to end up and where your extension starts okay yeah um so when you and then and then the the last part is if you added uh like libraries like path browserify you kind of just have to add this as well so this one's saying like if you see an assert uh use my like npm library of a search so similarly i would do just for example i would do path and then require resolve and then i would do path browse or if i uh right and whatever else you use to like substitute um you just list them here so yeah let's this is copy paste once again so you can check that out and you can also of course look at webpack uh documentation and that will explain a lot more of the fields um we tried to in the guide explain what some of these fields mean um to give you a general idea but we don't we won't we don't go as in depth as the actual webpack documentation so makes sense uh and i can copy paste i mean that's how i got this far in my career is copy and pasting from stack overflow it's an honest moment chat i'm not embarrassed i am who i am sorry tana it's okay we've all had that face and probably are still in that face how to link a style sheet i google it at least once a week of course sorry let me do it i don't remember all that um anyway so that's the first part is you have your file so that's cool you have one javascript file let's see here i have one javascript file this one less important this is the main important one so this is the entire extension created into one file and then we just have to add some things to our package.json so similar to how we have a main here and before the main was just pointing to the actual extension over here um now we are uh actually oh they had an out file sorry out folder because they had typescript so it's pointing i don't i don't have it built right here but it was pointing to the typescript generated code now instead we also want to have a browser point and this points to our single file so that's why it's important to remember where it is um and then you just need to add some scripts to compile webpack this is also copy and pastable from the docs from the guide so you just need to add some scripts to compile it to package it to watch it if you want to watch for changes while you're working on it and be sure to make sure that you also call that packaging before you publish your extension so that's also available on web properly and then you would just um install the required dependencies probably like it'll complain at you hey you don't have this and then you just npm install it so that's like the simple change um and this is with an extension that didn't have any webpack before so we added this file and it didn't use any like node libraries there was really no necessity for doing any of that either so that's a simple or one i'm going to close this for now and then didn't expect to go there um and then we have a slightly more interesting example but not too hard still so there's another extension called color highlight and what it does is essentially shows you the color of the like uh sorry color hex code in vs code so like when you have hashtag i don't know like uh zero zero zero it'll like actually color it around it the color um so this one they actually already had webpack bundling for their normal extension so all i had to do was kind of edit their current webpack bundling and i'll show you guys like a cool way to do that if you uh already have webpack bundling um and then the same things as before adding those uh browser entry points any libraries we've sub so in this one i did use path browser five because they use pass a couple times um but here i will show you what the webpack file looks like now this one's gonna look a little bit different um and not a copy and paste but i will explain what we did and it's not too too bad so essentially whatever they had initially in their webpack file it was mainly all of this stuff and all of this and pretty much it's saying like okay this is where the the extension starts um this is common amongst obvious code extensions to say that vs code is an external library that you don't need to get and this is just to read the sorry javascript files um and then they had uh the target being node so this is so it works on web sorry on dev like desktop and then where like the file gets outputted so what i did was i took that and i broke it apart so i said okay this is the stuff that i want to be common amongst sorry i keep highlighting um this is the stuff i want to be common amongst uh both types of extension like like both web and the desktop version will use this like they both have the same entry point they both use vs code they both will lowe's javascript so i put that under this variable called base config and then i said okay the node version will use everything the base one has but instead the target will be known and the output will be called extension dash node and similarly the web one will be everything that the base has but the target will be webworker the output will be extension-web and here's where i added okay if i see path i want to use path browserify um in this case i just said if i see fs i'll set it to false i don't exactly remember right now i did that but essentially this is adding a fallback for fs so saying like if you ever did like fs.read file it would be like false.read file so it would complain and i probably did that just to verify but anyways um so that's so it's like really similar except we just added some specific stuff for web and some specific stuff for node um and then you can say hey i'm just gonna export both of these and so both of these will now work and both of them will generate a file and like both of them will each generate a file so uh you can see there's one for known and one for web so both of them generated their own file when you run it and so then when you have that which is helpful let's look at the main so now we can just use the respective node or web versions um so you can just put that in there and then they already had all the scripts over here scripts they already had all the webpack scripts because they're using webpack already so i didn't have to do anything there and then as you saw i added just one library path browserify to help uh with any like path uh calls i had so these are the two changes i did um and now you're probably wondering okay how can i actually like test this like make sure it works on web because you know i'm not really sure and normally like i would just go like hey launch extension so luckily you can do that and in the in the guide we actually have three ways to run your extension your web extension test it out there is a launch config so you can run your uh extension in a extension host that's catered to be like webesque um so you could do that to start off and i think that's the preferred way if you're just debugging because you can then still set breakpoints still debug like normal but it's uh like a web friendly version or like a webcaded version um so you can start off with that um and then if you wanted to like take it up a notch and say okay like i want to see it in the browser but i still like wanted to be kind of semi easy to debug um we created a library and let me see if i still have i should have kept the docs up but no worries i could just click on this um sorry this looks very long and intimidating it's not as bad when you're actually reading it but we just wanted to be as thorough as possible see this is the webpack file that you can copy we just want to be as thorough as possible so you get an idea so that was the first uh first type i said that you can run it directly on desktop with the launch config that says like this is the development kindness web so then it runs in a web extension host um secondly uh uh our martin on our team another engineer he created this uh library called uh vs test web it's a node module essentially what it does is it opens up a chromium instance so like a fresh like kind of a bare bones browser and then puts a vs code dev on it as well as your extension on it so you get like a very isolated uh container of like a very like isolated browser that doesn't have all the extra layers of a normal browser like edge or chrome um but you can see your extension and you can see bs code dev together so that's like the second way and then that's a little bit easier because then you're not dealing with like all the other weird nonsense that comes on top of browsers because they have browsers have a lot going on um and then the last option which is the one i'll just quickly show you now um is you can actually side load your extension directly onto vs code.dev to see it in its final like environment and we definitely recommend doing this at the end just to verify it works just because like browsers do have extra stuff going on and so sometimes you just want to make sure it looks right and like in productize environment so that before you publish you're like 100 confident so i'll show you guys how to do this part um because the rest of them kind like you can just follow the instructions they're pretty doable um so for this one really what you need to do is you need to host your extension from your machine for bscode.dev to go fetch and download and then load on to vs code.dev so uh you just can use these two scripts so you can run a server that's hosting your files here and then you can run a tunnel to actually create a url out of it so i'll do that with uh this color highlight extension um okay so i actually already tried it once before this call so i have all the scripts already but firstly i'm running uh npx serve course um on port 5000 so you can run that first cool that looks good and then i'm gonna create a url for it cool and then this is a really important part that i always forget is you need to click on this url and you need to click to continue and that makes it available for everyone horrible gecko that's all right yeah the names are really funny i do enjoy all the names i i wonder where like what repo of like words they're using but it's pretty like that's not fair to geckos but oh before i get goes um yeah so really important though that blue button i've messed up so many times forget to click that blue button and then hey it doesn't work remember to click on the blue button um and then i have my other extension open um that had a style sheet in it with some colors and so let's verify this works so uh you can in any vs dev like web page you can go to the command palette so for me it's command shift p if you use control shift p if you're on windows um and you'll see this command called install web extension hit that you entered the care home gecko or whatever url you were given uh you hit install and then it takes a second and cool and that looks exactly like we expected on web so this extension is good to go and good to publish um so yeah that's kind of the general steps you want to go through um going back to my slideshow to see if i have anything i missed so uh we'll have this up so you can actually see this table if you'd like and uh as part of those efforts that we were talking about earlier where we made a bunch of prs i've linked several of them going from like simpler to more difficult ones so if you'd like to see the changes if that's helpful for you in your time migrating or creating your own extension feel free to look at these so yeah that that's that's all well thank you very much that was quite the deep dive i know chad we went over a lot of stuff in the stream and we're actually gone way long but we're gonna keep going a little i mean we're already way over so we might as well take some questions but i do want to do that with several comments about you know are we going to offer this content you know in tutorial format and i think that that's something for us to consider that was in the chat uh you know breaking these things down that we talked about here and maybe providing some more tutorials on how to do that tana i didn't know if there was you know other than the docs do we have videos or tutorials on how to create web extensions at the moment not the moment no um we just have the the one large stock okay but yeah we can definitely consider that for the future um like soon and like maybe we'll have you back and build one from scratch here um so let's let me run through there's so many uh comments here and i'll uh so by the way alessandro is the person in the background who answers your comments uh chat so if you're wondering who that is in chat that's alessandra did you uh uh diligently answering comments here and and chatting back and forth with you let me see here um what will the pwa get a better icon i don't know what that means we're just i somebody raised an issue on that like a tweet yesterday and so i've i filed an issue on that and there's discussion on that and so we did look that was something that we looked into before launch and so yeah we're investigating that so thanks for raising that's a good one i didn't even realize that somebody's uh somebody's pwas that's awesome okay what about this one my terminal is missing yeah so i guess to expand on that one um if you're not able to like to load the terminal at all that would be different um but maybe if it's like the you just see the continue working on or like just the message that terminals aren't available that is expected since there isn't any backing compute in just this like lightweight version of this code running in the browser um so if you are looking for the full ability to run commands in the terminal and things like that that's where you would want to continue working locally or in another environment like a github code space what about this one i don't know that i initially understand this question but let's look at it anyway so clovis said is there a way to combine extensions installed with the extensions used in the browser do y'all understand like an extension pack or i have no idea um my first extension pack and you can combine extensions in an extension pack and like that might have been answered it looks like okay okay they got it in there let us know if it wasn't we're happy to follow up uh let's see let's see let's see [Music] oh what about this one that's pretty good i think we've answered this before actually in a in a tick-tock video yeah that's a great one yeah i think we do have a tick-tock on that but we do use vs code to develop vs code so you can feel if that's a little bit meta or inception we absolutely use it that is true all right let's see here sorry chat i'm scrolling up there's so there's so many comments um all right what about this this is so this question is about like if you go to the site your code is loaded into the browser storage but what about if you go offline so i noticed that when you were doing when you did the indexing it sort of prop it popped up and was like hey we're going to clone this into your browser storage and what that tells me is that it's cloning it into local storage and then running the index but i think that that if you go offline with your code loaded in does it still work so you could still work on it offline but like if you tried you couldn't be able to commit a change for instance and so if you were trying to work on like a github or an azure repo or something like that um it could maybe get a little bit tricky in that sense like if you're trying to commit like a github repo change um that's where like offline um you would see a difference in support but when you're working on a github repo and you save a change does it save doesn't it save directly to github or does it save to an intermediate like what happens if you're in that intermediary state where you're on a github repo you make a change but you're offline i i don't think it like quote saves because it's like the the files are cloned into this like one instance of your browser and like saving it would really be committing um unless you're working off of local files on your machine and when you hit save on vsco. it would save the actual local file that would still work but it wouldn't work for connected to repos no i would i believe you have to commit to actually like quote unquote save it um yeah that's what i think too and that makes sense uh let's see so here's one um i would love to work on a real-time collab extension for this i don't know what this is same vs dev but i think live share does work today right we we talked about it doesn't work today yeah um and definitely let us know how the experience is the live share team is eager for feedback as well here's one that doesn't have anything to do with vs code.dev but it's i think we should answer it anyway why is vs code very fond of my ram [Laughter] i like the use of very fond i know goodness nicely answered nicely asked question what's the answer there i think we need to learn more about what are you doing that is make that is like causing this so if you can give us some more information about what you're seeing let us know and we're happy to investigate further uh let's see daniel was asking how do i get luna paint to work it should just work right yeah you should just be able to install luna paint you can look it up in the extension marketplace yeah go ahead and give it a shot brooke all right let me see if there's anywhere missing alessandra's trying to chat me here okay cool cool uh let's see did you click install oh i haven't clicked yet very significant evolution of vs code thanks to the great minds who made it was my idea uh totally not my idea at all burke takes complete credit yeah it was uh that's the vs code team is um and watch the video from eric gamma from vs code day it's really eye-opening the way that they've thought about this and the way that it's been built one of the questions that we got on tick tock early on is why is vs code so fast as an electron app when electron apps are not notorious for being fast like that's not what they're known for and the answer that was given by johannes ricken on the team is that it's because vs code was originally built as a website uh it was a it's an editor in the browser and because they had always targeted the web it was very fast in electron but that also makes it much easier to go to the web as the editor you know as the end goal there so i'd watch that it's a very interesting talk from eric and he says it's a lot better than i just did okay um let's see looking i'm looking any other comments i should answer here there's so many i'm sorry for all the folks we missed but i want to thank everyone for being with us today i can't i don't know how to remove this comment we're just stuck it's a great way to end it though i mean i think it's a good good one oh there we go thank you alessandra bailing me out check out the official blog post on this because a lot of the details are in there uh thank you for your comments about breaking this out into smaller pieces because i know we did go over a lot thank you for being with us today use vs code.dev uh build web extensions send us your feedback uh issues go to the vs code repos so github.com microsoft slash vs code uh you can go there if you've got uh issues that you'd like to open or prs that you'd like to make as always we welcome you thank you tana thank you bridget for being with us today we'll see all of you folks next week thanks everyone thanks you

Channel: Visual Studio Code

Views: 30,682

Keywords: vscode, visual studio code, vs code, announcement

Id: sy3TUb_iVJM

Length: 60min 1sec (3601 seconds)

Published: Thu Oct 21 2021