How I Code with GitHub Copilot in Visual Studio 2022 to Boost Productivity Everyday - en

I get a lot of questions right here on my YouTube channel and on socials around

GitHub co-pilot and specifically visual studio and co-pilot and specifically

Visual Studio 2022 on Windows and GitHub co-pilot I get a lot of questions like

James you showed that awesome feature in VSS code is that thing available in

Visual Studio what about that other feature can I do that in Visual Studio

can I use the free version in visual studio and the answer is probably yes

and if not very soon obviously Visual Studio code and visual studio have

different release cadences when different features are added now what I

want to do today though is show you exactly how I use and develop inside of

visual studio with GitHub co-pilot not only for just developer productivity of

writing code and helping me be more productive with ghost Texs and

suggestions or refactorings and optimizations and documentation a lot

more but how I leverage chat to actually understand what's happening in different

code files that I might be pulling down from GitHub also how I might ask it

questions to scaffold entire pages and add new pieces a functionality but also

how I go a little bit deeper of actually analyzing debug exceptions that might be

happening inside my application and how I save Precious Moments and keystrokes

by have it automatically generating git commits and PR summaries for me

automatically so that's what we're going to do today is show you everything you

need to know at least how I use get up co-pilot today inside a visual studio so

let's get into it [Music]

all right here's my coffee tracking application I've been building out

completely with GI up co-pilot so here I can add different coffees that I've been

drinking I can tap on one I can go ahead and modify it I come back over here I

can look and track different bags of coffee that I've been either roasting or

that I've been purchasing at to my collection I can even see a graph and

chart here specifically of the coffee consumed uh over the last 7 days so let

me show you exactly how I use get a co-pilot instead of visual Studio to

work on any project so here when I open it up the first thing I want to point

out is that you have the little co-pilot button here you can tap on it open a

chat window go to settings manage your subscription a lot more and what I can

see is that I have a bunch of different options in this co-pilot chat window

that is going to allow me to summarize the code write unit test fix code it's

kind of helping me out here which is nice now a few things you need to know

about this is that you can change models for example here you can add images with

the vision API and you can use these different AT commands to you call

different kind of tools and also this little pound sign so you can give it

context if you are asking it questions about specific things but I pulled down

a lot of different projects and the first thing I like to do is say what is

this application doing how is it built and

what are the key components so let me go and

send that off here now this is going to go off and it's going to analyze the

entire project of everything that's going on here and it's saying okay well

here's the purpose of the application it's a coffee tracker application we can

see the key features that it's doing the key technology that it's using different

noua packages that it's using and then the key components what I like about

this is that it's allowing me to actually jump into like the model or the

coffee service or the view model it's telling me what it's doing but I can

also tap on it and get directly into it so for example if I was just browsing

code I could come in now I could go and say okay what is this thing doing but I

can also come in hover over the class and they describe with co-pilot and this

going to say hey this is using a sqlite database asynchronously it's

initializing and retrieving data objects I could go and actually understand what

this entire service is or what a method is doing so a good example of that would

be I'm working on statistics and I say okay this looks good but I don't know

exactly what it's doing let me describe that so it's going to go through uh and

it's going to show me exactly what it's doing here which is loading uh it up

calling the class asynchronously calculating consumed preparing the chart

and the date for last seven days and like that that that pretty much looks

correct there that's nice to know as I'm jumping through the code what I also

like though is that you can highlight the code and work on this too in line so

I could come over I could describe the different methods here if I wanted to

but I can right click and say ask copilot now I could ask it and describe

it more detail too by just hitting the slash command and saying explain now

what's nice is that this is going to highlight the code in this class and

send it off so I do really like that because this is going to show me exactly

what's happening in these lines of code in a lot more detail than maybe that

little describe does so it's going to break it all down for me what I like is

it even shows me like hey you could actually like document this a little bit

more but here's a detailed breakdown of every single piece of code that's going

on there so I'm trying to learn this this is nice and what I also love is

that I could then continue in the chat window so I could go ahead and put that

into the chat window and then at the very bottom for example it could ask me

like is there any ways to improve this code for example I don't know are there

ways to improve this code that's a great question so it's going to go through and

say yeah probably James because you wrote this code there's probably

different ways to doing this and and actually avoiding multiple enumerations

for example which would be pretty nice so here that's kind of cool and optimize

link queries right so you can go through that you could also go through for

example and do a little bit more though so uh for example let me you want add

functionality to something else so for example the roast level that I had in

