Tips & Tricks: Get the Most Out of GitHub CoPilot | DevReach 2023

good morning good to see you all here good to see you back hopefully you've rested hopefully you didn't party too hard last night and eat too many finger foods uh we've got a fun talk here this morning uh tips and tricks get the most out of GitHub co-pilot but before we get into that I meant to do this yesterday but we did not have enough time I mentioned to you all yesterday in my intros we'll come past this that I've been here here is before uh this picture again is De reach 2013 and apparently in this picture I'm saying You must be this tall to attend um which you all pass that bar but since this is a moment of significance we're bringing Dev back here in Bulgaria you all should be part of this so let's take a selfie let's warm up here this morning be part of the the new Dev can I get everyone my arms long enough there we go say hi to everyone we'll post this later you're part of the new devre tradition all right now your arms are moving your blood's flowing we're waking up that's a good start uh if I did not see you yesterday or if you're just here for the first time today by way of introduction my name is Todd England I currently at Microsoft as part of the cloud advocacy team which is a devl team at Microsoft working across the entirety of Microsoft cloud and AI uh so if there's anything Microsoft related that you want to talk about talk to me and I will send you to the experts I am merely a router here uh if you need to find me or ask questions after today's session you can find me on pretty much all of the social uh that someone over 40 would be on at Todd England so pretty much Twitter and threads though I don't think threads is available here yet right no meta does not bring threads to Europe no no even head shakes we're not even sure what threads is like two two head shakes all right uh I also went back and found I mentioned to you all yesterday let's see how many people remember the first Dev reach that I spoke at anyone remember what year that was look at that some listeners you all get gold stars I have no other prizes for you today and I actually found I was trying to figure out what year I attended and I found out I wrote a blog post after I attended apparently however many 15 years ago I even forgot I wrote this so my own blog post came up in my own search so there you go and what I found funny about this is apparently there were DVDs produced of the event that's how far back that was we sent you the content on a disc no more but today we're here to talk about GitHub co-pilot your AI pair programmer and I'm curious as we get started we'll keep our blood moving our arms moving how many people in here have already done some work with GitHub co-pilot all right look around that's probably about half the room remember these hands these people have probably already learned things that I may not even talk about that they can tell you because a lot of what GitHub co-pilot does for you is about discovering things that are valid to your workflows so as as you use it you're going to find new and interesting ways for it to be more useful to you so talk to people that are using it talk to them about what they've found useful because at the end of the day as the name says it's really right there on the screen this is a pair programmer this is almost like having someone sitting there right next to you that you can ask questions of you can bounce ideas off of you can prompt for some help and they can give you an answer uh the more you work with it the more you realize that this is kind of an accelerant to it's already in your head and what we aim to do today in this session is both introduce you to kind of how this works but also give you some tips for how you can get the most out of this virtual PA programmer sitting next to you in your IDE so three things we'll cover today how does it work we'll start with that that'll be kind of brief and basic just so you know what's behind the magic so it's a little less magical and it's a little more of a tool for you uh what can it do so you can think of all the range of ways you can apply this to your work and of course we'll wrap up with how do you get it to make sure you can add it to your environment underneath GitHub co-pilot is something we talked about yesterday large language models and yesterday we went into this in depth today we will not uh but if you've ever used a search engine in the last 10 years and experienced something like this you without knowing it have in many ways been interacting with these capabilities of large language models and as we went through yesterday in a little more depth it's that ability to understand large sets of data and do a really good job of predicting what comes next based on a prompt or a sequence that came before it so apparently if you type in why don't Z into being the first and best completion to that is why don't zebras get ulcers uh I don't know why that's the most popular search for that but apparently it is point is that is large language models in action I further thought well maybe we could clarify this more with an illustration so I asked B chat to create an image that illustrates how llms work for me and it gave me this image um I think it nailed the task apparently you need a human brain a car some computers and and you have large language models working so there you go I didn't need to talk at all yesterday I could have just put this image up and been done fortunately I have a simpler explanation for GitHub co-pilot today and it really is just this that the way this works in the context of particularly GitHub co-pilot our coding tool is you get a lot of code a lot of examples of how code has been written before our training data and you build a model on that and so that's what getb co-pilot has as you build the model the model identifies the connections the patterns the predictability of what comes next based on all that pre-existing code and then from that it does a really good job of predicting completions to your code or to your comments and so fundamentally this is what's happening under the covers of GitHub copil and as we talked about yesterday in our talk remember these are not magical tools these are tools and they have a predictable way of functioning and that is very much based on your prompt and based on that probability uh distribution of potential completions but there are limitations and these limitations are important for us to understand especially as we begin using this as a tool to write code because if we understand the limitations of our tools we can anticipate them and also work around them to avoid some of the pitfalls that are potential when we start using these AI Tools in our workflow so first of all where do these limits exist uh the training data impacts the suggestions that makes sense what did we say yesterday we said models are trained on trained to fixed points in time with the data that they have and they do do not learn and they do not remember so the training data behind GitHub co-pilot is very similar it is based on a fixed point in time and as you might imagine it's going to be a lot better for code that has lots of examples to pull into that training data set so for example if you work with JavaScript or Java net python all these languages for which there's a lot of open- source code out there for get to train on you're going to get really good suggestions if you're working with cobal or other languages which perhaps don't have as many examples out there new and emerging languages you may not get the best suggestions today so keep that in mind because that may influence the kind of experience you have depending on the work you're doing fortunately a lot of us are working on these kind of core languages that it is very good at completing and we'll see that today GitHub co-pilot is not a compiler uh there was something else we talked about large language models not being able to do yesterday and that was they cannot perform actions and that is also true for GitHub co-pilot it cannot compile your code it does not know when it gives you back a code completion if that code is correct or if that code runs that's not what it does it just does a really good job of predicting based on code it's seen before what code it thinks should come next so it's up to you the pilot in this Arrangement pilot and co-pilot to understand whether that code is correct to use the tools of your IDE to see errors and correct them the GitHub co-pilot is not going to compile and check that for you so again you are the pilot make sure that you are taking that responsibility to work with what co-pilot suggests and finally the AI GitHub co-pilot can't read your mind that's a good thing I think we don't we don't want that but what does that mean for us that means in order to get good suggestions out of GitHub co-pilot we must provide good context we can't staple our head to the page as my math teacher used to say we have to get what's up here somewhere out there on the page so GitHub co-pilot knows what we're trying to do so the better we can do that the more context we can provide the better suggestions we're going to get now today as we work with get co-pilot we're going to be working inside of a couple of idees primarily vs code we'll also be doing a lot of our work today if the internet holds up uh in vs code inside of code spaces which GitHub code spaces is basically vs code in the browser with a runtime to build and run our code so uh very much kind of a flavor vs code we also do some work in Visual Studio 2022 and windows but there are other Integrations if you're not a vs or VSS code user here there are Integrations for jet brains idees neovim other plugins being made so GitHub co-pilot will generally work with your IDE and that's a good thing it allows you to build on the tools that are already there the syntax helpers that are already there and layer in the co-pilot goodness uh we'll take a look at this as we work with our tools and it's a little small up here but the other thing that that affords us are is new kinds of UI patterns for how we interact with co-pilot as we write code in line chat as an example of something that our editors can provide to make the whole GitHub co-pilot experience that much more powerful uh so this just recap I think you all understand this at this point how is this working what's happening when we're writing code we're going to write code inside of our editor it's going to send that code off as context to GitHub co-pilot which is then going to process it through a model in this case now a GPT uh flavor model on the back end and from that send back a suggestion that will then land directly inside of our editor that we the pilots of this can choose to accept reject or and this will come up frequently today to iterate to say that's close but not quite let's try again and we'll go through this flow until we find the code that perhaps best meets the scenario we're after the critical thing to being successful here and I think this is one of our last slides and we'll move over into demo for the most of the rest of our time is that context so before we jump into our demos and start doing some of this let me highlight for you six ways that are important for you to keep in mind to make sure you're giving the best context to GitHub co-pilot the first and maybe it's one of the least obvious is the actual open file in your editor next to the file you're working on GitHub co-pilot will attempt to take context from about two to three open files next to your other file you're working on and use that as context to inform the prompt or rather to inform the completion that comes back to you so today GitHub co-pilot does not have full visibility of all of the code in your project if the file is closed it does not see the context in that file it sees the file names it can see the structure so it has some idea of the kind of code you're working with based on file extensions and file names but it does not have access to the content so if you want to have some that your existing code as reference for GitHub co-pilot maybe to see your coding practices to see an example of something else you've done having those files open gives co-pilot that context a top level comment is also a valuable way to guide GitHub co-pilot this is like giving co-pilot a goal helping understand what you're trying to do in this file so a Topline comment like a console app that sorts planets by name and displays output on a terminal at the top of a file now all of the completions that follow know that that's what you're trying to do and so it can actually guide GitHub co-pilot to giving you better completions as you work through the rest of that file includes in references obviously are going to have value to GitHub co-pilot it's going to understand the libraries that you're working with meaningful names matter so if you've been writing code in your project using uh let's just say less than great coding standards that's going to show up when you start working with GitHub co-pilot it can infer a lot of intent and a lot of meaning out of things like your variable or function names for instance if we had a variable called VAR list of planets just by that name alone GitHub copilot can infer we're working with a list type uh we're dealing with some kind of object that might be named planets and it can start to look for other references in our code that may be relevant to that or can generate completions that may be more correct that variable name so as you're writing your code good coding practices matter and are valuable even more valuable when you're working with GitHub co-pilot uh and of course if you're working with things like Fu list I'm sure that was the other guy's problem before you inherited the code so now is your chance to improve the code base specific comments are also very valuable we of course we're all great developers you're here which means you're a great developer so I know you comment all of your code for the next person who has to work on it uh but if you don't or if you need an extra reason comments now are basically like telling GitHub copilot what you want to get done in very specific sections and it helps you get very targeted completions so we'll do a lot of this today so you can see how this works in action but targeted specific comments are a great way to not only get good GitHub co-pilot completions but to actually create a better more maintainable code base and lastly sample code This falls into another concept we identified yesterday the notion of few shot uh completions where we are basically helping a large language model give us a better answer by showing it some examples first of what we want the answer to be sample code or existing code in your project serves that function it's effectively training or grounding the model and the kind of answers we want and specifically to the kind of code you're looking for so keep all of this in mind keep these different contexts in mind because they're going to come into play as we work through our demos and we'll see how they impact the code that we get last slide here uh what is GitHub co-pilot good for uh well the first is probably the most obvious the one we drift to without even thinking about it it's great at helping us write basic code faster I mean that's kind of what we' assume it's here to accelerate the job of writing code but what you may not know is it's good for a lot of other things in our process as developers it can help us remember stuff we forgot in fact I find a GitHub co-pilot's even better for an experienced developer than a brand new developer because you need to know and be able to recognize that doesn't look right and go back and correct it or say yep that's the thing I remember that I just forgot it or I didn't want to go Google search find this on stack Overflow copy paste bring it over it's perfect for those little API endpoints or those CSS class names or whatever it may be that you kind of know but you don't really remember 100% GitHub co-pilot can do that for you now also makes it great at extending and refactoring your existing code it can work on top of code and change code in very easily so you don't have to figure out complicated rejects to go find and replace you can do all of that uh really useful for explaining unfamiliar code let's say you inherited a code base or you joined a project and the projects got a lot of code that you need to go understand GitHub co-pilot can explain code to you and in fact it can also help you document that code if the last guy forgot to document it so it can be helpful for those tasks uh that's very related to the next bullet it can help you understand error messages it can even help you fix errors in your project and beyond that it can add tests to your project for you I think one of the talks yesterday uh talked a bit about how we all would perhaps add more tests if we had more time but we're not lazy developers we're rushed developers well GitHub co-pilot can actually help us have a more complete test coverage by adding tests for us and many other things in fact at the end of today's talk we'll talk about other capabilities GitHub co-pilots going to help us with like pull requests and things that are coming in the future but even today there's a lot that it can help us do here beyond the basics of writing code good makes sense all right see some head nods this side of the room is nodding this side of room still early I know it's late night let's get into it and let's have some fun so as I said at the outset here uh we are going to be trying to do this inside of GitHub code spaces which means that we're doing a little bit of a finger cross here that our Internet's good enough for what we want to do we're also working with co-pilot and co-pilot like all large language models is not deterministic which means that I have no idea actually what's going to happen here uh GitHub co-pilot can provide a different answer every time I ask the same question so we're going to be doing very live demos which means we'll find out together exactly what happens but that's okay because this is a great example of how we learn from GitHub co-pilot in real time and learn how to adapt to uh the answers it gives us so while that is finalizing make sure my others are ready for us good great we'll start here all right so we have here can you all see that in the the row there good great we have a simple script file let's just start with something basic uh and I'm going to give you about five tips as we go through this and our first tip is that co-pilot can give us better answers when we provide single specific short comments single specific and short so let's say we want a function that can remove REM HTML from a string so I can come in here and I can add a comment uh create a function that sanitizes HTML it's pretty short let's see if I hit enter what we get from that all right so right now we can see that there's some text there that gray text that's what we in GitHub copilot call a ghost text that's its suggestion for what should come next here and if I like that suggestion I can just hit tab to accept it and now you can see it's continuing to complete and now it gives me even more suggestion for what can complete this and if I like it I can hit Tab and take that suggestion as well and here we go we have an answer we have a completion to create a function that sanitizes HTML uh is this correct Let's test our our developers in the room no no someone want to search it and find out so here's another tip for you with GitHub code co-pilot and uh and everything is you should trust but verify trust that it's probably giving you the right thing but don't trust it blindly either use your knowledge as a developer to know that that's not right or go verify it either through traditional means like searching like is this actually right or we can actually have GitHub copilot explain this to me I can rightclick this uh and I can actually right click here and see there's a co-pilot option inside of my VSS code menu where you can see a few things we'll be doing today one of the options is to explain this so I can click explain this and now I get What's called the GitHub co-pilot chat sidebar which I have docked in my vs code secondary sidebar if you're not familiar vs code can have two sidebars one on the left one on the right it's kind of useful if you dock the chat on the right side for uh easier positioning of your boxes and if we look at what the explanation is here explain this it creates an element we add the string we then put that into this that blah blah blah I'll tell you this is correct it's unusual it's kind of clever but it actually is correct the one thing though that this requires to work is obviously access to the document object which only exists if we are running in a web context so this is correct if my javascript's only going to ever run in a web context let's say though that we know our code might run other places we might running it in a node environment or some place that doesn't have the document object so maybe we want a slightly different approach to this great third tip is and I mentioned already before to iterate iterate iterate iterate don't take the first thing you get back from getb co-pilot if you think there could be a better way to do it so single short specific trust but verify iterate so let's come back here and let's say you know what this is a very short and specific comment but I think we could probably make make it even more specific to get more of the answer that we want so I could say create a function that sanitizes as kind of an ambiguous word what does sanitize mean so let's say that removes all HTML from a string uh now we have function strip HTML and it's giving us the same completion so again it's different prompt very similar completion so we haven't quite tackled the task that we want here let's see if we can correct that by coming up here and adding something else uh without using the document object no it gave us the same completion and we are well at the territory of I've never seen GitHub co-pilot give me these answers before so we're going to keep trying this we're going to live iterate together I'm like no GitHub cop that's not what I want at all so so let's just go ahead and prompt it more directly create a function that removes all HML from a string using Rex there now I've got something that I know or I'm pretty sure removes all HTML tags from a string and will work anywhere that my application runs because this is now just Rex there's no dependency on a document object again I am the pilot I both code technically works but I know how to steer my code towards what it needs to do and now we have something with some Rex now you all are developers I know you all read Rex fluently and so you automatically know that that is correct I don't read Rex fluently so again the explain option is a great thing for us here uh you saw me before right click on code and say come here explain explain this we can also use something inside of vs code called the inline chat and by hitting command I I get this little popup here right in the context of where my code is and I can do some more with this later but for now I'm just going to say slash explain a slash command and now it pops again over into our chat and now it's going to give me a full explanation of how that Rex Works what it's doing and then make me more comfortable that I have the right Rex pattern from GitHub co-pilot Trust but verify make sense all right one last iteration on this we'll move on to the next demo what's an even shorter and more efficient way I could have prompted GitHub co-pilot to do what we're doing right now any ideas what what did I hear naming the function right that's exactly it so I said before that what you name variables and uh object objects matter so what if we got rid of all this and we just said function uh remove HTML from string and look at that now I just type in the function name and based on the function name alone it intu what I'm trying to do and provides me the same completion as when we wrote that full comment so you can similarly guide co-pilot to giving you these useful completions just by having descriptive useful names on top of your uh on or in your code all right so let's take this further we're going to go into some other demos but I think we can keep going deeper on this one uh I talked to you about explain what if we want to document this for the next person you saw we had another slash command inside of co-pilot I can come in here and select this code hit command I again go to my slash commands slash and we see we have another option in here doc document so I can hit that this is going to help me automatically add documentation to my methods to my project so now that one task that we all are like ah I'll get to it tomorrow I need to write more code today no excuse now if I like this I can hit accept and now I have a documented method here removes HTML tags from a given string my parameters and my return types are documented all I had to do is type slash do and I got an improvement to my code base so another thing that GitHub co-pilot can help you do let's go further what's the other thing that I'd love to skip past right now and not do live on a stage in front of you add tests but let's see if our code actually works by adding some tests now this sample project we're in here right now has no tests of course it doesn't it's a demo project I don't test my demo projects so what's going to happen when I try to add tests to this file we have no idea do we it's a a mystery let's find out what happens so I'm going to come in here and go back to my inline chat you're going to see this motion a lot the inline chat is going to become your probably your preferred way of interacting with GitHub co-pilot outside of ghost text so I'll say slash tests without any other context I could prompt it further but I'm just going to give it the default uh command here it's going to think about this for a moment grab some responses and here we go now we have something that said saying it's it looks like some tests for us it's describing our tests and our different output conditions and it's putting it inside of a new file called script. test.js so it's automatically recognizing that there should be a new file for our tests all from my SL test command well let's let's do this let's see what happens so I'm going to go ahead and say accept this you can see now it's created the new file for me over here script. test.js and here it is next to my my original file go ahead and close this uh this is a new project to me it's just add a test I don't have tests what do I do now what's my next move well I have a co-pilot next to me I have a friend on stage with me you can't see them they're buried inside my computer I can ask them what do I do next and this is where GitHub co-pilot chat can be very useful this chat bar can help you answer any questions related to coding it won't tell you what the meaning of life is it won't tell you a joke but it will answer questions about coding so I can ask GitHub co-pilot chat here how do I run this test and it's going to go think about this to run this test you need a testing framework installed uh it's suggesting that I have the just testing framework be use assuming it's already installed you can then run npm test blah blah blah blah blah so let's say I don't have installed how how do I do I have it I don't think I do how do I add the just testing framework to add the framework you follow these steps okay that seems simple enough so let's open up our terminal we will take the commands that it gives us and we will find our terminal here so the first thing it suggests we should do is mpm install D- saave devj all right again internet play nice we'll get that added it also gives us the yarn option so it's already uh even better than I am it's suggesting a locked package manager like yarn we're just going use mpm this morning but it's giving you some options there you're the pilot you pick uh it's suggesting that I should have a just. config.js file looking for my test so here we see some little hover options pop up you see this little UI here with the page the little split box and dots if I click on this I can actually say insert this into a new file without doing any kind of copy paste so I'll just click this one button and it suggested that this should be in a new file called uh just. config.js J.C config.js all right sure why not uh it's kind of suggesting I should have my tests in a tests folder it's not how my project is configured so we're going to just go ahead and back that out and hope that we didn't make it too broken we'll find out we need a a test we da da da and then okay great I think that's probably close enough let's see what happens if we run our tests so it says do this just. script. test.js yes you notice that it already knows what the name of that test file is that we created or that it helped us create the script. test.js it has that context because it can see that file in my project so that's a a explanation specific to the code I'm working on right now and we'll hit this and see what happens ah it's not found so now what now it led me down a dark alley and I'm stuck what do I do next well it's supposedly still my co-pilot I can go ask it for some more help so I can right click here in the terminal so in my terminal output inside of vs code just like we're doing for our code before in fact let me get the whole message here rightclick co-pilot explained this we can have co-pilot explain errors to us as well and it will give us guidance on how to get out of those errors so it says that this command is being executed in the terminal but it's not working but it's not working I'm sorry to hear that it's not working can you please provide more information so you can see and I'm not going to go through all of this you can keep going through a conversation to talk about the problems you're having get guidance it'll give you answers to keep you moving and I find it just makes you get stuck for a shorter period of time if I were working on a project before get up co-pilot and I got derailed like this I've probably left my editor now I'm in a brow I'm searching I'm stack overflowing I'm looking through a blog post finding the thing I need and I'm well outside of the flow of writing my code in my editor by working this problem through co-pilot in my editor I stay closer to the flow of what I'm doing find my answer faster and then keep moving through my project we'll come back to this later but let's move on to another demo um for the sake of time here and the next demo I'm going to pull up is a simple HTML page let's get some of this out of our way here bury this uh and if you've written HTML then this should not look hard uh this is my best HTML to date I've got an HTML tag I've got a header I've got a footer I've got a main area it's impressive right it's not impressive don't nod for that that's not impressive but we're going to do something with this to make this look a little more interesting let's preview it in our internal browser first little tip here if you're working inside of code spaces and you get this problem um where my internal preview is not working codes spaces will expose a port for us to be able to browse our live preview pages but we do have to access that first in the real browser sometimes to get the co-pilot browser working so once I've accessed that once I can come back in here and now I get the live preview of my code here in this right tab I'm still going to have a problem with real- time updates if I come change header my header and I take a couple uh characters off you can see that the page on the right did not update when I'm using the live preview inside of vs code this should be a real time update that's happening on the right side that is also a code spaces Quirk and I can fix that by just coming back down here to my ports that codes spaces has exposed I see my ports that it's autof forwarding and just accessing those ports inside of the browser so I click it again I see upgrade required come back over here to code spaces kill my life prev VI we'll look at it one more time now when I make a change let's say my head to my header we can see that it updates in real time on the right so that's just kind of a bonus tip for you if you're working with code spaces and you're not seeing your live previews make sure your ports have been allowed and that they've been cleared so that you get those real time updates if you're doing this kind of work inside of code spaces all right so we have a blank page that is connected to a CSS file that CSS file is here and that CS SS file is blank one of the things we talked about for giving context to co-pilot is giving it a goal let it know what you're trying to do so let's do that for our CSS file let's see if co-pilot knows CSS because nobody knows CSS create a style sheet with a header and footer that are on the top and bottom of the page uh oh it's starting to help me complete this respectively the header and footer should be 100% wide oh look at that it's trying to help me it's even predicting what I may want to do here let's maybe give myself a little more room uh sure I'll take that and the header should this is an interesting game of tell what does it think the header should do the header should I it's oh have a background color yeah I like that okay and the footer any ideas okay sure we'll take that uh and let's see the all right now we're getting a little too specific let me do the whole stylesheet up here I'll say the main area should be scrollable all right that's a pretty specific comment I've given a description a goal of what I want my stylesheet to be let's see if it can create my styles for me for this page so I'm going to come outside of this come down here hit enter wait for some ghost text h all right well a path reference could be useful I don't think it's really what I need here but let's see what happens if I take that and go to my next comment well that's definitely not right now we're writing HTML in my stylesheet so again you are the pilot and this is where you EXP experience knowing kind of the right direction is going to help you get more out of co-pilot I can already tell co-pilot's going down the wrong path so one of the things that you may have to do occasionally with co-pilot is nudge it nudge it in the right direction and with a little nudge it can give you a more complete and correct completion so I know the way I probably want to start my stylesheet is by defining a style for the overall HTML and body tag so I'm just going to type HTML comma and let's see if that warms up co-pilot a bit Ah that's better now we have a style for body and for something that's going to apply to my whole page I'll tab accept that let's keep going see if co-pilot's on a roll now all right style for my body hey Flex layout that's something I can't do uh header all right that's conforming to our comment background and height let's keep going there's our main area keep going there's our footer and that's pretty much all we gave it a prompt for so we're off to a good start we gave it a comment it has a header to footer that are stuck to the top and the bottom of the page regardless of how much content is there there are fixed height and they're 100% width so we see it's doing what we asked and it's rapidly building our stylesheet for us now the one thing we can't confirm here is whether or not that main middle area is scrollable because we have no content there so we need some content let's go add some lauram ipsum there to see if this is in fact scrollable so let's come back over here to our main area and based on what we've done so far we might assume that this would be a perfect place to add an HTML comment to get some co-pilot help in our HTML for lurm ipsum so let's just say in an HTML comment uh generate 100 lines of lauram ipsum all right hit enter well we got a suggestion but cop by suggesting some PHP uh well I have one problem and if I add the PHP then I'll have two problems uh so I don't think that's correct but it also highlights the kind of use case that is not great for co-pilot and when I say co-pilot that's short hand for GitHub co-pilot here because I know Microsoft has many co-pilots uh we talked yesterday about how large language models work and we talked about this notion of a token size and a token limit that applies to GitHub co-pilot as well there is a token limit and everything that we have sent it as context and everything that it has sent back to us is part of that token limit and so when we go ask GitHub co-pilot to generate a hundred lines of Lauren niyum that's going to consume a lot of tokens which first of all means it's not a very efficient way to use GitHub co-pilot but it also means that it's not the kind of thing GitHub copilot is optimized to do so keep in mind the kind of thing you're trying to do and whether it's the right kind of application for co-pilot generating lots of a thing not a GitHub co-pilot use case but fortunately we're in our editor and our editor is pretty good at this so I can come in here and I can say instead of this just lauram which is a shorthand emit abbreviation for lauram ipsum oh but let's do this first uh let me type lauram IPS yeah yeah when I say typing lauram we do get the co-pilot completion ghost text for what it thinks is lur ipsum so we can see some Laur ipsum ghost text coming up here so let me actually just take this and now you can see if you wanted to add lauram ipsum with GitHub co-pilot you could do it line by line so I could say tab enter tab well let me get the prompt enter let it prompt me enter so this is the approach you would end up with Laura mson but what is the other thing you know if notice about this text if you've been doing web development for long or any kind of development does that look like the lower some you're used to seeing no and again get up co-pilot large language models are not fact databases it's not looking up Lauren ipsum and giving it to you it's just kind of weirdly guessing Lauren ipsum and it looks weird it's not correct forever correct Laur ipsum ever needs to be so you could do this with co-pilot but again not efficient and probably not the result You're Expecting so let's do this in a slightly more efficient way using vs code we will instead just come in here and say laurum and we can just say times 100 and vs code will automatically expand that out to be 100 instances of that expanded shortcut and now we have 100 lines of actual laurum ipsum so now we are much closer to what we are after and if we come over here then to our page we can see hm well that is also not quite right because now our footer been push the bottom and that scrollable middle area is consuming the whole page so we need to do some refactoring so let's come back over over here and attempt to improve the code that co-pilot has already given us now if I knew where the code was wrong I could go straight to that spot and start doing some prompts or some comments to fixing the code if I don't know where to start I can use GitHub co-pilot chat we've seen chat in line we've seen chat in the sidebar we also can do chat up here in our Omni bar let me see if I can grab this co-pilot quick chat [Music] uh quick I don't see quick chat so we're just going to do this with regular chat it's there somewhere how do I make the main content area scrollable and the footer always shown on the bottom of the page uh I'm correcting my typos just cuz I have that's my issue uh GitHub co-pilot can easily understand what you mean if you have typos so if you have typos don't worry about it yesterday one of the talks shared how large language models with tokens can understand what you mean even when you make those mistakes but let's see if we get an answer here so it's saying to make the main content area scrollable in the footer always from the bottom of the page you should do this you should have main Flex one overflow Auto well we have that and your footer should have this okay so let's maybe take this so I can just copy this snip it out that works for this case replace that uh save that let's see if we're getting closer to what we're after let's collapse this did that work for us there we go we had to refresh it but now our footer is there so it's getting us closer we are now iterated to a closer state to what we are after uh we now can see that the Scrolls but now our header Scrolls off the page so we're we're closer so now say I know the problem now as my header so I can come up back here to my inline copilot chat and say just here make the header always visible on the page and so now when I select my code in line and give it this prompt we get this diff View and whether you're using vs code or Visual Studio whenever you do this in line it's going to show you the proposed change and you can choose to accept C it or discard it and so it's saying hey we suggest that you replace what you got there rather you add what you've got there this code and if I like it I can click accept and now we can see all right now my content area is scrolling uh in between my header and footer so I'm iterating on my code iterate iterate iterate to get to my result that I want still not perfect still some refinement we could do here but you get the idea of the workflow of using chat using inline chat and comments well we haven't really used comments much we could go a bit further one of the things I said that GitHub co-pilot can do well for you is it can help you remember stuff you forgot uh how many people know dead cold how to do linear gradients in CSS nobody how many people here are web developers all right this half of the room and about a third of this room uh so we're all web developers by profession but we don't really remember how to do linear gradients perfectly so let's have that done for us let me add a comment inside of my style here and say uh linear a rainbow linear gradient background let's see what happens in fact let's get rid of this background because we don't need it let's see if get up co-pilot can think through us you notice I didn't even spell it right I left off the D in background it doesn't care it knows what I'm doing it's giving me some code suggestion here let's go and take that and see if that works and there we go a complex linear gradients background uh we're really getting to that geoc cities 1990 website we're after here and I'm sure we can reach it if we just try hard enough uh how about CSS transitions animations know it cold ah Come write it for me right now help me out my new co-pilot no no no no no you stay seated my co-pilot will do this work for me uh let's say we want uh expand height by 50 pixels on Hover using transitions uh transition height okay that's the thing we want to affect will give you more than this add box Shadow well now we're off into a wrong deep end so this is again where you decide the right place and the right iteration this may have been better as an inline chat as opposed to a specific comment to get Ghost text so in fact if I take this content here say you know what maybe this is a little too much for just getting a ghost text completion I want a more complete chunk of code we'll come in here and we'll use the inline chat put that same uh statement in here and we'll see that we'll get a slightly different kind of answer we're going to get an answer that looks at a wider bit of context than where our cursor is in the file and it should show me now ah yes here's what you want you want have transition ease out and you want to have a new style for the state of hover that changes the height so I'm going to go ahead and accept this and now when I hover over I'm getting my CSS transition impressive yes that is more impressive than I showed you before that's the best we're going to have today folks so if you're not impressed by that we only have 10 more minutes to suffer through this then let's move on let's say you are now working on on a project that is more than a simple demo you have joined a bigger project that has existing code AS is more likely and so in those cases you have code practices code standards file naming conventions that you would probably prefer continue to extend into any new code you add in your project and so what we want to do here is we have a very simple canonical to-do app we have a to-do service uh written in typescript and what we want to do management has come they've said you know what this app is great at handling to-dos now it needs to handle tasks I'm like damn it this is a to-do app not a tasks app but management spoke how are we going to do this well we have a to-do service maybe we can just go ahead and add a task service to this application that makes sense and we can see in our current to-do service that we're using Cosmos DB as our backing store door and you can see and we'll get to this in a moment that we have a pretty wonky coding standard that our our intern added to the code base where every other character is capitalized we may want to change that later but for now that is what our code base has let's try this in two different ways to see what happens when we add different context to GitHub copilot I'm going to close that file that means it's no longer available to co-pilot for context I'm going to come to chat we just got our new command and I'm going to say say add a service to this project for handling handling tasks so it does have the context of my file names in my solution you can see what else is there so that's going to guide it let's see how it helps me add this to my project uh and in this case I'm asking it to suggest an entire file for me and there are things in co-pilot today which can actually generate an entire workspace that's kind of kind of at the bleeding edge of where Co co-pilot is but I'd say that's maybe not ready for prime time but creating whole files like this it can do and we can see here that it has suggested for me a task service with a reasonable layout I create a find all a find one the problem is this looks nothing like my to-do service right this is kind of just all out on an island so I could take this but it would mean me going back and doing a lot of work to make it conform to my other file so let's open our to-do Service First now we have this open in our editor and let's ask it the same question add a service to this project for handling tasks so now it's suggesting to me something that looks a lot more like my existing project you can see that we now are using Cosmos DB as our backing container over here on the right and we we have get tasks which is like get to-dos add tasks which is like add Todo uh in previous attempts at this it has even emulated my terrible coding Convention of the every other character is eased here it's saying you know what that's dumb uh I'm going to give you a better way to do it but you can see right by having the file open I get a much more contextually accurate suggestion so if I wanted to put this in my project I would just come up here click these three buttons insert to a new file it already suggested a file name for me task. service task task. service.ts and now we have some red squiggly we could use co-pilot to explain the red squigglies to us and we could work through this and take it to completion but you can see here again how context matters having the right file open at the right time informs co-pilot and gives me a much more correct answer for my project and my coding standards how about this mess how do I improve this I talked about the refactoring capabilities of co-pilot I'm going to come in here and clean up this code base I don't know the reject to go fix this but I don't have to I can just come select this code here go to my inline chat and say make the function names camel case and so just by using a plain English statement here a statement that doesn't require any complex rejects or understanding what I want to do you can see it's giving me a diff view here which is getting rid of all of the terribleness that I added my file and I can accept that and move on the other thing I've not shown you but is also here is I could discard this I could say you know what I'm not comfortable committing what you've suggested to my code but I can discard it to a clipboard or discard it to a new file so maybe I say I like your idea but I don't want it to directly edit my file I just want to take it to the clipboard maybe work with it some more and then I'll bring it back in when I'm ready so you do have these other options in the discard menu if you don't want to directly accept a suggestion in your project so I'll click accept and there we go our project is improved our task is added and we can move forward in our code base makes sense last demo here and then we'll get to kind of our wrapup and for the last demo I'm going to jump over to visual studio 2022 now everything we've done so far in co-pilot in Visual Studio code you can do in Visual Studio we have our chat GitHub chat on the side here we have GitHub co-pilot chat sidebar which you can interact with we have our inline chat which if you right click you can see ask co-pilot and the keyboard shortcut here is alt slash to get the inline chat just like we've had before so all of that's here so we're not going to repeat that because that's just the same thing in a different context what I am going to do is I'm going to run this simple console app so you can see that all this app is doing is animating a string of characters across the string across the screen I want to break this app I want this app to crash so that we can use another capability of co-pilot in Visual Studio which is helping us understand exceptions in the debugging process so how do I break this application well I can ask co-pilot to do that for me so I can come in here and I can use my inline chat so alt slash uh add code that will cause this application to crash with with a stack Overflow air because of course it should be a stack Overflow air so let's see what co-pilot suggests to us to crash this application it says I should call a recursive method that calls itself uh and that will crash my app that seems like a pretty good way to crash my app so I'm going to go ahead and accept that let's run this and let's see if co-pilot did what we asked it to do so my application runs yep stack Overflow error we have crashed our application thank you co-pilot but for our use today we care about this inside of vs let me collapse these things a bit so we can see we have our unhandled error exception uh and how many times have we hit these errors and we're like what does that mean I don't know where to start with this error well now directly inside of Visual Studio when we have co-pilot we have this ask co-pilot option here so we can ask co-pilot to explain this current exception to us and it's telling us hey you got a stack Overflow air and hey dummy it's caused by this recursive method and you can probably fix it if you get rid of that or cause an escape condition for your recursive method so it's directing me right to the solution and helping me understand the error So within Visual Studio you now have the ability to use co-pilot to understand your exceptions to understand your CPU analysis as you're debugging all kinds of additional Integrations to help you make your experience as a developer more productive and that's what we've talked about all morning today you can use to write code and so much more in vssn vs code cool good all right we got two minutes to drive this all the way to the finish line so let's make sure we recap so you remember something from this morning tip recap single specific short that's probably tip number one as you're working with co-pilot make sure that you're using those prompts you're using those comments to guide it in the direction that you want co-pilot loves patterns we saw how well it does at helping us understand things like Rex it also works great for KRON job syntax things that computers can read well that we can't GitHub cop's great at understanding creating and explaining that to us the meat bags trust but verify we did that this morning take the code from GitHub co-pilot but you're the pilot understand if it's right or wrong and guide it back on track when it's off context to is critical we talked a lot about how context influences these uh completions you saw some of that in action and iterate iterate iterate don't take the first thing it gives you coming soon there will be more things GitHub co-pilot can do for you for instance GitHub co-pilot for pole requests can help you accelerate the process of doing uh quality pull requests and there's more coming so if you want to see what's coming up next head out to github.com Features preview you can see some of the new capabilities coming soon for cop sign up for weight lists a great way to see what's just around the corner for these tools and I'll have a URL here at the end for you if you want to see more of the tips like we were talking about today in action the vscode YouTube channel youtube.com/ code is full of YouTube shorts cuz I don't know how you all sat here for an hour but these things are only 60 seconds and that's about my attention span so if you want to just get that 60-second hit of what we talked about this is the place to go you can find a lot more co-pilot and vs code help there uh it's for individuals in business we won't talk about this just know you can start it for yourself but if you're a Dev manager or you want to get this for your Dev team there are versions of this for business that give you even more control over how your team uses it lastly co-pilot Adventures is something new that we're working on within my team to try to give you a fun way to step away from the code you write every day and try to write code you've never written before using co-pilot so we've got some Adventures some puzzles to solve and the goal is to use co-pilot to help you solve that puzzle quickly so if you want to give this a try it's very new head over to akams copilot Adventures uh and there's beginner intermediate and advanced puzzles there I don't know that we have any prizes today other than just good job uh but it's a fun way to go crack open some new problems and see how co-pilot can be your assistant and then bring that back back to your main code base now we all have seen the AI hype out there uh we've all seen the fear uncertainty and doubt that things like gith up co-pilot they're going to take our jobs as developers uh but that's not the case and I love this tweet because just being able to write code is not the job you all are the pilots you all are the experts and this is a tool and understanding how our tools work allow us to make them part of our process allow us to understand their limits and ultimately just be more effective happier programmers as we create our applications thank you all very much for an hour and one minute of your time have a great Dev reach thank you

Channel: Progress Telerik

Views: 20,735

Keywords: Telerik, ai, github, github copilot, github copilot tips and tricks, github copilot ai, github copilot tutorial, github copilot vscode, github copilot visual studio, GitHub Copilot just got exponentially smarter

Id: rvJF5tb8cdk

Length: 59min 42sec (3582 seconds)

Published: Wed Nov 22 2023