Coding with an AI pair programmer: Getting started with GitHub Copilot

134.63k views4955 WordsCopy TextShare
GitHub
The explosion of programming languages and frameworks has ironically made development more difficult...
Video Transcript:
good morning good afternoon good evening depending on where in the world you happen to be my name is Christopher Harrison I'm a senior developer Advocate at GitHub and I'm really excited to talk today about GitHub co-pilot and about how to get the most out of this tool that one thing that we will sometimes forget when we're looking at these AI tools is the fact that they are tools they can often feel like magic I type out a few words and voila I've got this really really cool thing but at the end of the day it's
a tool just like our IDE and we should spend a little bit of time seeing how we can get the most out of it so I want to start off by talking a little bit about GitHub co-pilot and how it works behind the scenes and then we'll get into some tips and tricks that you can start to implement as you get in and explore the tool so what is GitHub copilot so getup co-pilot is a suite of tools I'm going to be primarily focused in on code completion so this is the embedded experience inside of
your IDE inside of your editor where as you add in comments as you add in code it's then going to generate suggestions generate what it thinks you are looking for based on that information so how does it do its thing behind the scenes well as you're typing out your code as you're typing out your comments context to sent up to GitHub co-pilot I'm going to talk about that context in just a moment but for right now let's focus in on that processing so that context is sent up to GitHub co-pilot GitHub co-pilot then uses the
open AI llm behind the scenes sees what it is that you're trying to do and then in turn generates suggestions and send those uh sends those down to your IDE you can then accept those reject those accept and modify use that as the foundation and it really does help keep you in the zone and help you avoid having to go off and maybe look up obscure syntax and things like that now let's talk a bit about that context because a lot of times there's some confusion about this exactly what is going to be sent up
to GitHub co-pilot well the first and kind of the most obvious is the file that you are currently working on and that's going to include the entire eny of the file so it's not just from where my cursor is and everything above it but rather it's the uh start of the file the bottom of the file the middle of the file so if I'm going in and I'm making updates I'm adding new code I'm making changes it's going to look at the entirety of the file not just from the cursor and above the next big
thing is the tabs that are open inside of your IDE this sometimes causes causes confusion and I'll admit for me personally it also caused a little bit of confusion because I honestly did think that it sent up the entirety of my project and if we stop and think about that that would be an awful lot of context for co-pilot to try and figure out try to parse out try to figure out what's most important because like if I think about you know reading a a very long article I want to focus in on what's most
important and if there's like you know 5,000 words and this is really the only section that I'm interested in for this moment the rest of that becomes a little bit superus so we want to focus GitHub co-pilot's attention on what's most important and that's where those tabs come into play it's going to focus in on what's most important based on those tabs additionally it's also going to start from the out or inside and work its way out so the tabs it will start with are the ones that are closest to the tab that I am
currently working on now one thing that sometimes people will do is they'll get a little bit too focused on trying to control the tabs on trying to control the context that's going to be sent up and honestly if we think about the way that we typically write code that if you're anything like me and I know I am that I will open up a file I'll make some modific I'm going to open up a related file I'm going to make some modifications I'm going to open up another related file and this is normally the way
that we wind up doing our work so by having GitHub co-pilot focus in on those tabs it's typically naturally automatically going to get the files that are already most related to what it is that I'm doing now if I'm shifting tasks if I'm maybe going to be taking a look at something that's a new feature that I'll be implementing or if I know that I'm going to be working with a library or framework that co-pilot has never seen before then I might go ahead and uh very specifically open up a file open up some representative
example of what it is that I'm building or maybe I'm switching tasks or maybe I am not getting the suggestions that I'm looking for back from GitHub co-pilot then at that point I might take another look at the files that I have open and maybe readjust at that point but again I really do want to highlight the fact that you will find most of the time just through your normal usage patterns of an IDE of your editor that you'll just inherently be opening up the files that are most closely related to what it is that
you are working on now let's get in and start to kind of build upon that and see how we can get the most out of this tool and I'm going to potentially introduce a term that's that's new to you a thing called prompt crafting and in a nutshell this is really about how it is that we are going to phrase and type out our comments phrase and type out our code phrase and type out our prompts to get the most out of these tools that as I highlighted at the start AI is a tool and
I really do want to make sure that I've spent a little bit of time learning how to get the most out of it just like with my IDE this is what prompt crafting is all about now if we break this down into a couple of components about how it is that we can help GitHub co-pilot help us the first is going to be the context this is that surrounding information what is it that we're trying to build how is it that we are trying to build it to start to then drill a little bit further
down the next is the intent what is it that I'm doing how is it that I'm trying to do why is it that I am trying to build that out next is the clarity as a friend of mine likes to joke don't use a big word when a diminutive one would use that as I'm typing in my comment as I'm trying to describe what it is that I'm doing I want to make sure that I'm clear so I might start to avoid a lot uh vernacular I might try to avoid maybe abbreviations that make sense
to me in internally but might not be as clear might not Uh define truly what it is that I am trying to build last but not least is specificity this is where I'm going to get in and identify exactly what it is that I want let's take for example the phrase go get me some ice cream now I've provided enough information to complete that task you know that you should go off and go grab some ice cream that's wonderful but what flavor of ice cream what vessel should there be sprinkles don't know so have I
given enough information to complete the task yeah am I going to be satisfied with the result maybe not because I'm going to be looking for salted caramel in a waffle cone and the answer is always sprinkles yes always sprinkles so what I really wanted to do if I was going to craft that out say using prom crafting is make sure that I'm providing all of that specificity all of that information up front and this is one of the big mistakes that I see developers make when they first get in and start playing around with co-pilot
that they assume oh I can just type out a couple of words I can type out a couple of sentences and voila I'm going to get this very big thing that's not really how it works that we want to make sure that we're providing good clear prompts I think the best way to do this is really start to put it into action so before before I get into this demo I promise you there's going to be a demo here in just a moment let's take a look at a couple of real quick best practices first
up is describe the goal I like to view this as adding a header if you will to the file this doesn't have to be anything real indepth per se just three four quick sentences describing what it is that I'm looking to build if the framework isn't uh applied based on the file that I'm working on maybe I'll add that in you know kind of what's the goal how is it that I'm trying to do this just couple three lines up at the very top add those in next is be flexible we always need to remember
that AI tools are probabilistic not deterministic and so what this means is that I could be in the exact same scenario I could type out a comment I could type out a phrase and get one suggestion and and then in that exact same scenario the next day I might get back something different the tools are probabilistic this is simply how these work and that's all right so I just need to be a little bit flexible if I don't see what it is that I'm looking for the first time maybe rephrase reframe what it is that
I am doing and one big thing that you can do to really help out is to provide examples so let's say that I'm going to be processing data let's say that I'm going to be doing some validation if I give a set of examples then I'm going to be very clearly defining to GitHub co-pilot what it is that I'm looking for so let's take a look here I've got an application that I'm going to be building out using python Django python Django one of my favorite Frameworks it's there to create front ends for backend databases
and the first thing that I need to do is to build out my models to describe my my data here so I'm going to start towards the top of my file here and describe what I'm doing I'm building out a conference website so build out a conference uh website and I'm going to have um add a uh speaker a uh track and a h talk and make sure that a parent can't be deleted if there are children so in other words what I'm trying to specify here is if I have a primary uh foreign key
relationship and I try to delete that primary but there are foreign keys don't allow those to be deleted so just a couple three sentences there describe what it is that I'm doing add some constraints and now I'm ready to start adding in my code and you'll actually notice that gray italicized text there that's get up co-pilot and action it's making those suggestions I actually haven't done anything yet and it's already starting to make code suggestions I can accept what this is going to give me by hitting tab but I'm going to be a little bit
more specific so I want a speaker uh speaker should have name email and uh LinkedIn like that and let me just give it one quick extra return here and let's see um uh speaker whoops let's do this let me be more specific here I'm learning for myself here uh um create a speaker model with name email and uh LinkedIn there we go give this a moment perfect so what you notice there is previously I was saying should now I'm being a little bit more specific about what it is that I want I'm being flexible rolling
with it I go back I tell it create and now it's doing its thing and so now if I hit tab now it's got all of that information that I specified so it's got my name it's got my email and it's got that LinkedIn URL you might also notice it's including a little thing that I didn't ask for it's including that override of the Str Str function this is something that's very common in D Jango and it just automatically added that in I could you know remove that if I want to but I actually like
that that's a very common convention inside of D Jango so with that speaker created the next thing that I want to do is let's create a uh track so let's say create uh track with a name and uh description sure and maybe an abbreviation like that there we go give that a moment and that will go ahead and set that up for me again it's reading that comment and then adding the rest down below now as I've highlighted be specific specific you'll notice that I said abbreviation and so it said all right fine I'll give
you an abbreviation abbreviation is probably three characters and that's what I'm seeing right here is it set up that abbreviation with that max length of three characters but chances are if I'm going to be looking for an abbreviation I want something that's a little bit more specific so I want this abbreviation to be specifically three letters and maybe three uppercase letters so let's go back and just make that modification I'm just going to get rid of that and I'm just going to say um abbreviation should be three uppercase uh letters just like that and now
it will go ahead and build that out with that regular expression now I don't know about you but at least for me I can read regular expressions and and something like this I could certainly have typed out off the top of my head um although if I'm being perfectly honest I do sometimes forget which is which if it's the the carrot or the dollar sign to pin to the beginning pin to the end uh so it's nice not to have to always go look those types of things up so I was able to just describe
this is what I want it generated that regular expression so I was flexible there I was specific and it gave me back that uh that value there pretty cool last but not least let's go ahead and create that uh talk it's already adding in that comment I'm going to go ahead and hit tab to accept this let me read uh title description speaker track and date perfect let's go ahead and accept that and give it two seconds here perfect and now it we'll go ahead and put all of that in so now it's got my
title it's got my description it's got my speaker it's got my track it's got my date and then a little bit of extra stuff down at the very bottom here and and I'm going to kind of leave that the way that it is for the moment but the big thing that I want to point out is that unfortunately it didn't quite pick up what it was that I was looking for that if we remember from the very beginning here let me scroll all the way back up I specified in my little header that I wanted
to make sure that a parent can't be deleted if there are children unfortunately this didn't pick up on that maybe I just wasn't clear enough maybe I needed to um use the the specific vocabulary who knows but that's all right I could go back and I could modify it now before I do that though I actually want to get into the next set of tips here and the first is to name things properly I'm going to bounce back and forth a little bit between the slide and this code here to kind of make some points
and the first is right here on LinkedIn what you're going to notice is that when I added in that comment of create speaker model with name email and Linkedin that it automatically set up that LinkedIn as a URL field which is probably exactly what I wanted how did it do that well it did that because it's actually reading my variable name here so it sees LinkedIn it goes oh okay you probably want a URL and it will automatically put that in there which also then means that if I'm looking for good suggestions from GitHub co-pilot
that I want to make sure that my variable names are also good one of my pet peeves in coding is abbreviations is single letter variable names because when I go back and I take a look at that code it's not always clear to me what that code is supposed to be doing and when it comes to abbreviations sure maybe we've got documented somewhere what abbreviations mean and so forth but that's now institutional knowledge that's something that my developers would need to learn and the exact same thing would then wind up holding true with GitHub co-pilot
is it's not going to have that same experience as my developers it's not always going to be able to pick up what those abbreviations mean so if I've got good code if I'm spelling these things out I'm not only making it clear to my other developers but I'm also making it clear to get up co-pilot which going back to that analogy of it being an AI PA programmer I kind of want to treat it as such I want to make sure that I'm being clear to it so because of the fact that I use LinkedIn
here it was able to go oh okay I know what you're doing and it added in that uh that URL field now keeping along with that using good code let's come back down here to where that little problem is that I highlighted a moment ago right now the speaker and track are both set to Cascade if you're not already familiar with uh Jango what that means is that if I had a speaker and they had talks I delete that speaker all of those talks are now going to go away that was not what I was
looking for so fortunately I can change this let me actually just get rid of that full track line right there and let me sound effects help by the way there we go perfect let me go ahead and say uh protect so by saying protect what that now means is it's going to uh prevent a talk from or a speaker from being deleted if they have talks that was the behavior that I was looking for now that I've done that let me hit return here and what you're going to notice is that with track it's going
to follow that pattern so it's going to learn by watching me so it's picking up that context following along one of the most common questions that I get asked is hey we have certain conventions that we have certain you know conventions for naming our variables or whatever it is that it might be how do I make sure that GitHub co-pilot will follow along with this the simplest way that you can do that is show it some code that's written the way that you're looking for it to be written and it will then follow along with
you kind of reads perfectly into following best practices get up co-pilot is going to see what you're doing and it will follow right along with that last but not least is like I highlighted up at the the uh towards the middle I guess is to make sure that you are opening up relevant files so if I'm I'm adding in code not quite getting what I'm looking for make sure that I've got my relevant files open all right let's um keep building here and I want to create some views to display the data that I've now
got for my website so I need to import it in a little bit of code here so get up co-pilot sees that I'm doing Dango automatically pulled that in let me just go ahead and hit tab hit a couple of carriage returns and now not notice this next line here the next line that it automatically is adding in is it's importing in my talk my track my speaker it's doing that because it's now seeing my model tab open it knows what's inside of there and we'll automatically import those in let me go ahead and now
start creating views for my um let's say for my talk so let's go ahead and say create um a list view for my uh talks here we go and it will go ahead and set that up for me now what this is doing in Python Django is this is specifying that the model that we're going to be working with is talk that when I actually go to display the data it's going to have an object name of talks and the HTML template that it's going to use is going to be that talk list now this
is probably one of my favorite little things about Django is because this is a framework that is built to very quickly allow me to build front ends for databases it includes a lot of pre-baked code for me that I don't have to go in and create but as with most Frameworks I would say it's not always going to be the most performant right out of the box that by default what this is going to do is it's going to do a thing called lazy loading meaning that when it goes to display every single talk it's
going to have to go back and go get the speaker it's going to have to go back and get the track to display that out obviously I don't want all of those round trips to my database that's all right I can avoid that that what I can do is I can add in a comment describing what I want so I can say hey um select the name and ID for the track whoops um I have a great memory it's just really short when I said track did I say name I did there we go never
doubt yourself and uh the name and ID for speaker and now when I add that in let's say pre-select there we goop there we go and so now it's going to go ahead and it's going to do the select related for my uh track and for my uh speaker it unfortunately didn't pick up on that name or on that ID that is not a problem I can just go back and again kind of just roll with it here be flexible so I'm going to say uh trackcore ID and now I'll say track name and this
should pick up here let me just get rid of that that there we go and now it's picked up on that ID and it's picked up on that name for me so again be flexible with it kind of roll with it and it will then help you out now that's for all of my talks let me go ahead and create one for a detail for my talks Co pilot knows where I'm going so I'll go ahead and hit tab accept that there we go and accept that and just like we saw before because of the
fact that I did that pre-select previously it automatically adds that in so it's following along based on what it is that I am doing here and that's going to be one of the big takeaways again that I want to make sure that I highlight it will follow along with you okay one last little thing to uh to highlight here is let's go back over here to my talk and let's add in one last little thing so up until now what I've been focused in on is trying to kind of get the most out of GitHub
co-pilot to build out my model to build out my view and now I want to see how I could you know take this little talk here maybe to one last little level add in a uh Dynamic field for my code so every talk should have a code that should be the uh in my case my track maybe a level and then the ID for the talk and so I'm going to build that out here so let me first up add in a level add a level field um with value range from uh one to three
just like that and so it's got my Min and my Max of one to three that's perfect and now let's go ahead and create a computed field uh called code code should [Music] have the track a dash the level and two digits from the ID now if you remember previously one of the things that we talked about is give it an example so I might be able to pick this up from this but I don't know about you but at least for me I always like to see examples examples are a great way to uh
kind of describe and also to document so I put in one more comment and it automatically kind of picked this up so it automatically added an example of in this case pt-101 that's perfect I'll accept that and then go ahead and hit return it's going to add in with my property hit return and then now it will build out that property for me so now it's got that abbreviation it's got that level and it's got this ID of 02 now in this case it already did that by utilizing F string again going back to specificity
if I want to make sure that it does it a particular way just ask it to do it that way so if it didn't give me that level of specificity uh sorry if it didn't give me me that F string then I can go back and be a little bit more specific so I kind of want to go back here and flow back through all of this one last time number one describe the goal at the top of the file add in a little quick comment couple lines three lines four lines what you're doing how
it is that you're going to do it any relevant information that you think that GitHub co-pilot might need number two be flexible we saw this as we went through our demos here that GitHub co-pilot is probabilistic that it's not always going to give you back the exact same values in the exact same situation things will sometimes change and we want to be flexible with that number three is provide examples and this can be really helpful to GitHub co-pilot to be able to understand what it is that I am trying to accomplish as a side note
one question that I very frequently get asked is about those comments should we remove them should we add them my personal opinion is leave them behind and the reason for that is because they are artifacts it was how my code was generated and I want to be able to see this and if we're later going to go back and do any fine-tuning on that model having that text describing what it was that was built is going to be really helpful always remember this is kind of a universal truth I think that good code begets good
code name things properly follow best practice IES when you do that GitHub will or GitHub co-pilot will follow along with that and then finally the most important part probably the theme of this entire presentation is above all else go with the flow with that I want to thank you for your [Music] time
Copyright © 2024. Made with ♥ in London by YTScribe.com