the here I I just have normal enes but I don't have like friendly names so again

I could highlight this and I could say ask co-pilot say can we add friendly

names and it's going to go off it's going to identify it and then add those

friendly names for me I'm going to say accept now here of course I need to go

ahead and add the using statement and then boom we're good to go okay so

that's really really nice uh inside of that now at the same time I also just

like to do this too so if I go in and right click or just hit alt slash I

could also say slash Doc and let's go ahead and add some documentation for

this code because that would be a lot nicer and then we actually have this in

line it's going to add the documentation for me so I can write all these

automatically but it's going to go ahead and put those all for me just hit accept

and now we get the descriptions we get the different documentation that I want

and everything is looking really really good for this code I absolutely love it

now that's just sort of like working code asking questions modifying some

code around it um I often use that sort of rightclick when I'm working with Json

and have it add different properties and change the camel casing and things like

that which are really cool but let's say you were debugging the application

because the user you you got an error message and or you got a user report uh

from your you know different crash reporting service uh and here for

example let's say I came in and I got a error report that said Hey whenever I

change this to zero and hit save I get an exception so the first thing is I've

been debugging this save method command and uh what I want to see here is what's

going on with this coffee object and if I hover over it I can actually analyze

with co-pilot and what's cool about that that

this is going to say using the locals and the call stack explain what's

happening here it's going to show me oh everything here and also note that it's

telling me me that given the ounces of coffee that are are zero that the

argument exception is going to be thrown so it'll actually say what steps can I

take to validate the ounces ahead of time so this is kind of cool so this is

going to say Hey you could for example validate this ahead of time and throw up

a uh message to the user uh if you want and then go ahead and and return so

that's kind of nice so so that's kind of cool and it could even say what do

practices here but let's say you didn't have this nice little uh thing here you

you know just were looking at the exception or adding a breakpoint

somewhere you can actually look at the locals for example down here so any of

the things that I don't have a breakpoint on let's say that or any

method too I could ask and analyze with copout I could hit that little button

it's going to send it off over here and say okay this is what this method is

doing right here are the different properties that are going on if I want

to look at the service that this is using I could also go to my watch window

and I've added that coffee here and sure enough that little co-pilot buttons

there too so I could ask it there too well let you did just get the exception

so I'm just going to throw the exception oh my goodness right uh what's going to

happen here well there's this ask co-pilot button and if this was some

exception you know you might want the entire call stack you might want the

exception here this is going to say describe everything that happened in

this exception and sure enough it's going to use the call stack the locals

and this exception and analyze it it's going to show me exactly what what's

going on here which is really cool it can say show me code where it's

happening how can I validate the ounces is never zero I could go ahead and

follow up just like I did before now I also want to point out that we've been

asking it along the way and that there are different chats that are going on

here so for example here's the locals the call stack the code that's being

explained all this stuff too so I really really like that that you can jump back

and forth between those different items so let's go ahead and just let this go

and and and out there and if I really wanted to maybe I'd come back

here I could come back over here and I could say let me like preview that for

example and then yeah this looks pretty good let me go ahead and accept that

here and then go ahead and do this which would be great so now I get that little

validation message that's going to pop up and I don't get that exception which

is which is nice I could come in and I could modify this code update this code

and do anything that I want at that point too but let's say that we wanted

to add a bigger piece of functionality into this application so we may have

noticed that when I was on the um edit coffee page for example there's only a

way to save the coffee I can't like delete the coffee well let's go in and

let me go ahead and say create new edits thread now before I was just chatting

but I really want to go into this edit mode I want to say I make a bunch of

changes I want to add a new feature here or maybe I just want to work on a bug

let me just go ahead and say I would like to add a uh delete button to the

edit uh coffee page

here and update the edit coffee view model uh

to have a new command for it and also update the database in # coffe service

okay now here I can go ahead and ask uh GP D40 models but I've been using a lot

of different models I really like the cloud models for the code to generate so

let's go and send that off now what I want to see here is that it's creating

this plan and it's I've actually told it a little bit like hey I'm working these

files this what I want to do if I didn't specify the files it would probably

figure it out actually about what it needs to do but here it's saying hey you

need a new delete command you need a new delete coffee command and you need a new

delete button here using the danger destructive style right and it's going

to say I'm going to add a confirmation dialogue I'm going to use proper error

handling and do a lot more it's going to come back with this iteration so it's

going to say okay here's what this uh is going to look like if you tap on it for

