🎉 Release Party v1.85 | Floating editor windows, JS debugger, and Copilot Updates

[Music] w [Music] hello hello everyone welcome to another release party and coder nerd you're correct it's the last release party of the year it's officially that time of the year we'll be going on our holiday break the next couple weeks so we won't be doing live streams um and we had the last release for vs code this year um I'm super excited I love the holiday times I'm I've got my little holiday sweater little rudol you can't fully see it but that's okay I am wearing it I got my holiday decorations holiday spirit very excited to be here with you all and very excited to have some of the engineers on today to talk about what they worked on um I see we already have a lot of hype in the chat um hello IDK how to game code earner floating editor Windows is true holiday magic I could not agree more I'm very excited for Ben to show that off today um I see we have a lot more happy Holidays happy holidays to everyone to you and yours um I see there's already a lot of love for the various features we'll be showing today um lots of hellos hello everyone hello Ahmad drop where you're watching from in the chat I always love to see that and just see like truly how Global our audience is um I think today's going to be a really fun one uh we have a couple of great guests today really awesome features um and like I said this is the last release party of the year so it's always a fun one then that we can kind of go out on this note um just kind of on that topic December is the housekeeping month for the vs code team um so that's kind of when the team goes through and um goes through some of the issues the backlog kind of make sure that you know closes out some things get that's gets that all set up um so New Year they can start fresh really hit the ground running um so because of that there is not a release in December um so we will not have a release party in January but we will be back in February with the release party for the January release so just a little heads up there um okay so I see hey Doug how you doing always love seeing you here um okay so I see we have people coming from everywhere I always love seeing that um in case you are new to these release parties the whole point of them is basically to have the VSCO team members come on and demo their work that they did in the most recent release so it's a really great chance to hear from the engineers themselves and ask them questions um so definitely make sure I see we're already going on in the chat keep that energy going throughout this so that you can ask everyone your questions um and as is tradition we also always start off these release parties which with a thank you to our contributors all right so this is the section at the bottom of every single release notes we always have a thank you section because PS code is open source um and we really couldn't do this without you all so I just take a second to kind of scroll through these um to thank all the different contributors we have as always the list is pretty long so I can't just kind of call everyone out one by one so we'll be sitting here for a while so I just do a quick scroll through um if you're watching and your names on this thank you so much for contributing um if you're watching and you want your name to be on this list we have a great contributing guide um in the vs code repo so that you can start contributing to our open source project all right well without further Ado let's go ahead and get into the meat of the show and kick it off with our first guest Ben hi everyone hey Ben welcome back yeah was was a busy month um from the last release party to now um so excited to share um what we've been already shipping actually an insiders so people were able to try it out but now we've release floating editor windows in stable vs code which is actually nice to do it before holiday break so actually people can can use this until we release our next version so that was very cool um so I can I can give it tour and then talk about a little bit of the technical implementation details also yeah let's do it I know people have already been very excited exed about this in the chat um and just in general like on Twitter and everything we've got a lot of excitement about this feature to be to be fair this the feature request was filed 2016 I think that is like maybe one year in after our first release on GitHub it's our most aved issue um and yeah it's been seven years um sorry it took us so long but we really wanted to get it right um so the I'm here on a on a on a sample workspace that I've been working on actually and um the easiest way to get into this multi- window thing is that you literally just like take an editor Tab and drag it out and then if you drop it on some empty space on your desktop or anywhere um outside of the window you essentially get like a second window um and um that's one way of doing it we we also have like a context menu um on the editor tab so where you can also assign key bindings if you don't want to use the mouse for moving or copying the editor into into a new window um and what's interesting is so so if I if I actually select the the copy one um so first of all you see there's no limit in how many windows I can open so literally as many as the operating system is is able to show you um and your screen um but what's interesting is like for example with this copy thing um the these two editors here are literally the same right so um let me just like close this Side bar so if I have them both side by side and I I don't know I I addit you will actually notice that all all of the windows will update immediately so um implementation wise what this means is that these um floating editor windows are actually pretty much living in the same um process space as the main window so they are very lightweight they don't consume a lot of um memory or or or like process um time um think about them literally like another editor group that you can just freely arrange right so um they they are really behaving in the same way as the editor as the editor area that you're used to so for example um you can split editors uh you see tabs here um you get all the editor actions um so it's it's like a natural extension of what we actually already had just now on this on this floating window um um what's also interesting is that um if you want to actually see what's going on so we have this open editors view here um which I think is not enabled per default but I have I have enabled it now just to make it a little bit more obvious how this behaves you will see that these these windows are actually um editor groups here so you can get a nice overview you can click through all the editors from here um and you can manage the editors here actually as if they were all in the same window so in that regard these floating windows are not so special one thing which we have decided on for the first version is to um only allow editors in here so you will already notice that there is no Explorer on these windows there's also no panel um so for example if you go um and bring up the panel area um they are not available in these floating windows so in our first iteration um we really focused on on on editors um and that regard these windows are super lightweight right so they have the title and the status bar and the editor but but nothing else um nevertheless um something which is maybe less known some of the things which are uh currently in the panel can also be made editors right so if you actually want to have a terminal outside in a separate window um and maybe I should let leave this a little bit open so there is a command to create a new terminal let me just make this window larger that you can see there's a command to create a new terminal in the editor area and um that's not a new feature we always had it but what this allows you to do is you can actually now drag like a terminal out and you're getting pretty far right so you could argue okay this is this is like a panel um outside the normal window so even though it's an editor it behaves exactly like the terminal would it's it's like it's a fully fledged integrated terminal awesome so we had John M actually asked does floating window have its own terminal so it sounds like you know not by default when you just pop an editor out but you can basically make the terminal an editor that you can then pop and I'm I'm thinking about like um it would be easily possible to say if you have a terminal here why can you not drag it out right so actually turns out you can drag it out but we haven't really yeah we haven't really integrated it everywhere so you one thing that we now realize with this floating editor window feature is we can actually surface this in a lot more areas right so for example in the terminal you have it we also have something called the search editor so let me demo that um so every time you run a search you actually able to get the search results into an editor and then yeah I mean you can just drag it out so you you get like a search uh view in a way which looks a little bit different than the search view but it is um capable of full text search you get that in a floating window as well right and so you can already um think about us looking at other things like debug console which there's no reason why this couldn't be in a floating window right so we will progressively make more things available um so that we ensure that this feature is really um being used in in in more context that's awesome there's so much love in the chat people Ivan says I've got this monor repo popping out these other readings Windows has been amazing um that's exactly what I was looking for it's simply amazing um pesh asked um is the floating window autosaved when you make your edits yeah so it's uh there's um there's really no behavioral difference between having an editor opened in a floating window um versus the main window so um like maybe I should actually make an example right so um you will actually know notice that um when I when I type here so you see the dirty indicator um when you close um oh that shouldn't have happened okay that looks like oh it was open on another window yeah let me just close the last editor so when you close the last editor you get a dialogue um asking to save and then you can save and it will actually work um so like think about these floating windows literally um as if you had like a grid um like you you are used to right so this is a grid of two editors but now expanded to more windows so all of these groups are equal in that they can hold editors and that they can save and um so dirty indication um this reminds me one thing I should shout out is that not all editors can open in floating windows yet um we have one technical challenge with notebooks specifically and custom editors so for example the markdown preview that shows you like a um an HTML preview of your markdown document these editors um use a technology which is not yet able to move out to another window but it's definitely high up like high on our backlog so we we already started looking into that because we want every Editor to be able to open um in the floating window um and another feature while I'm on the Outlook what's happening next that we still need to do is like when you close vs code uh and you open it again floating windows are currently just basically not restoring so obviously we want all your state to restore because if you have like multi monitor setup that is laid out in a certain way of course we don't want to lose that um we just didn't have the time to finish that but it's I've seen a lot of people asking for it also in issues and it's um it's it's coming um definitely yeah that's awesome and you know I think that's one of the really cool parts of having you all on these release parties is kind of getting to hear okay yeah this is what we're working on we hear you um and people get to see that process of what it's like like to actually you know prior prioritize these features see what's in the road map um there's a couple other quick questions um Alvin asks um can you set a floating window to always be on top um when you automatically pop it out it's a it's a good question because I just got like a feature request for this um So currently that's not an option um it's just not exposed technically certainly possible um so this is like a good reminder if there if you encounter anything while testing these floating with windows in your day-to-day work that you would like to see um working like this one go to our repository and file an issue chances are high that you're are actually ending up with me commenting on the issue um and um then we can take it from there so make sure to to file issues um you might get closed as a duplicate we already have quite some issues so um um it might be that I just close you as a duplicate of another issue but then make sure to upload it because um then you can send out a clear message that you you want this kind of feature so it's yeah long story short it's currently not possible but there's no reason why it wouldn't wouldn't work yeah awesome um and then one question also from Doug um so you were kind of showing where you can have the same editor open side by side um and edit it and they both update um he's wondering like what is a scenario where you actually would want to do that um I think like first of all we have always allowed to open the same editor um multiple times in multiple editor groups and um what I really enjoy is when I have a large um file um where I for example here where I have to scroll um so um let me just also open this file here um so let me just like um make it so for example here maybe I'm looking at the lower part here for some implementation and then on the upper part here um so with this actually you can you can think about a side by-side view of the same file in um different parts and um or even if you want to look at some reference down here there might be some behavior and up here is like a property you want to look at so I often end up looking at the same file just on different viewports I don't think that I would actually look at the same lines um left and right that doesn't make make a lot of sense in my day-to-day work but like um with like more lines than the view C can show I definitely see myself like having this kind of setup where I just look at different parts of the same file yeah so that that would be like a like a like a use case yeah thank you um I know you have one other thing that you want to show so um there's one okay David asked um just real quick before that can you unflat these windows back to the main tabs yeah so this is a good uh um good reminder so let me just prepare something here um the default behavior when you close a floating window will actually be that the editor moves back into the main window um so for example I just did this but if I do it again the document TX is file is open I close it and then it moves back um so basically closing a window means all of the editors will move back to the main window um but if you close like a single editor so if I go back to floating window if you close this editor here the window will actually close but then the editor doesn't move back um and this is currently standard Behavior it's not configurable I've heard people that would like to be able to configure this um but yeah this is the stand up Behavior there's also a command um that we offer to say bring all windows back um to the main window so you can actually have also a key binding for that oh awesome okay cool coder nerd said they thought of everything like one one thing um so have two more things I will wrap up then um you might have seen this lock IC in here and I'm just want to point that out um because this is actually not a new feature but something we always had um so in floating windows we show this a little bit more prominently um and what it means is uh that this group is now locked for um refusing to open more editors so what this means is that if now you go and open another editor we will will actually not open it in this group but we will open it in in in another group and the idea behind this is like think about you might have a terminal open and there's a process running that constantly spits out output um at no time you want that terminal to be replaced by an editor so this is what what group loock blocking is for so when you see this icon um try it out it has been there for a long time but now it's a little bit more exposed because of floating windows because we felt this is actually quite useful for for floating windows um and in the future for example when we support custom editors think about a browser preview so think about an editor that shows you the result of your website you always want to see that you never want that to be replaced with something else and then yeah blocking is is is really the way to go um so that's that and then jumping to the last part of my demo um because I just showed vs code on the desktop but we also have vs code in the web um and if you are on a GitHub repository and you just press dot um I think by now a lot of people probably already know this but this is really cool it will actually open the repository inside vs code in your browser um looking pretty much the same as I was just showing this is also actually the same repository and what I want to demo is that the feature works in the web as well so there's um the same support for multi- window Works in our web version of vs code and code spaces and GitHub Dev and V code Dev um feature par really the same in web as it does on desktop and that's really thanks to the apis we are using they are all browser apis so we are really um building on top a very cool framework here that makes us uh do this in web and electron or desktop so yeah that's awesome wrapping up my my demo with this highlight I love that you also like got the when you go to the repo and hit the dot key because people who know it like that's great but then people who don't know it are always like what I I didn't know you could do that so so cool that and open it I love showing people that um yeah I I love just like all like you were saying right like this is from 2016 but y'all really wanted to make sure that we got it right when we put it out there um you know there's been a ton of comments being like yeah you did like you got it right um so I love just kind of seeing all the intentionality that went into designing this um and then you know as you just shown that it also isn't be as good for the web to kind of show okay where however you're using vs code it's there um so I love that Cod or nerd said it works on the web version as well mind blown um Eric asked um one question does command shift T reopen the Clos Tab in a floating window yeah cool I mean um if you're asking for whether that reopens the floating window unfortunately you have to say no um so that's a very good feature request make sure to file it um but if it's an editor if you're on a floating window and you close that editor and you reopen it then yes that works so I think follow up with me in on GitHub if it doesn't work the way you expect it awesome cool and just um you know to uh remind everyone that would be on just the regular vs code repo right to file that issue okay awesome cool all right Ben well this was awesome everyone loves this feature I think everyone's so excited too to even see it get even better um do you have any final thoughts to add um or just things you want to talk about no that was all thanks for all right thanks so much ben I'm sure we'll have you on in the future again looking forward to it thanks all right so that's going to bring us to our next demo with Rob hello Rob how you doing doing good how you doing good always good having you on these um and I see you also have dressed for the occasion yes I love this I don't get to wear it that many times a year you know so I gotta take advantage of the opportunity yeah I know I feel like I like literally don't look at my holiday sweater like literally all year in the December it's like you know what I'm kind of cold every single day let's just put it on exactly people look at me weird when I try to wear it in July I don't really you know what month it is yeah cool all right well as always we're very excited to have you on um what will you be showing us today yeah so I'm I'm here to talk about um ments in co-pilot chat again awesome I love that um I know we actually had a couple of like random questions about co-pilot in the chat throughout this so um yeah if y'all have any co-pilot questions now is definitely the time to ask um and Rob will show off the latest improvements yeah so I'm going to start with talking about our inline chat experience and so if you haven't seen this before um just a quick recap um I can be in an editor and I can hit the keybinding on Mac this is command I and it brings up this widget where I can talk with co-pilot chat and I can ask it you know this is the experience I want to use when I want to generate code from scratch or I want to edit code or things like that so A really basic example I can [Music] say one to 10 all right so I write some prompt and then I get to watch it like you know type that code into my editor for me and it can also edit code and things like that so um so so um the first thing I'm going to talk about um we can do quite a lot with this um and so one thing we can do is that I can have an error in my code and see if I can get everything on screen at the same time here um I can I have um this function that I'm calling with a user object and the interface looks like this but I'm getting an error here and so um you know sometimes these typescript areas are a little bit hard to read but now I can have I can have co-pilot um look at this for me um if I hover this and I can say quick fix I can either have co-pilot try to fix it for I me generate code or just explain what the problem is and so let's say I want to fix it so I'm going to click this um and we're basically just giving the whole error message to co-pilot and along with some context about the the code um and it's going to try to figure out what to do about it um and so you can see um it it made some changes for me and the things that I want to call it here that are new so we have this SL fixed uh SL fix command um this we've had before but what's new this month is that now in addition to writing the code and making the red Googles go away it has also just given me a little explanation in line of of what the problem was and then what it actually changed right and so now this this helps me a little bit because instead of just knowing okay there were some changes and the air went away and that's good you know I can hopefully learn a little bit too and see that okay the problem was that this object did not actually match this interface um and so it renamed these properties for me um and you can see even it renamed the properties it also added the interface like type annotation to this variable which you know is is probably just best practice for writing codes like this that's awesome and you know I feel like co-pilot is great for like literally any level of programming that you're at so like if you're an experienced developer it's really can really help your uh productivity but this is also a great example of if you're just getting started and you maybe don't fully understand typescript for example um you're kind of trying to figure out okay why did this not work I love that we now have kind of that sentence like okay yeah this is the problem we can fix it by this so you kind of like get that understanding of okay this is what's happening this is how i' fix it and so you kind of know then next time what to look for exactly exactly yeah I really like it cool um I I know you're kind of showing like this fix with the red squiggly underline are there and with typescript does fix work with other types of problems too yeah so there's there's something really interesting um and you know it's since co-pilot sort of has the ability to really kind of read your code and understand it on a deeper level sometimes um I found that if I can I can throw SL fix at other problems that weren't even picked up by typescript and um and co-pilot might be able to tell me um you know sort of what I did wrong and so let's say I have some code like this um so I'm calling create user you know it takes two strings and an age and then it returns something which is an i user and you know so I wrote this code and maybe you already notice what the problem is it's kind of straightforward but you know if I if I ran this code and and something wasn't working um I can actually you know look at this and say SL fix and see if if co- pilot chat can help me out yeah I love using it for this where it's kind of like you're getting the output from your thing and you're maybe not getting what was expected and you're kind of like because I don't know if other people are like this but like when you like literally like are looking at your code over and over again it can be so hard to just like look at something and be like what the heck is the problem here and like I feel like this is a great example you can see co- pallet came back with this um I'll let you take over yeah no we noticed I mean this is tough a tough thing with typescript right I'm taking a couple strings but they're different types of strings but you know types or co-pilot chat was able to see okay this is the name this is the email address you put them in the wrong order um and you know even though typescript can't tell the difference between two strings co-pilot chat can sort of understand the meaning um and so that's that's something cool you can do too yeah I always like that because I mean we kind of position pal as your AI pair programmer so like when you think of you know a traditional pair programmer if you just like had someone else in the room with you they'd probably be able to see that really quickly because they haven't been staring at this coat all day um so it's kind of like having that built in there so I love that exactly yeah it's nice to have someone watching over your shoulder can yeah cool I love I wanted to call out a couple other things uh that we've changed with the inline chat and let me just go back a couple steps and I'll bring back the what we were looking at a second ago while this is kind of thinking someone actually has a question about um code insiders and if it's recommended to download to basically use um insiders version um yeah so our our vs code insiders version the the green icon it's updated every single day with the latest changes from what we're checking in um and then the blue icon the stable version of es code that's updated once a month if you want to see like the absolute latest and greatest changes and um you know get a kind of sneak preview what's what what we're working on this month then I definitely recommend checking out the in the Insiders version um can be a lot of fun and it also if you use it it helps us test and um if you find issues you can tell us about it and you know we find that really really helpful um the blue icon you know sometimes is going to be more stable because we do a whole lot of work to make sure it's in very very very good shape before it goes out the door um and um but yeah it kind of depends on what your priorities are I guess I I always say I'd love it when people use the Insiders version so that's what I would vote for yeah I agree cool sorry didn't mean to srack no it's all right yeah uh so I also wanted to call out so if you have been year before or if you've been using co-pilot chat you might realize that this looks a little bit different than it used to um and so what I'm showing here also is a sort of experimental new option we have for the inline chat widget um called live three mode and I've set this in my setting inline chat. mode live3 um this is in our release NES too if you want to check that later um but instead of showing you the kind of inline diff that you might remember previously we were showing a split view with the previous code on the left and the new code on the right um now we are sort of simplifying it and and making it a little more lightweight and so you just see the new code kind of directly in your editor if you do want to diff you can bring it back actually by clicking this button and then we're going to show you you know so here's what was there previously and here's what was there now um this is still kind of a diff you and you can see hopefully you can see in this theme that we've we've highlighted like the parts of the line that actually changed right so you can see the property name changed but the values didn't change um so you still kind of get that like extra prompt of you know here's part of the line that changed and you know hopefully that combined with the explanation um helps to but I personally I just find this um nice and a little more a little more readable a little more streamlined is that so I know you showed um the setting to get that enabled and again that's also going to be in our release notes um is this something that might end up being the default view in the future or will it kind of stay as a setting that's configurable um I think we're evaluating it and we might head toward this being the default not sure okay cool well yeah try it out let us know what youall think um if you have a preference for the previous View or this new one that you can configure in the settings yeah and um something else I'd like to call out is that we also have um input history working um in the inline chat widget and it also works across sessions so if I so I can I can use the arrow keys and go up and down and see you know the the previous fand that I typed in and get them back e easier um and if I reload the window that's going to stick around um and so here I'm just using the the up and down eror keys and if I want to move the kit cursor out of the inline widget and back into the editor then I can use command up and down for that so here I'm I'm holding command and doing command up and down so I can kind of get back to the editor really easily and get back into my chat widget and and all that oh nice man I read I read the release notes I do all this and I still like miss out on these things this is so cool to see yeah all right that's awesome we already have a lot of people are saying um that these features are awesome really good stuff um I don't know if you're going to address this later in your demo or if you want to now but um we did have a quick question just about co-pilot chat um and the context that it understands um and Jay rafhael says when will chat understand the context of all project files um so if you just want either now or later in the demo address that that would be great yeah I don't have anything coming up that specifically gets to that so let me just do a really quick demo of um some of the stuff we've been working on for um asking questions about that bringing context from your workspace and um I let's see um um yeah so what I'll do briefly is just I'm going to open the vs code workspace just because this is a you know it's a complicated workspace with a whole lot of files and this is what I you know kind of work in every day and you know let's say I have a scenario where I'm like a new developer or maybe I'm a open source contributor who wants to contribute to vs code um I open this folder and there's a whole lot of files here I'm not really sure where I want to get started um but I can go to the chat panel and I can say at workspace and I can ask a question like um where is the code for the floating editor window and what we're going to do is we're going to search your workspace and try to find files that seem like they might be relevant to this query and we're able to do a search using um sort of synonyms and related phrases to these words and we're going to look for all these pieces of context and we're going to sort of summarize them and chew them up and um include them as context with the prompt that we send up to the the co-pilot chat llm um and that's what it's doing right now it sometimes takes a minute depending on how large your workspace is or or what the prompt was does it um kind of cach that workspace info though once you've done one workspace question so like this is kind kind of your first time being at workspace asking a question if you do at workspace then another question next will it be a little quicker because it uh not not necessarily because we still sort of have to you know for a different query we still kind of have to to start fresh and we're not like um building a local index because we don't want to use a bunch of memory or dis space or something like that um some uh some repositories like if you have a GitHub repository open some repositories might be indexed by GitHub and in that case then we might be able to um call out to a GitHub service and do a search that way which will be a little bit faster um but um for other workspaces we'll just be searching um and I mean realistically that I mean the vs code project if y'all haven't ever looked at it is a big project so I mean realistically this took what under a minute still to go through this um and Par it yeah I wasn't you know I don't know if this found exactly what I was looking for I wasn't sure whether it would whether I'm using a good term here or or you know um or whether would find the thing that then was just demoing um what I found is is code related to opening editors and managing editor groups and the thing is about at workspace even when it doesn't find exactly what I'm looking for it typically still gives me like a really good starting point right and so um if I I start with you know code in in this directory um and these files and I can these are links I can click these files and and open um and you know this is a great place to start looking for for the code I'm looking for and I can see how editor groups are managed and from there I can probably figure out you know there's probably a plag in here that that tells us to open a new window or something like that right that's awesome cool thank yeah thank you so much for kind of taking the time to answer that um I know it wasn't in your set demo but um questions about context is always a very relevant one and the atw work space is relatively new so I think it's always good anytime we can exactly yeah I I thanks for giving me an excuse to talk about it honestly I are really interested in so yeah great question rapael so I also wanted to talk about some improvements we made to working with the terminal uh with go chat and um what I can do so you just saw the the workspace we call as a chat agent which is like an expert that knows about something that I can talk to in chat uh we also have an at Terminal um chat agent and so I can open the the terminal now and we have a key binding to bring this up really quickly I'm going to hit command I just in the terminal and um so now we've we've made it around to our third co-prod chat surface which is quick chat which is just um a really nice thing for kind of quick questions where I want to pull up this this picker and and look at this and um um you know then it's going to go away and take up a little less space than some the other things um but at Terminal I can asking questions about how to do things in the terminal um and it's able to um give me suggest terminal commands that are kind of specific to my OS and my shell um it's also now as of this month it's able to use workspace context and so doing something similar to what I just showed you where it searches files and tries to find things that are relevant so I can ask it a question um like this final files that deal with a user object like like this thing I was just looking at um and it's going to try to write a command to um to figure this out for me so you can see it's it's going through my workspace files it's collecting workspace info and um so it gives me this grip command that I can run in the terminal and the interesting thing here here is you know I just said user object and since it is using my workspace context it's able to figure out oh he's talking about the I user interface and so we're gonna look for files that have i user in them that's awesome so you don't just get kind of like generic like if I just like went to Google or something and was like find a user like they wouldn't obviously know like okay what does that mean in the context of your thing that's awesome exactly exactly um I can click this button and just insert it into my terminal um you should always proof freed commands terminal commands that the that the robot writes for you but um then you can just um hit enter and it's going to list those files out for me which is exactly what I was looking for awesome yeah I think that's a great plug to yeah always always just double check what you're about to run in the terminal co-pilot you're still in charge sorry go I I can also ask things that are more generic so I can say you know how to list get commits and you know I get commands that I never quite remember um and that time it didn't use any workspace context um it just said okay this seems like a generic question so it gives me get log which is also what I was looking for and I can do this that's cool so it can kind of register like when okay this is a general question like I don't need to go through and like read through the file base and everything that's awesome exactly um so you're kind of showing this for getting suggestions about commands to run is there anything that that at Terminal agent can do other than that yeah so we have a few other things that light up in the terminal um and one thing I can do is if I um use a command incorrectly um like let's say someone told me that I can use npm Run start to run my project and so I'm trying to run that in this workspace I run that and I get this big confusing error um and I'm not really sure what the problem is but we noticed that this command failed um and so we show this little Sparkle button here um I can click this I get another quick fix it says explain these co- pilot um and so at Terminal can also try to explain what happened here oh nice and it's saying ah it happens because there was no package.json in this folder we need this in order to have an npm project and then it tells me I can run npm in it and and what I need to do to get myself out of this um and so that's a much much more helpful answer than you know this mon yeah and and you know I think that this just goes to show like how you can literally like basically never leave your editor when you have these questions cuz historically what you would do or at least what I would do is I'd then copy that error and then go into my internet search and then be like what does this mean and then like read through stack of flow to figure out what to do and then now it's like you can do all that here with the context of your code so you're probably going to get an answer way quicker than that more traditional route that's awesome um there is um one question that pesh asked um so they're currently using co-pilot chat and then also the GitHub co-pilot CLI um are those just separate tools right now that don't kind of integrate and mingle yeah the these are independent okay so our um our co-pilot chat integration in vs code can sort of be used you know regardless of whether you're using that CLI and um it sort of does it something cool okay good to know because I know we kind of get those questions um relatively frequently so yeah just kind of separate tools each have their own use cases cool all right and David said that he loves the Sparkles um and yeah was cutting and pasting error messages before so now it's just click fix this for or tell me how to fix this exactly that's awesome yeah okay else to show yeah yeah one more thing I want to show um or two if we have time whatever um yep so so something that we're working on is you know when like I just was saying when co-pilot generates some code it's a good idea to proofread it and we're trying to be a little more proactive about finding possible issues with that code um and then warning them you know for you and um uh so let me give an example and so this is kind of an experimental feature um you won't see this lighting up yet it's going to be we're going to be sort of gradually enabling it for more and more users and um you all may see this start to show up at some point in the next month um but essentially we're we're trying to detect possible vulnerabilities uh in code that's generated in the sidebar chat um and then oh no the demo Gods finally showed [Laughter] up okay there we go what is going on let me uh let me try one time let me close this make sure it's a little okay there we go so what we're trying to do is when you get a suggestion um with a code Block in cop chat in the sidebar then we are running this through a model that's able to detect possible vulnerabilities in the code that's generated and then we're going to flag those vulnerabilities for you so here I asked it okay show me how to ATT a password with md5 this is a bad idea this is not an algorithm that is secure enough to use use to protect passwords um and it told you that it said That's you probably shouldn't be doing that it can be brute forced but um it wrote the code anyway so you can you know maybe one example of of insecure code who knows but just to make sure that you understand this is a bad idea we are also um flagging this vulnerability at the bottom of the code block and saying hey that's a bad algorithm you shouldn't be using that that's good so you kind of have like a couple of like okay in the actual text it's like yeah probably shouldn't do this and then you also have kind of more that like flag that surfaces it's like yeah here's the specific vulnerability that we probably shouldn't be doing exactly that's awesome cool I feel like it's good too to kind of like you know have that extra okay I should probably think about what I'm doing like yes co-pilot can generate a lot but like should you so that's always good to kind of Be Remembered exactly awesome yeah and there's a there's a whole bunch of different types of vulnerabilities that we're detecting um we'll be able to detect them across you know different programming languages um and and yeah so hopefully that that helps cool um and then I know you had like one optional thing you can't want do we have a couple of like General co-pilot questions so I'll let you decide we probably about like five more minutes in your demo so would you rather have the general questions or show off your last feature uh the last feature is pretty quick and so don't I do both then yeah and and then we'll we can I can take questions if I have time for it awesome um so just one more thing to show um so you know the past we've shown that we this that um copy chat can explain code and you know I can I can select some code I can right click it I can go to co-pilot and explain or I can use SL explain in either the sideb by chat or or the inline chat um and then last month I showed that we were able to sort of use some of the language smarts from vs code to give co-pilot more context about the code it's explaining right so it can look at not just the code but like um definitions of those functions and it can do that for JavaScript um and so now we we've made the same improvements for rust code and so I I grabbed some random rust code from the vs code repo um I'm not really a r person um but you know fortunately co-pilot chat is there to explain it to me um so I asked to to explain this code and so like I said it's it's looking up extra context using um the the language smarts from vs code um and so I can see you know if I oops can't get it while it's scrolling but um anyway it's given me an explanation that again is is not just based on like a surface level reading of this code but is actually based on the definitions of of these functions um in machine. RS and so you can see it's actually saying specific things about those functions too yeah this section I can see that yes it did it did look into these other files and it got that extra context that's awesome so um you know you mentioned that like this is for R is it are there other languages that y'all are looking to kind of add to this like how does that work yeah so so this is lit up at least for typescript JavaScript for rest I off the top of my head I guess I'm not sure whether it is also lit up for python um and every languages too I know we're doing a lot of work there so if it's not there it will probably be soon okay cool good to know awesome well these are so many great features um we have a couple of kind of like General co-pilot questions um one saying can the prompt be adjusted to direct context based queries to use specific file lines um so for example Force code pallet to retrieve the entire contents of certain files instead of just letting it kind of Auto search for which lines to pick yeah yeah we do have this it's not in vs code stable yet you can try it out um in insiders but there's just it still needs a little more polishing um I'd really like to get it excuse me to get it out in January but what you can do is you can come in here and I'm going to hit hatch and pick file um and then here I can pick any file in my workspace and then it's going to include this file as context or if the file is really big we might try to summarize it or or chunk it in some way um but then I can ask questions about this file and say um what's it do and andil chat will be able to see that file and answer oh that's awesome another great plug for using insiders um I think someone actually asked earlier you know what when we were talking about insiders what is insiders um I think someone posted the link to it um but it's as Rob was saying the green icon of vs code so just another installation where you can kind of get um the newest features there oh yeah thanks Peggy for putting that up so yeah if you're interested in doing head to that link you can go ahead and download it um it's still vs code but it's just the Insiders version so you'll get those fresher releases cool all right and then um I know we're kind of running out of time so let's take one more question I think um I know there are a lot of questions so thank you all for doing this I wish we can get to them all um s asks what can work offline with GitHub co-pilot uh unfortunately nothing's gonna work offline it needs to be connected to the GitHub co-pilot service um and yeah without that it's it's not going to be able to do anything cool great to know all right Rob this was as always amazing I'm always like literally every single release I'm like how is there so much cool new stuff for co-pilot chat um so thank you as always for coming on here is there anything else you want to touch on before we head to our final demo oh I don't think so just um try everything out and file issues if you find them feat requests and let us know how it goes awesome thanks so much Rob happy holidays thanks for joining yeah thanks Olivia all right that's goingon to bring us to our final guest Connor hello Conor hello how you doing I'm doing all right we got a little holiday sweater action coming from you too it seems like oh yeah well I was told that it was mandatory so I mean I mean yeah you can't join unless you do it we would just take you off yeah cool all right well thank you so much for being on here I know we've had you on a few times um you know even just in the last few months basically um so it's always a pleasure have you on here um what will you be showing us today yeah um so I'm going to be showing you some uh improvements that we've made to our uh um get performance uh tooling nvs code for JavaScript um so um I have here if you're got SE there we go um a little like web app so what this web app does it it's an Express app so it's a uh like y old uh nodejs server that has has a path so it lets me ask for color and then it just basically like returns image an image with that color so I can go ahead and done with that real quick um it's pretty simple oops need run my server there we go listening there uh if I go to path if I go to uh like red uh green blue so this would guess this gives like a nice red image if I put in a different parameter here if I ask for like a if ask for um like maximum green then red plus green is yellow okay you're testing my like back to elementary school learning combination here yep yep um yeah and so this is cool so um what I've done here is that this um this I have this like logic that like makes the image and then I have um this uh cachier so if I see someone already asked I'll asked for that image before then I can send the existing one and I have some logic here to make sure that that um I don't use to much memory um I only cach like the last 10 images uh that I see um but I noticed that this isn't really working so um I actually have a like memory endpoint that I made as well here so uh currently this is using let's said about 50 megabytes of memory which is about normal for like a nodejs application but if I make a lot make a lot of requests so I have a script for that all make lots of requests um very aply named I love it yes then I see that this actually gets like pretty big so this is actually now about 200 megabytes yeah which it shouldn't be there because I'm only caching the last 10 images and they and they aren't that big so I want to see what's going on here um so what I'm going to do is I'm going to actually relaunch the sap inside of a debug terminal um so I can use the create uhpt there we go uh the jbug command and with this does um something that we have for a while is that it's a terminal that that any like japt code that I run here will be will be debugged um so I go ahead and do that and I'm going to do my script again to actually make lots of requests um and then I can like with this I can use our new our new like tooling to actually see uh where memory is being used so there there's few ways to actually get to that uh one thing you can do is you can go to you can go to the Tech View and then if you hover over if you hover over a process here you'll get a a a a record button that'll let you um take a performance profile of that process that's not working right now maybe it's something that we messed up on insiders but you can also just run the command debug take take performance profile then you got then you got a few options that you can take um so you can like look at a CPU you can look at how memor is being allocated or you can take a snapshot of the full um like heap of of your of a program which is what I'm going to do here okay so that's just like in like snapshot here I I just I choose it and then it and then it saves the snapshot file inside of my working inside my workpace folder here then I can open this and then look at uh this view so this is kind of the initial table view so um essentially what you see here is that we group um um all objects um in memory by their uh class name um and then we record uh like how much memory like that specific thing is is used and then also how much memory that that that causes to be retained um so the way to think about the retain size is that um it is the the the the amount of memory that if this object was like removed from our program uh like how much memory would then be freed um okay so it's the amount of memory that that object kind of like uniquely contains okay and okay in these cases like all of these things are actually like all all the retainers of um this like JS R buffer data here um so if you expand that you can see like each each individual object um like in memory from R buffer so we have more than uh more than 10 of them obviously um and you can also uh click this little graph button and then see the retainers of this object um in a kind of visual graph so here we see this is being get retained with like internal reference from an R buffer which is an which is in a un a array which is in a which is a property of an object which is inside um an array which is the like element which is a element um in an array uh because this graph can be pretty big we don't show the full list of retainers because eventually get into all the internals but you can also you can also change this so I can say if I want like six levels of retainers that and you see this is kind of getting into um the the system context which here this is just kind of meaning it's it's a global or or it's the like variables that are like in scope in that script so that's just saying that this is a variable that's that's at the top level of the script um yeah and you can see it it's also it's also referenced by um by by my pre image image with color function uh but anyway so that's awesome you can kind of configure like how many levels it's showing there so if you're like oh I don't feel like I'm getting enough you can just change that retainer level right yeah and like especially with like node actually in this case we have a aett a pretty contain graph but if you look at some like other things it's very easy to get a graph that's like massive and with so that's kind of our our hero stick where we have a a default of four levels you can increase that um yeah so anyway we've we've identified that cause of this memory resarch is just like keeping those buffers so something with that we're doing in this function is is probably wrong um so I can close this here get my dbook out of the way ah there we go um yeah so so something in here is wrong um I'm actually G to see if I can use uh Rob's nice little fix uh co-pilot to see if I can I love when we get to like see previous demos demoed in the later demos yeah so I'm curious I'm curious if it'll work or not uh no that's actually not the right answer um but hey we tried yeah so the student among you uh might have noticed that we have this cash which is an array that we're like finding things in and then adding to but but looks like we actually are using uh size which which is not actually a property of an array so so what we want to do is change that out for length here which is the correct way to read the length of an array in JavaScript um and then I think with this change we should be uh not quite so um high in our memory usage so I'm going to restart server real quick so basically with never triggering that yeah always undefined and like undefined is not less or it's not greater than 10 so it would never actually like remove the first element of the array um yeah so let's try that again let's make lots of requests and then I'm expecting probably like maybe around 100 megabytes or so of memory yeah so it's it's still actually it's actually getting pretty high there I'm curious why that is I wonder if it's I wonder if it just hasn't trigger garbage collection yet huh that's interesting uh oh sorry I should cast shift actually made uh it's second an unintentional bug they are apparently try again one more time unshift is putting something at start of the array shift is taking something off first of the array I always think these are good because it's like y'all this is truly live like yeah this is a real Dem yeah so so now the memory is around 139 megab which I think is probably a lot better you can also verify that so I can take another profile uh another snapshot and then I'm expecting to see oh yeah this looks much better so there's only um let's see around uh like 4 megabytes like 3 megabytes used of these buffers and there's still like several of them just because there's also internal ones that are not the ones that we have in our program looks like we have uh 10 yeah this looks like about 10 buffers um that are in are in the cache as a result of our program and then that's they're all the same size because they're all the same size the mge this is awesome and I so I mean I'm going to be honest I don't like use I don't really look at the memory of like this stuff really uh frequently so do you generally generate these Heap snapshots like only if you're kind of seeing that that memory is like getting a little bit out of control or is this something that you do like pretty much anytime you're writing a JavaScript application um I'm just curious kind of how that that works uh yeah so like usually it's something that you do if you notice that your memory usage um is High um it does take uh like especially in the grabs it does take like a few seconds to actually collect them so it isn't something that you do like run time that often the uh though the Chrome team has made improvements recently that they make it faster to collect um uh yeah so um it is something that you normally you do manually um like one kind of cool thing though is that we actually uh now in in RVs Coast tests um like did some work to um uh kind of test the uh get get Heap so like in our tests we can say that um if we if we like run like this set of tests you know opens editors and stuff then we can uh call a function that that like asserts in the heat that there is like for example like no more editor objects like left in memory um you we actually do this um actually do this because we actually have a library here um uh call it V he parser let's see if I get it right um yes so we actually published a a a library here that's actually a web assembly library that we use internally for um both for the graph to like visualize like that graph in the table but also that we uh call out to in our code um uh to like do those assertions um so if you have code like where you want to do like programmatic kind of accesses or like introspection on your HEAP it's obviously kind of advanced an advanced use case here uh but but there's Library uh for this that you can try out um and the cool thing is this actually also written in Rust and we can pile it down to B assembly um so it goes pretty best uh yeah that's awesome and and um this Heap visualization this is outof box functionality right like you don't need any sort of extension or anything uh yeah that's right so this is like out the box um uh the actual graph is actually an extension so if you hit the the graph button you don't have that extension installed it'll prompt you to install it uh yeah that's also the the same extension that gives you like the fil graph if you have a CBU profile or heat or heat profile um so those are included in that in that graphing extension awesome and then we have um a general JavaScript memory question is Javascript reference counted or Garbage collected or both um so I'm not an expert on V internals um I think uh like most kind of like modern languages it's like a a a a a generation generational garbage collector so um um it's it is garbage collected um and there's like basically depending on the LA time of an object there's different like areas that it be allocated in and then uh those are collected um at different at different intervals and in different ways um but yeah that's not really like my uh whe house awesome no thank you so much for answering it though um we had lots of love for this we had just trying to find the questions um Amad said wow that's awesome when you were showing the graph visualization um coder also said this demo is amazing as well great way to close 2023 um an obligatory what is your theme I think you shared the link with us so the code song theme I believe my them c song it's one that um I I've worked from um someone else's team and and and G made it have better support in vs code so you can try it out if you'd like it awesome I love it yeah definitely try it out um I also think it's so cool when like you for this theme I always think it's cool when like everyone shows off their own theme that's awesome um okay cool is there and cod nerd said Connor rocks um there anything else that you wanted to show today or talk about that's on the road map uh I don't think so so this is um kind of the uh the thing I've working on for debug recently um I've moved back to to uh the the vs codee testing sport so there's lots of really cool things coming down in the pipeline there as far as um being able to like write and run unit tests in vs code so so if you haven't yet um most likely if you if you're unit testing things there's probably a good chance that you someone's already written an extension for uh your your choice of framework and language so you can run like unit tests ands code uh pretty easily and there's cool things coming there soon cool uh trying to show uh there we go uh we also have a there we go um and so we also use this inbs code itself so uh this is the UI and you can run test and if you got errors um apparently I oh I don't think I've oh yeah not built vs code yet because I just just updated but anyway cool cool things coming soon cool awesome we love hearing that um and yeah I know you're always busy with a lot of different hats going on um I'm glad we got a have you spotlight um the JavaScript debugger updates I think that that heat visualization with the graph is so cool and like being able to actually interact with it and see it um I just think that's awesome like as someone who doesn't do that very often like that feels like something that like I can actually like understand what's going on then so that's great cool all right Connor well thank you so much for coming on I'm sure we'll have you on plenty of times in 2024 to talk about the great new workor you'll be doing thanks so much thanks for having me and and happy holidays if you celebrate and of course thank you all right everyone that brings us to the end of the release party the end of our last release party of 2023 um like Connor just said happy holidays to everyone um we're so grateful for all the support you have given us whether that's from actually contributing to the vs Cod repo um or just joining these live streams giving us your questions letting us know what you like what you don't like interacting with us on social media all of that is so valuable all of this is stuff that we do for y'all so I just love getting the chance to actually interact with y'all um so like I mentioned we um on the live stream channel are going on holiday break for the next couple weeks so we will not have any live streams for the rest of December but we will be back I think January 4th is the first Thursday of uh the new year we'll be back with a regularly scheduled live stream we'll have those all throughout January and then we'll be back with release parties in February to kick off the first release of 2024 so again thank you everyone it's always a pleasure take care and happy [Music] [Applause] holidays

Channel: Visual Studio Code

Views: 13,141

Keywords: vscode, code, javascript, debugger, copilot, floatingeditor, visualstudiocode

Id: A-yd8BqVGwA

Length: 65min 40sec (3940 seconds)

Published: Thu Dec 14 2023