If you're a C# or .Net developer looking to get
started with GitHub Copilot, you're in the right place. I'm
Katie Savage, a product manager at Microsoft, and today I'm
going to be showing you how to incorporate Copilot in
your C# development. If you're completely new to Copilot, I
recommend checking out our Getting Started with GitHub Copilot video.
Otherwise, today I'm going to be taking you through 2
demos. In the first one, we're going to be using
Copilot to help us write Link query expressions.
But in the second, we're going to be jumping into
a Blazer project. Let's get started. For this demo, we're
going to use Copilot to help us write some link
query expressions using C# in Visual Studio Code. In this
project, I have an in memory data source which is
a simple list of Student objects. Each student has a
first name, a last name, an ID, and an array
of their integer test scores. We'll query the data, execute
our queries, and modify them.
All using Copilot as our assistant. The first thing I
wanna show you how to do is generate data with
Copilot. I'm gonna go ahead and go into this data
source and I'm gonna try to add another student object
with the help of Copilot. So I'm starting on line
15. I'm gonna add in a comma and then I'm
gonna add my new student on line 16.
It looks like Copilot is already giving us a suggestion
in Gray on line 16, but this student spend is
already in our data set, so I'm going to go
ahead and create a comment and tell Copilot what I'm
looking for. Once I hit enter, Copilot's going to give
me a suggestion in this light Gray color. As you
can see, it's given me the following John Doe suggestion,
which does seem to have unique values for its ID,
its scores.
First name and last name. I'm going to accept the
suggestion by clicking tab, and the cool thing about this
is the format of this actually follows along from all
of the other student objects, and the ID is chronologically
in order, which is pretty cool. Next I'm going to
show you how you can use Copilot to query this
data.
So what I want to do is produce a list
of students whose score on the 1st test was greater
than 90. I'm going to go ahead and start on
line 20. I'm going to create a comment once again
and tell Copilot what I'm trying to do. As you
can see, Copilot has given me the following suggestion. If
I were to hover over this suggestion, you can actually
see that I can accept the whole thing with tab,
or I can accept it word by word using control
and right arrow.
And if there are more options here or other suggestions,
I could toggle through those using these arrows. But this
suggestion is pretty close to what I'm looking for, so
I'm actually going to accept the whole thing by clicking
tab. Next up, I'm going to show you how we
can execute this query. Once again, I'm going to use
Copilot to create a comment and tell it to execute
the query to print out the student's first name and
last name. I'm going in on line 26.
And Copilot's given me the following suggestion. This is pretty
close to what I'm looking for, but it's not exactly
the format I was hoping to use. So I'm actually
going to go ahead and use control right arrow to
accept parts of this suggestion, but not the entire thing,
and then I'm going to take back control and start
to fill in what I'm looking for. Copilot is giving
me more suggestions, but I'm going to go ahead and
start writing.
Until it looks a little bit more like what I'm
looking for. And as you can see now Copilot has
given me the suggestion that I want to use. So
I'm going to click tab to accept this and let
me show you how this looks. When we execute this
code, I'm going to open up the terminal and I'm
going to run this. We do have a warning here,
but for the purposes of this demo I'm actually going
to ignore that. And as you can see, we were
able to print out our students.
Last names followed by their first names for all the
students with scores above 90 on that first Test. Next
up I want to show you how we can modify
this query to make the results easier to scan and
understand. I want to order the results from highest to
lowest score on that first Test and then when we
print out all of that information I want to be
able to see the students name and that score from
highest to lowest. I'm going to go into line 24.
And tell Copilot to help me with this request. As
you can see, Copilot was able to help and gave
me the suggestion I'm looking for. So I'm going to
accept this. And now I want to ensure that we're
printing this out in the way that I want. So
I'm going to go ahead to the right line format
on line 31 and change this up. I'm going to
delete what we have there right now and I'm going
to tell Copilot that I
want to print out the student's name and their first
test score. Once again, this isn't the exact format I'm
looking for, so I'm going to accept this word by
word and then I'm going to change some parts and
Copilot's already given me the suggestion that I'm looking
for. So I'm going to accept this with tab and
it looks like it added some parts that I'm not
looking for. I'm going to remove those and then hit
tab. Now let's see what this looks like when we
run it.
Awesome. As you can see here, Copilot put it in
the order I was looking for, from highest to lowest
score. This is a cool example of how you can
use Copilot in your C code to query data with
LINQ. In this demo, I'll show you how you can
use Copilot within a Blazer project. Copilot will be helping
us navigate a few different contexts here and pulling together
C# code, CSS, HTML, and even integrating some Bootstrap elements.
We'll be working with this Blazer resume website which originally
comes from the .Net Comp Student Zone repository. So let's
take a look on the right pane. Here you can
see our resume website and we're on the resume page.
There's three primary sections here. There's an About Me and
Experiences and an Education section which I'll map over to
our resume dot razor file here so you can see
each of these sections in this file.
I'm going to show you how to use Copilot to
add a skills component to this page. So I want
to be able to display my skills so that people
can take a look at my resume and know my
competencies. So I'm going to go ahead on line 36
and use a comment to prompt GitHub Copilot to help
me with this task. And here's the suggestion. The cool
thing about this is the way that Copilot's able to.
Integrate and utilize these different contexts, helping us pull together
C# here along with our Razor markup. So I'm gonna
take in the suggestion. And I've noticed that Copilot doesn't
always add the closing Div in my razor file, so
I'm gonna go ahead and do that.
And now you can see the skills section on my
resume page of my site. So the other thing I'm
noticing is Copilot is actually including this comment on that
page. So I'm going to go ahead and delete that.
But the even bigger thing I'm noticing is that my
skills are not being displayed. I do see the header,
which is great, but where are my skills? I have
all my skill information already set up in the resume
dot JSON. Here are those skills.
The next thing I'm going to show is how to
add HTML markup into our component file, and this is
going to allow us to see those skills on line
three. I'm going to use Copilot to help me display
this skilling data, and Copilot's given me this suggestion, which
I'm going to accept. And I'm going to add that
closing div right here. And now you can see that
these skills are being displayed.
We still have the comment there, which I will remove,
but before I do that, I actually want to customize
this a bit further. I want to make this look
a little bit better, and I want to show you
how you can integrate Bootstrap elements into your code with
the help of Copilot. So I'm actually going to delete
lines 3 through 8 and I'm going to reprompt Copilot
with something a little bit more specific. And Copilot has
given me the following suggestion. I'm going to go ahead
and accept this and add that Div.
Now it's looking a little bit different, so our skills
are being displayed here in Bootstrap cards, but it's pretty
hard to read. The font here is white and the
cards are white as well. So let's do one more
step and customize this a bit further using the help
of our Copilot. So once again, on line three I'm
going to ask for Copilot's help using a comment, and
this time I'm going to be as specific as possible.
So here I asked Copilot.
To make the cards have a blue background and white
text, and it already looks like Copilot is doing that,
so I'm excited to see what this result looks like.
Awesome. Copilot has helped me a bunch with this and
it all is looking pretty close to where I want
it to be. The one thing is I do want
to help Copilot out by customizing this further, and I'm
just going to remove text muted here, save that.
And finally, I'm going to delete the comment. And there
you have it. We've used Copilot within our Blazer project
to help us customize this page a little bit further
and display all of our skills data. We've now seen
some ways that GitHub Copilot can help us with our
C# and.net development, But keep in mind that GitHub Copilot
is just that, a Copilot. It's here to make your
life as the developer easier and more efficient, but it's
not always perfect.
If you found some value in this video, please like
and subscribe, and also check out the other videos in
this series to learn more about how to integrate GitHub
Copilot into your development experience.