example this going to uh show you the code

changes that it wants to make so here we can see that there's the

delete command and it has a a question down here for it and I can actually

scroll through it if I look at that zaml page there's the delete button and

here's the coffee service here um let's see where the delete is down there so

here we can delete it as well I'm gonna say that looks great let me accept all

it's going to add those different changes for me automatically so just

like that I've used GI up copilot edits to go in and modify those pages now I

specifi those before but let's say I did want to add a big refactoring into this

code so maybe on this uh bag of coffee page for example we're seeing that there

is not only this scroll view that has all the data entry here but it also has

this collection view as well so let me start a new U thing here and I'm going

to say I would like it so the uh user enters the bag of

coffee on a new page that they navigate

to from this page with a button and that says add new

bag and we need to make sure we update the uh program to use

dependency injection so here again we can choose our model I've been using

Claude on this one so let me go and just send this off now in this case I didn't

actually give it the context of the file now I have the bag of coffee open so

it's going to use kind of the different files that I have open inside of here

but it's going to go off and kind of create this plan for me now before I was

specifying CU I was like really working on a feature working on a bug I knew

where the code lived but in this instance it's going to have to add a

bunch of different things it's actually to add new files into this application

uh and then it's going to modify these files too so here it's going to create

this implementation plan for me so here it's going to say I'm going to create an

ad coffee bag a new view model we're going to move uh the ad here we're going

to register a new page we're going to add and implement the navigation back

after this page is going on here right so it's actually created a pretty

verbose plan uh that I wants to work on so it's going to give me the first

iteration and what I want to point out is that the iterations can be iterated

on so you can actually go back and forth and say oh no I really want it to be

this I really want it to be that so let's give it a few seconds to come up

with that plan okay so our plan is back and here's

our iteration so here we have brand new files so here's the brand new file that

we have here that's going to move things we have the Maui program that if we look

at the changes that are coming in uh into here we're going to see that we

have the view model and the bag here and we have updates to the Shell routing as

well so this is really really cool and I could add one of these at a time I could

go back and forth on it I'm going to go ahead and hit accept all and this is a

great way of going in and just seeing exactly what's going on inside this

application it's making all these changes and edits now to the code which

I think is great now at this point uh we can just kind of hope and see if it runs

right it hasn't done any iteration on it as far as like seeing if it did it and

it said oh you know what it's actually missing a name space over here so it was

it was almost 100% uh which is good so let's go ahead and just clean this up a

little bit right so let me go ahead and go in say using the view models and boom

we're good to go it looks like same thing we have the

uh add coffee page here so let's go ahead and add the the namespace there

and let's go ahead and compile it up one more time okay so I can go ahead and

load it up now I can go ahead and tap on this I have the delete button here I'm

going to say no I can go back over here I can now go into the coffee bags I have

the add new coffee page and then boom there is our add new coffee bag coming

in here which is great now at this point I've been using GI of cobot chat and the

edits mode and asking things in line and doing my coding there but I also like to

click on my keyboard on occasion and and and go ahead and modify some code so

let's say I was going into the statistics view model and I wanted to

add a different grouping here now I could add get up C chat but you know

sometimes I'm just in here and I'm just like okay let me just do some coding so

I'm going to add a new observable property and I'm going to say uh private

observable collection uh coffee uh Coffee Day data and I'm going

to say chart two for example and then what I would like to do

is come down here and I get this ghost text so if I come

in I can say Okay declar data too here it's going to say okay like this would

just be like the grouped coffees I'm going say no let me go ahead and uh

group uh group The coffees uh by name uh for chart chart

data 2 and then I'm going to go in and say okay well now we get the entire

ghost tax of grouping it by the name and choosing it by the ounces which is great

and then it will go ahead and start to give me some uh back in here for the

ghost Tex of filling this in automatically for me so that's really

nice like I'm actually just doing normal coding and I'm just getting the ghost

text or recommendations automatically to group things differently so that is

pretty fantastic okay now at this point I'm

ready to make my changes so I'm over here in my get commit window and the

first thing I'm going to do is just hit this you know generate commit message

for me my keystrokes they're valuable only so many of them left and I'm going

to go ahead and say generate message for me it's going to look at all the

different things and it's going to say yeah we added this ad coffee component

we updated this we did a bunch of things for me that looks pretty good um I like

that but it's kind of plain and generic and I might want to give it more context

so I'm going to click on copilot go into settings and hit options now here you

