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 wait list and you'll have Copilot chat
soon enough. 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
about 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 inline.
Now if you wanted to, you could click View in
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 auth header and we'll just select 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 Copilot
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'd 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 we'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.
With Shift F9 you can move U 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 Copilot 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 kiddo Copilot 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 you 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.
I installed pandas and we can accept that error.
Or maybe we do I install the right way and
use a requirements file.
OK, two more things and I've saved the best for
last.
There is a new quick suggestion experience that you could
toggle on with Command Shift I and here it is
right here.
And if you just want to ask a one-off question
to get help from 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 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 at that PR experience.
Here it is.
So first you're going to need to have the GitHub
Pull Requests and Issues extension installed.
When you have that installed, you'll see the icon.
It 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.
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 go to the 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!