Beyond Chat: Unveiling the New Features in VS Code & GitHub Copilot

GitHub copilot can automatically apply suggestions from a review and a PR for you yes and a whole lot more because today in this video we're going to go Way Beyond chat with vs code and GitHub copilot let's go so first up yes there's still a wait list but they're moving people off of it pretty quickly so go ahead click on the link below in the video also description get on the waitlist and you'll have co-pilot chat soon enough so let's do a quick chat recap first of all we're going to use vs code stable here for most of this because you don't need insiders anymore to use GitHub copilot now you are going to want to have the GitHub copilot and GitHub copilot chat extensions installed and when you do that you'll see a new icon in your sidebar indicating GitHub chat and you can see here that I've been chatting a little bit with it already in preparation for this video and now the sidebar chat is chat kind of like you would expect and you can ask it anything here about program programming such as what are some good libraries for validation in JavaScript now the other way to interact with it is to do it right in line with your code which may feel more natural so if you highlight a block of code and press command or control I it will bring up the inline chat window where you can use the chat right in line now if you wanted to you could click View and chat which puts it back in the sidebar but the nice thing about this box is that you can iterate here now that we know what it does maybe we want to add an off header and we'll just let copilot go ahead and offer us a suggestion for that so when it gives suggestions Now the default view is the diff view here so this is the new view so you can see exactly what's changed between what co-pilots suggested here on the right and what you actually wrote here on the left right and you can make changes here so maybe we would just want to clear this out other than that we like this implementation a lot we'll go ahead and accept that and now that is the code that we've got thank you Copilot now you can use sidebar in the chat but you might feel a little constrained here until you've added an option for you to open the current chat session in the editor space which gives you so much room for activities and if you don't like that of course you can always move it back sometimes you want to go back and see previous chats that you've had and you can do that now by clicking the history button and then selecting one of them from your history this is a really nice way to visit chats that you had before that you want to go back to now in addition to being able to go back in time you can also export these chat sessions as Json files now why would you want to do that well a couple of reasons perhaps you want to put it in Source control or perhaps you just want to share it with someone else so they can see the code and conversation that you've had as well and so for them they will import the session and then they can see the exact chat session that you had now one of the problems with these chat threads is that they can get really long and prompt sizes are limited for these large language models so we've added the ability for you to revise history and take out previous messages and by doing this you allow the model to scope more on what you actually want to focus on in case you change subjects and you can reduce the prompt size so that you can keep going we've also added some new keyboard shortcuts that allow you to move between these code boxes that you get in the response so with shift F9 you can move up to the previous box as you can see there but only within the same message and F9 will send you back down through the other boxes so F9 and shift F9 now let's get into some really crazy features so there's a new create workspace command and we can have vs code create a python app using flask and what this will do is it'll recommend a structure to you of what the app might look like if you were to scaffold it out and then it will give you a button here that allows you to scaffold it out so if we say create workspace and we'll just put it right here and vs code will scaffold the files needed by working with co-pilot to get the right code and we can open up the new scaffolded project and here's the code that vs code automatically created for us giving us a new workspace and a new project and similar to create workspace there's create notebook and what this does is well let me show you so let's just say to import the orders.csv file we'll assume that exists and plot the sales over time now what will happen here is obila will create an outline of the things that it would do or you should do in the notebook and these are actually the different cells and if we click create notebook it will create that notebook with these cells and the code inside of it saving you a ton of time if that's what you're trying to do copilot now has the ability to help you with errors so this little sparkly icon you'll see this starting to show up in various parts of vs code and this is the copilot button so let's click that and we're going to let it automatically fix the error which was that we have not pip installed pandas and we can accept that error or maybe we do pip install the right way and use a requirements file okay two more things and I've saved the best for last there is a new quick suggestion experience that you can toggle on with command shift I and here it is right here and if you just want to ask a one-off question to GitHub copilot this is how you do that so we could say what are some npm packages for validation you don't have to spell things correctly copilot knows what you want and we can get our answers right here so this is just a really nice way to interact with GitHub copilot without being in the sidebar or starting an official chat but if you want to promote this to the chat view you can by just clicking on this button here and of course you can move it to the editor space if you like that too now let's take a look look at that PR experience here it is so first you're needing to have the GitHub pull requests and issues extension installed when you have that installed you'll see the icon looks like this and you can see all pull requests on your repo with this extension you can interact with them and this one here has a chat bubble so we know there's comments on it so let's go to the modified file here and we can see here's the comment and it's the code's even highlighted for us where we should conditionally apply a class instead of having two components which I would agree with so again we're going to look for that magic copilot button click that and we'll let copilot go ahead and see if it can implement this review comment for us just like before right we get the side by side so over here we have two components and over here we have one and we can see that it's done quite a bit of work on the class element to do the conditional there instead of having two components and so we can accept that if we like it and resolve that conversation now try this go to vs code insiders go to the chat view type a slash and look at all these slash commands what do they do just explore them and find out for instance on the search we can say find all links in this readme and watch what it does it recommends a regex which we can say show in Search and we found all of the links in this readme file so go to vs code insiders head to that Chat bar hit the slash check out those new commands what can you find that GitHub copilot can do happy coding

Channel: Visual Studio Code

Views: 42,396

Keywords: vscode, copilot, ai

Id: Dlt-DCLHnxM

Length: 8min 3sec (483 seconds)

Published: Tue Aug 01 2023