can enable a bunch of different things in here so instructions uh co-pilot

completions obviously you can you know enable renam suggestions and all these

other things that are here there's a lot of other features that I'm just use on a

normal basis that are part of it so one thing I really like is that you can uh

enable uh get preview features for example such as Source Cod code

integration so the first thing is I could say make the first uh line a

paragraph outlining the changes

and then make a bullet list with Emoji of the key

updates and this is nice because I can then also say and sign off

djm and hit okay because I may write my get commit messages in a specific way so

now when I go and commit this it's going to use that customize uh message with

get of co-pilot based on all the changes that I have here so now we can see that

we added um some solution files we register different pages and clean up in

here and this is really cool giving me that context here and then it signs off

with Jame James which is cool so I'm going to accept there and I can go ahead

and commit that now I also want to point out one

other thing here which is that you can also click this little review changes

with copile and it's going to review all of your active code changes inside of

visual studio and give you feedback as well but I know that this is perfect

code because I just tested it so let me go ahead and commit and sync all of this

here and this is going to sync it up and I'm going to push this Branch out now

when I push this uh Visual Studio is going to say hey do you want to create a

pull request so yeah let me go and create that in Visual Studio here and

what I want to point out here is that that

entirety of the changes are here too so for example it is brought over that

autogenerated one here so I can of course generate a new one so if I wanted

to go in and say this was actually multiple ones let me just go ahead and

so I've gone ahead and deleted it and the reason I want to do that is because

this is just showing the commit I really wanted to do is generate a pull request

specific um one here so this is going to generate new message and what I like

about this is that it actually gives me a PR classification a PR summary that's

coming in and then it gives me more information about it so I could say this

is adding new delete and uh add coffee bag page to it and then I can go ahead

and hit accept here and then create that or create it as a draft to and then send

that off so I get those nice features there and I can open that on GitHub now

I do want to point out one more additional feature here of get up

co-pilot chat so I'm just going to pin this one more time and I'm just going to

create a new chat window and the one thing I want to talk about finally is

sort of the extensions ecosystem so for example imagine I was on this bag of

coffee and I was adding documentation after I Shi these features like oh I

need to go ah and add some documentation here I could go in and of course add

docs in line but I want to also point out that I can at and I can add and ask

get up here Visual Studio the workspace or other extension so for example here

is the mermaid mer extension and I can say hey at mermaid chart I've just

installed that from github.com I can say create a

diagram of and I'm going to say this bag of coffee here this is going to go off

and now go ahead and create that mermaid sort of diagram for me and this is the

class diagram which looks 100% correct but I could say can you make this about

a database and it's going to now go off

and say oh well this is a database entry right so let me go ahead and create a

different mermaid chart for that so here is the ER diagram that entity relation

diagram for me I'm just going to ahead and copy that and what's cool is I could

go back in now go back into this read me and I have the markdown editor V2

extension installed here that's showing this so I could go down and I could say

uh data types and then I'm going to say uh mermaid paste that in

and then sure enough boom there we go here is our different bag of coffee

that's coming in and we can see that PK on the ID and everything that I like on

that too so that's from start to finish coming in I can then go back in you know

add a little commit message generate that up for me add and commit that back

in and now I'm good to go right so that's really nice to see all those

different features come in it's way faster than I could actually go ahead

and generate some of these new features by typing every different piece of

code all right well there you have it that is just some of the the features

that I use inside of Visual Studio 2022 with GitHub co-al there's so many more

there's a lot of things deeply integrated into the IDE such as

profiling and you can have custom markdown files so you can have it

scaffold Pages specifically with custom instructions and there's new features

being added into every single preview and new models being added all the time

I do want to point out that over on the visual studio YouTube the team is doing

an amazing job of releasing Deep dive videos that coincide with the blog post

that they're putting out about new features that are being added all the

time into the IDE so go down subscribe to the visual studio Channel and go

ahead and dive through the blog post of some of the features that I've been

using and the ones that I know that you're absolutely going to love I love

GitHub C- pilot I've been using every single day for coding adding new

features helping me debug my applications and so much more let me

know what your favorite features are if I miss one let me know and put it down

in the comments below if you like this video of course give it a like give a

subscribe and share it with your friends that might be using visual studio to

show them all awesome features that the team has been putting in to the IDE I

love what the team over in Visual Studio is doing and I just love how it makes me

more productive every single day with all these new models and new AI

Integrations all right that's going to do it for this video so until next time

I'm James have a good one [Music]