GitHub Copilot Tips for .NET Developers | .NET Conf 2023

good everything good people my name is Mark Downey I a product manager on the uh Visual Studio debugging and Diagnostics team um I'm today have a great privilege of talking to you about GitHub Cod pilot chat and how we can use that to accelerate your net development um in visual studio um we think that this is a great opportunity for you to be way more productive than you have been and I just want to today I'm going to just show a few demos on how you can start using get H co-pilot chat in your workflows today to make you uh much more productive and to accelerate your the way in which you can deliver on um the the tools and the applications you're developing today um as we uh dive into this area today um I'll be sure I want to kind of ground the conversation first in this idea of that this we are doing so in a responsible way um and by that the way in which we do that is by making sure that we've kind of have these mitig ation layers a set of mitigation layers there there's no really one point at which you can create all safety so we have these multiple areas where we have these mitigation layers at the heart of this is the platform itself and the platform itself is about the model the open AI this huge kind of amount of research that goes into this particular layer to make sure that the data going into it is good and the things that come out of it are good surrounding this model is a Content safety system this way in which we make sure that once we've filtered all that data and yet we try to make sure it's used appropriately so there's a safety system around there again that make sure that the content we delivering is in fact kind of useful helpful and that it doesn't deliver anything around hate or or or or racism or anything like that on top of that then also the layer we're going to be mostly talking about today is the user experience layer this is the The Experience layer that sits within Visual Studio specifically today or visual studio codee um and then the the kind of way in which we use um meta prompts and grounding to make sure that it's delivering accurate results so as I'm as I'm in the Persona of a developer today and I've been a developer for many many years now um I want to make sure it's delivering relevant information that is pertinent to the task I'm currently doing and the way we can do that um today is making sure that we um ground the experience in a specific application that understand what I'm doing at this moment and visual studio is the perfect application to do that within so let's dive in let's look at a demo um let's dive into some code and see if we can um be be productive today so as I mentioned I am in fact a developer I have been developing code for over 20 years um currently I'm a product manager product developer product um product owner but however I still do a lot of Open Source work in fact right now my my one of my biggest project is is Dos blog which is a blogging engine that I actually use and others use um around uh the world um in this blogging engine actually open issues are things I want to improve over time I've been kind of shepherding it for the last uh I think maybe eight years or so um and I've had this issue open this one uh here for about two years and no one's picked it up and I think I know why um but we we'll dive into it we'll try to fix this problem that I've avoided and my community of contributors have avoided for for for 2 years now and the issue really is that I am trying to select a hero image from the blog post let me kind of show you what I mean by going to my blog here here's the homepage of my blog and it has a list of blog posts that I've been working on recently and you can see here there's like a hero image that represents this blog and the way in which it does that today is it finds the first image and that becomes the hero image that's okay what would be more helpful is if I could have multiple images in this blog post and it would select the hero image for me I could do so explicitly rather than implicitly just pick the first image um so um the the solution I've proposed in this issue is just Mark each of these images with a class attribute and suggest its hero image and that's the thing we will use to make this work and I think that's actually pretty good solution so let's dive into the code and see if we can make that happen so let's go ahead and open Visual Studio now I am really well prepared here this is the uh this is an extension class with a bunch of extensions in it in fact it's just a kind of a list of of of methods that work on string it's an extension class meaning I spot weld to the string object and so whenever I see have a string it will have as a method on that string a find first image so when I have my list of blog posts I can just easily find the first image and here is that method um what I can do now um this is code that is new to me I think the pre prior uh predecessors wrote this particular method and so I actually want a bit more information about it so I can use my ALT slash key to bring up the ask co-pilot in line chat and I can use this to ask any question I want now we talked about this idea of setting us ourselves up to ask a question that's relevant well in this instance we are in line so it knows it can pick up context based on where I am at this moment so I can ask a simple question what what does this regular expression do and so it is now going and looking at this method and it's giving me a pretty useful explanation so it's saying hey it goes ahead and matches the opening tag of the image this is a this is how I break down problems I like to have a natural language way in fact when I first started as a developer I would literally write out what various parts of a method or a function we're doing in order so I got really good at being able to read code but this is a really good start it's looking for image tags it says you can have any character so it's breaking down each part of the regular expression for me it's going to go ahead and look for source and yeah it goes on and in fact I can ask um co-pilot additional questions here so I could say and I'm going to use a backlash here to explain the code and this is a convenient slash code that I can use to explain a particular um part I'm going to say hey explain this code for me in the context now of the entire method what is this method doing so I know it's finding the first image and it's basically gives me a explanation of this entire meth of this entire method so it extracts the first value and it's telling me it gets the source so it gets the source tag of the image so this is perfect it's exactly what I just assume but I actually don't want this obviously know what this does I want to have something that works specifically for my issue so I'm going to go ahead and start again uh so rather than find first image I'm going to go ahead and find hero image obviously this is blank I know what I want to do but I'm not very good at regular Expressions um in fact every time I look at a regular expression it feels like the first time I've ever looked at a regular expression so let's ask co-pilot I'm in line and I can say a regular natural language question and get an answer in context so let's start writing rewrite this method using a regular expression so that it checks the blog content parameter and Returns the value of the source string only where the class name is set to Hero image that's a rather long sentence but it's how I talk normally um so let's see what it's come up with I actually really like what it's got let's kind of review this now I'm going to stop right there and pause for a moment because this is really important to understand I have no idea if this this code really does the thing that I just described I've described it very carefully but it could still be wrong this is a system that is based on probability and non-determinism meaning it's my job as the developer who knows what I'm trying to do to now look at this code and see if it fits the purpose see if it's good for purpose so let's go ahead and look at this details here it actually looks good for a first blush I'm going to go ahead and accept it it uh messed with my alignment there a little bit but let's go look at this and see if we can make it make sense to us so we have a hero image and and a couple of things that kind of really jump out at me is that it looks almost identical to my first method It could only know that if it had grounded itself in this class and by asking the question in line I gave it permission I gave it that tasset permission to go ahead and look at this code in this context and see what fits in this moment in fact I never actually mentioned in my question HTML but it knows that when I was talking about image because it's looked at other examples in this class it now know now knows that it's looking for an image tag right and here you can see it looks about right because I know that it's looking for a class equals hero image and I know it's looking for Source whatever the source image was so this looks good enough for me to just start testing okay U before I start testing I'm going to make sure that this um goes where it's supposed to go and that is going to replace find first image and we're going to start debugging cuz again how we test this is how we test this for data or information we get from any Source we're going to do so by making it our own code we're going to do so by testing it and validating it but making sure it's fit for purpose so we're going to start debugging here and it's starting to move and that's starting to load okay perfect all right and we have Visual Studio open again I just want to go back while that's loading I'm going to go back again to the original code here look at how it's similar in multiple ways it actually said this was the first image and it picked up that I was matching the variable name with the method look at how it picked up and matched the variable name with the method for the new method it created right it just created this so it's new that it it kind of lined everything up for you and that that frustration I have sometimes feel when I'm trying to go to the docks and nothing matches the style of my particular project well that kind of particular problem goes away if we have if we ask questions in place like we did today so again we've come here doesn't look so this is my test um application there's an image in here but it didn't find it and I think I know what my problem is because frankly I did not um update the data um to have the hero image as the class tag so let's actually go dive in here let's think actually this right here so we want class equals hero- image and in fact I think that makes we have to restart we're going to save that and start debugging again so now we know it doesn't actually we've actually done actually a bit of unit testing there we know it doesn't work in the negative so it doesn't actually grab the image in fact it's the first image it only grabs the image there's some kind of condition that has to be met and lo and behold it's found the image it's the first image it's we know it doesn't work in the negative so we had to find it based on that class name being hero image however I'm going to be honest with you this does not look good because if you look at that image it's squashed right it's squashed on the left and right the height looks good but it looks like it squashed it down in terms of the width and I think we've gone now from being a c problem to a CSS problem so let's kind of dive in here cuz the image looks good in place but I think uh the way in which the CSS is using that is is is fundamentally wrong let's go ahead and go go back to code so this is the blog item summary this is the thing that is presenting the image right now and what I want to do is have a better representative CSS right I'm going to ask the question in line again I'm not going to tell it I'm doing CSS it's going to know I'm doing CSS because I've grounded it in the location of the question so I'm going to say again insert an image inside a new div that floats to the right with a maximum viewable width of 200 pixels and a maximum height of 250 pixels now there's a couple of CSS terms that I think are important here that I know but I'm not sure about the properties of so I'm going to ask it to maximize the height of the image and clip the Overflow for those who are CSS engineers in here you will notice I'm using language that I think expresses a particular intent even I feel I don't remember how to do that style I'm expressing the intent via this prompt and I'm hoping that's enough to get me started here so I'm going to go ahead and send that on [Music] over all right so actually like what it's got here I'm just roughly looking at it it looks pretty good I do have a problem with where it put it right and again probability non-determinism actually had this thing nailing it for a while but it's got it wrong now so I'm actually kind of going to go ahead and grab this code rather than insert and accept what co-pilot said I'm going to use my smarts as the actual engineer here to place this where more appropriate so I'm going to cancel that I copied the code I'm going to cancel that and I'm going to place the code that copilot found for me where I think it's appropriate also in addition to that if you look at the source that's actually not right right it's your image source it's telling me I I couldn't figure out what to put in this location and so I'm going to go ahead and hit model and put the image URL there so that should in fact see if we've got this uh correct let's kind of jump back over to uh the code here so it's as you can see it's kind of scrunched up here that image does not not look great but let's go try refreshing see what we get and that looks a lot better right that squashing is no longer there I have like gone from having a issue that no one wanted to touch based on regular Expressions um I've looked at existing code I've looked at how the existing code could be used as how I could better understand the existing code I've then looked at how I could have a more code based on the new code right based on the existing code and so that new code not only looks like the the existing code it kind of sits the fits the style it looks just like it then I also got some help with some CSS which I'm equally as bad at um but again with the help of co-pilot I was able to ask a good question grounded in the code I currently have and then make a really good good good uh attempt at fixing the problem but I'm going to be honest with you I trust nothing that I haven't figure it out myself and you know even if I figure it out myself I don't trust it so I what I would intend to do at this point is kind of go back because this code I want to make this my own I want to test this I want to validate it I want unit test surrounding this I want to make sure that it's good I want to be a good magnanimous uh open-source contributor so I'm going to hit alt slash again and um I'm going to hit the slash command again to I'm going to see if I can ask it to create create test create a test for me um and I want them to be U I want to include positive and negative tests right I'm being very specific because I want it to generate a specific type of response here so I'm going to ahead and hit enter and I'm going to just look at the Quality here I'm not going to necessarily put these these extens ition tests here but I do like what it's come up with it's tested the empty case when there is no issue and it checks to make sure it's tested the it contains an image but doesn't contain an hero image that's that's the second example there another test that it's done here would be this one should in fact return an image it has the hero image class should return it but my point here is I want to get started with testing this code and I want to make sure it's right under a variety of circumstances I want to have help making sure that it's my code now it's not just some code that I've generated but it's code that I've tested validated make sure that it's right so one of the other big tasks I have for dos blog is to make it part of what is known as the fediverse this is a Loosely Federated set of servers that talk to each other you can tweet and toot in between these um servers masteron is an example of of a fediverse enabled uh server and they can all talk to each other through what is called the activity Pub standard the activity Pub standard allows people to find out who lives where and to follow and to be followed um so I've got to think about how um dos blog can be part of this fediverse can be an active member and as I blog things and as people folks comment on my blog how that becomes part of the communication that underpins the fediverse so I've started to implement a controller called activity PB controller and I have a bunch of things like web finger which allows people to say does Mark live here at this particular um blog and part of the response there would include um links and Uris to things like my followers list and my following list and the type of person I am on this uh my inbox and outbox which it kind of represents activity um to the entire fediverse so the question I'm asking right now is as I kind of share these end points do all of these kind of Meet the standard do they work correctly it's a bunch of new code I'm worried about and I want to make it work make sure it's working correctly one of the ways we can do that obviously is through something like uh test Explorer I can have a bunch of tests running around these new um parts that are coming to dust blog I want to make sure they work as designed so I'm going to go ahead and run and debug some of these tests see if I can find any issues or see if there's see if everything's working as designed so I'm going to hit debug there and run this and use the debugger in this instance so this is uh currently compiling and getting ready to run the test and this is a great opportunity for and how here we go actually we have now an exception um uh so something is problematic something is some problem is occurring here within my code and it's my job now to kind of figure out what that is get to the bottom of it and see if I can resolve it it's something to do with this serialization issue in the past that has most kind of mostly the thought that come to my mind is that this might be something to do with the value associated with the thing we're trying to serialize uh we now have an option where we can ask co-pilots about this exception and what we're going to do then is give it the exception and the details around the exception to see if co-pilot can give us a help with this particular problem so I'm going to hit ask co-pilot and that will start a conversation now not in line but in the chat the reason why this is important with um with this kind of error is because you don't necessarily know um what the problem is there's lots of different things it could possibly be and so having an ongoing conversation um will help me kind of determine what things I want to figure out about the problem I'm facing and so the response I've Got Back here is that the value of Json is an empty string this could be an issue um as an empty string is not a valid Json and that's makes sense let's verify this by checking the value of Json before it passed from Json so it's got a hypothesis here but the hypothesis it needs more data to kind of be sure about the hypothesis and I absolutely love this conversational aspect of this kind of analysis right so it knows there there's a couple of different things it could be and to confirm it it's asking me to give a bit more information so it says let's verify this by checking the value of Json before it's passed to from Json to kind of understand what it's doing I'm going to go back up the call stack I'm going to go to the call stack and double click here maybe that'll make more sense let me close this so the information passed to from Jason um here in here is uh from this point here and this actually is an empty string here that's being passed so I'm going to go ahead um look at the locals here and that's an empty string for for serialized that's cool I um so really what I want to do at this point is let it know that this um this the value of serialized uh the value of serialized is an m string okay let's see what it does with that okay and now it's basically saying okay the issue if it's an empty string then we must have got something back from line 18 to make an EMP string that's logically correct so we know it's kind of continuing on this conversation like I've given it a bit of additional information now it's saying hey that is turned out to not be the to be the problem because you must have been passed that empty string from further up the call stack that's great this conversation continues and now it's saying I want to see a definition of the two Json I want to know um help me understand what two Json is doing by sharing a definition of it with me and then I can really give a good hypothesis because up until now it has to guess because I haven't explicitly given this information now it's asking me to give it so I'm going to go ahead and do pound and this is kind of a a really shortcut to kind of give me the active selection and that's I've got from line 23 to 35 that's exactly what it's giv me here so I'm going to give it that definition now that I've given you that definition do you have a suggestion on what the problem might in fact be let's see what it comes back with ah interesting it does have a good hypothesis it's basically saying because I didn't reset set the stream that's the pro that's essentially is what's causing this to get squirly in my test that's actually really interesting uh we we started off just assuming it was because it was an empty string but going back up the call Stat going back to the beginning now we get a really good hypothesis to test and again with everything we get here we we assume it's wrong until we test it until it becomes hours until we solidify it with testing so I'm going to preview that in place um again it's just seems like it's just fixing that one setting resetting the stream position accept that so I'm going to stop this I've accepted that new code in place let's go ahead go back to our test and run debug our test again and this time I hope we get a resolution so it's compiling again new code and again what I want to kind of emphasize here is that we have now a conversational aspect like the conversational part means I have multiple things this might be and this is happens with our debugging Journeys all the time and we get a hypothesis about the problem and we have several things it might be but we gather additional data and that additional data helps us uh figure out what the problem is um I think we okay here we go ah here it is and our test has in fact succeeded excellent so thank you so much for joining me today um it's been fun talking to you about co-pilot chat um these uh many of these features are currently available in preview today um C pilot chat I've got the links here aka.ms vs copilot chat and vs copilot are both uh the uh will take you straight to the extensions where you can install those with visual studio uh the only prerequisites here is that you'll need a co-pilot for individuals license or a co-pilot for business license for these extensions to work for you um I think you'll find you'll be way more productive with these features with net we're able to kind of figure out all Legacy code we're able to update Legacy code we're able to do this for c for CSS we're able to use it infused with the exception helper to give us clues about what problems might be I think this is kind of a compelling use case for net developers in visual studio um thanks very much for your time today

Channel: dotnet

Views: 19,102

Keywords: .NET

Id: nsSNVZF8NYo

Length: 28min 46sec (1726 seconds)

Published: Thu Nov 16 2023