Building Blazor Web Apps Faster with GitHub Copilot in Visual Studio 2022

in this demo I'll show you how to use GitHub co-pilot within a simple Blazer project and the cool thing about this is we'll get to see how copilot can help us navigate a couple different contexts here including C sharp code HTML CSS even some bootstrap elements so the project I'm working on is a simple Blazer resume website and this comes from the.net conf Student Zone demo so on the right hand side here is my resume page of my website and there's three main sections so far there's an about me and experiences and an education section but I think every resume should include a list of your skills so you can showcase them to Future employers folks you're networking with Etc so I'm going to go ahead and add that in and I've actually already included some of my skills data in the resume.json so now I'm going to go into the resume.razer file I'm gonna go down below the education section here and on line 36 I'm going to prompt copilot to help list my skills they'll say list skills and co-pilot's given me the following suggestion and this looks pretty good it's following a very similar format to that of the previous education section so I'm going to go ahead and accept that but one thing I am noticing is it didn't include the closing div so I'm going to go ahead and add that in for Copilot and now it's adjusting that to me which is perfect co-pilot once again isn't here to run the show it's just here to be a pair programmer and sometimes it doesn't do everything perfectly so I'm going to save that and as we can see on my resume page my skills section is here another thing to notice is that the list skills comment is also included there so I'm actually going to go ahead and delete that um just help co-pilot out a bit but I'm still not seeing my skills being displayed so I need to go in and add those so I'm going to go into my skill.razer file and I'm going to ask copilot to help me list these skills so I'm going to ask it to display my skilled data okay the skill Theta let's see what it comes up with okay so it's giving me something pretty similar to what I want um I'm gonna see if there's any alternate suggestions which would show up when I hover over that ghost text um but I'm not seeing those so I'm just going to hit tab and I'm going to add in what I wanted to see here so I'm going to say estimated level perfect doesn't always do everything perfectly so it's all good I'm gonna help it out and also add in that closing div great so now you can see the skills are displayed here on the right once again that comment is also displayed but I'll take care of that after I refine this a little bit because I want this to pop a bit more so I'm gonna have copilot help me to make these show up with a little bit more contrast to the background and the way that I'm going to do that is to integrate a bootstrap card in here and make that pop so I'm actually going to go ahead and delete this and I'm now going to ask copilot to display the skill information in a card in bootstrap bootstrap and this looks pretty promising so I'm going to go ahead and check if there's an alternate not seeing one I can accept this add in that closing div awesome so it's given me those cards uh in white unfortunately that means that we can no longer see my skills again so I'm going to further refine this and continue to get more and more specific with copilot one of the reasons I'm doing this is to show to you all that copilot works best when it has very specific clear instructions um for the task that you want its help with so I'm going to go back in I'm going to delete this and I'm going to give it some more specificity here I'm going to say with a blue background and white text all right it's giving me the BG primary text white this is looking pretty promising I'm gonna accept that and add in my closing div all right looking much better but I'm going to go ahead and refine even further because I don't like the way that these uh estimated skill levels are showing up in Gray so I'm going to go back in um refine what copilot gave me wasn't perfect but did a pretty good job and I'm gonna make that no longer muted Perfect the final thing I'm going to do here is delete this comment so that it doesn't show up on my resume page and there you go I've got my resume copilot helped me to edit it up a bit give it a bit more contrast there's definitely a lot more that could be done here but I hope this was a helpful display on how copilot can help assist in your Blazer projects

Channel: Microsoft Visual Studio

Views: 9,522

Keywords: Visual Studio, GitHub Copilot, .NET

Id: 0SXveS2ZA_k

Length: 6min 25sec (385 seconds)

Published: Thu Aug 24 2023