There's been some big announcements around VS Code and GitHub Copilot
in the last couple weeks.
Copilot essentially got exponentially smarter.
How does that work?
Let's take a look.
All right, I've got a project here where I want
to add an additional login button for Facebook, but I'm
not exactly sure where in the project this login is
done because there's like a lot of files in here.
OK, so let's ask Copilot to tell us where
in the project this login is being done.
And as you can see, it doesn't really know.
And that's because it doesn't know everything about my project
and all it can give me is a generic answer.
And that's because one of the limitations of these large
language models like ChatGPT is that the size of the
messages that you can send to the model is limited.
We call these tokens.
And because of that, it's impossible to send your entire
project and all your source code up to the large
language model.
It's simply too big, and so while GitHub Copilot does
a really good job, it only has a partial view
of your world and that can be quite limiting.
So we remove that limit.
We've added a brand new workspace command here that allows
Copilot to search your entire project, and it does this
all on your local machine.
We get back an answer that shows us everywhere login
might be implemented, which is quite a few places and
this is how most real world projects are.
Functionality is just rarely contained all in one file.
But with the new workspace command, GitHub Copilot now knows
about your whole project and can give you holistic answers.
And in addition to knowing about your whole project, all
chat and GitHub copilot is now handled by GPT 4.
OK, so I think this is what I'm looking for,
for this login button, the modal login component, and it
even tells me that there's Twitter login there.
So let's click on that to jump directly to that
file.
So in the modal login component, I want to add
a new button right here below the existing Twitter button.
There's a lot of markup here, so I'm not sure
exactly what I need and what I don't.
So what I'm going to do is open up the
quick chat here with Command and Shift I or Control
Shift I and that lets us jump right into a
chat window without having to go back and forth to
the sidebar.
And I'm going to ask it for a new login
button.
OK, nice.
It's giving us a button.
But for GitHub, let's just go ahead and copy this
code in, and then we'll iterate.
Iteration is key to success with Copilot, so let's open
the inline chat here and tell it to make this
a Facebook button instead.
And here the changes come, streaming in, in real time,
so you can watch what Copilot is writing as it
writes it, and it gives us a Facebook button.
Now, part of the magic of Copilot has always been
its ability to anticipate what you're going to do next.
So, for instance, I need a Facebook URL here, which
is gotten from the configuration file, and it automatically writes
that code for me.
But even crazier than this is that if I go
down to the CSS and I ask for a new
style for that Facebook button, it knows what color to
make that button.
It knows the color of the Facebook logo.
That's nuts.
Now how do I run this?
I assume the instructions are in the README, which I
could open and ask copilot about.
But Copilot now let's you specify context for your chat,
including specific files.
So I'm going to use the pound file command here
and select the readme and then ask the question about
how I run this app and I will just take
the serve command and select run in terminal here and
run it.
Now when I do this, I get an error and
it's cryptic, Something about Glib-C I have no
idea what that is, but you'll notice there is a
new Copilot icon that you'll see in a lot of
places in VS Code.
It looks like these little sparkles, so keep your eyes
out for it.
Now when we click on this, Copilot looks at the
last terminal command and output and gives us an answer
about Glib-C and we have options.
One of them is to upgrade our system, which it
does not recommend.
But the other one is to use a different version
of Node.
And as it turns out, I already have NVM installed
and I'm using Node 18.
So let's take the suggestion and change that to node
10 and problem solved.
Now the project builds and this new button, it looks
great.
I just want to tweak it a tad, but we
know that typing messages to AI like ChatGPT can feel
laborious after a while, especially if you're doing a lot
of it.
The whole point of coding is to move faster with
shortcuts, not type everything that's in your brain, right?
But how do you do this with an AI?
There is a brand new extension called VS Code Speech
which provides speech to text support in VS Code and
it means that we can quite literally talk to
Copilot.
So watch me bring up the inline chat here and
ask it for a new class with some margin and
some drop shadow, and then I'm even going to ask
it to add that class to the buttons automatically.
Check this out.
Create a new class which adds some margin and a
subtle drop shadow and then add this class to the
two login buttons in the HTML above.
Copilot creates the new class and it adds that
class to the buttons in the markup in both buttons
at the correct place.
All right, my button looks great and I'm ready to
commit this now.
Commit messages are notoriously tedious to write, but since
Copilot is your pair programmer, it knows what we've been
working on.
So there's a Copilot button right here, the sparkles
in the commit box and Copilot will automatically write
a good commit message for us.
And if that doesn't blow your mind, when we create
the PR for this feature, why write a description when
Copilot is perfectly capable of doing that as well?
And all of this is available in Copilot today.
You can use it today.
All the links you need are in the video description
below.
And as always, happy coding.