Master GitHub Copilot as a Beginner

hello and welcome to this free GitHub copilot course from 7dev my name is Christian Freeman I'm the founder of seven Dev and I'll be your host through all of the screencasts covering everything you need to know about GitHub copilot copilot is one of my favorite programming tools that's popped up in the last couple years I use it I don't know hundreds of times a day and in this course I want to show you everything you need to know not just the basics but also advanced stuff that you may not know exists as you use copilot day to day now this course doesn't assume that you know anything about copilot and has very basic requirement that you have vs code installed as well as the ability to either use copilot's free trial or to pay for co-pilot which at time of recording is ten dollars a month so in the tutorial I'll assume that you're going to subscribe to copilot and I'll work through it in that sort of format but if you are just going to try out the free trial make sure that you have a GitHub account that has not used copilot in the past and you can go ahead and try out that trial and follow along in this tutorial this course also has a brief exploration of copilot chat which is a chat conversational UI built into vs code it's a separate plugin from GitHub co-pilot and currently it's in limited public beta I'm sure at some point it will come out but in case you watch this I don't know sometime in the future this is a sort of look at what it looked like at time of recording as it was in a beta State it's super cool really interesting stuff if you enjoy the this course and you want to get more stuff from us the best way to do that is to follow us on Instagram Tick Tock YouTube there'll be links to that in the description of the course where we post a real or video a tip whatever it may be every single day teaching developers how to code and of course if you have ideas for future courses if you like the way that I teach and you want to see more stuff from us definitely let us know I'm definitely open to it whatever stuff you may want me to teach let me know that would be awesome so with that I hope you enjoy the course and get some value out of it like I said a co-pilot is like probably the most productive tool that I've added to my toolkit here in the last couple years for being an effective program who writes correct code and stuff like that so I think you'll really like it as well and hopefully this helps you get started with it so without further Ado let's jump into it let's begin by subscribing to GitHub co-pilot so pricing and all kinds of things about co-pilot business all that stuff may change when you watch this video but the general sort of high level let's go in and subscribe to the personal co-pilot plan hopefully should not have changed so you can find this just by searching GitHub copilot this is kind of the landing page for it this shows all the features that you'll be able to um you know you'll be able to use nothing crazy here but what matters is that we're going to come down and we're going to find this co-pilot for individuals right now this is priced at ten dollars a month or a hundred dollars per year of course if you're using a business sure you can do this as well and I'm going to click Start a free trial which will send me to the sign up page now in my case I've already signed up so you'll see it actually just points me to the settings here which allows me to do configuration but if you haven't signed up yet you'll need to enter a credit card and it will charge you and you'll be able to start using copilot taking a look at the configuration here inside of GitHub this is one of two places where you can do configuration for copilot one is inside of here in the GitHub UI and then the second is in vs code where you can set specific extension configurations for GitHub Copilot in this case I can say I want any suggestions matching a public code by default this should be allow and that's going to give you significantly better suggestions so you probably want to have this added and turned on but if you're working in a situation like say a company where you may not want to be using public code that's something you can turn off you can also opt in to use your code statements for product improvements I have this turned on and then finally down here in get co-pilot from an organization this will allow your business to provide you with copilot access that's something that is a little more advanced but you may have a you know for instance your engineering team all uses copilot and everyone can just get it so you don't have to pay for it and that's pretty much all the settings here now in Visual Studio code let's install GitHub copilot and see how it works now to do this I'm going to use a couple keyboard shortcuts that I'll outline for you though you can also find these just in you know this little intro window here here and also by going up to the file menu and selecting different options what I'm going to do here is I'm going to open up what's called the command palette and on Mac this is uh command shift p on Windows and Linux I would guess it's probably control or some variant of that and you can see I already have this install extensions used here but what I'm going to do is show you how that works which is I'm just going to say install extensions and that will filter out until we get to this option here I'm going to click that and you'll see it opens up the extensions side panel and I'm just going to search for copilot I'm going to select this first one here this is GitHub copilot version 1.1 actually it's version 1.101 there's also a couple other features here such as copilot labs and copilot chat which we will look at later in the course for now let's select copilot and we can confirm that this comes from GitHub it's verified you should always do this when you're installing Extensions by the way and then I'll just click install so it'll install pretty quickly and then what I can do here is I'm going to actually open up a file here so I'm going to say command p and I'll open up just any random file you can see this is a react file that I have and in order for me to know that copilot is working you'll want to look down here at the status bar I have this hidden for screencasts generally but I'll enable it here and you can see that down here is this little co-pilot window so I can click here at any time to deactivate it I can either disable it globally or I can disable it for this specific file type which is Javascript react and so if I disable it globally you can see that it gets this little red icon here that indicates that it's not working let me activate it here and then we will get started actually using copilot in our applications and note that if you are using copilot inside of vs code and you aren't seeing this option here you may have to authenticate or log in with GitHub in my case I've already authenticated but in your case if this is the very first time you've installed it you may need to go through that process before you can start using it so just keep that in mind generally the core Loop of GitHub copilot is that you can begin writing in my case I'm using the Vim plugin so you'll see I've entered what's called insert mode but this will work however you have your vs code set up and what I can do is start writing something like for instance maybe I will delete this line height and I'll begin writing h e I and then we can see that this preview occurs which shows that there is some copilot output now I want you to focus on maybe I'll get out of insert mode here and you can see now it actually wants to continue to suggest it but if you keep an eye out this icon down here this will actually show the status of copilot as it's suggesting things so in my case maybe I'll delete this as well and I'll write well you can see actually it already started suggesting maybe I'll type w you can see it's running and then there's my output width now with this I can press Tab and that will actually pre-fill in all of the value that copilot is suggesting of course I could type this right myself manually h e i g h t but in my case I think this is a great suggestion so I'm going to press Tab and that really is the core Loop of how you use copilot is you begin writing code it's going to sort of suggest things to you using that kind of grayed out text but it's not going to fill it in until you press tab now for instance maybe I want to come down here and I want to change this font so it's going to suggest well you had enter it's also using context here you have entered down here I'm going to guess this is what you want but if I type something like a okay it's going to suggest this Alegria Sands maybe I'll type R it's going to suggest Ariel Etc right so it's very contextual based on what you think what it thinks makes sense and same thing here it notices there's a comma missing so if I press tab that will show up and that's really the basic Loop of how copilot works is it'll suggest things and you can either opt in to get that suggestion output it to your code or you can ignore it and keep working at your own pace most people who use copilot in fact I'd say pretty much everyone that uses copilot is familiar with that core Loop so you type something you get a suggestion and you commit it using copilot to your code but what happens if you want to explore alternate suggestions this is a thing I think most people don't actually know about copilot is that it has this option so what I'm going to do here is I'm going to clear this out I'm going to type a new string and I'm going to begin it with a you can see it has this suggestion Alegre Sands but what I can actually do is hold option and press the bracket Keys those are the keys at least on a US keyboard that are above the return key and I can toggle different suggestions so here I press the right bracket to go to the next suggestion and then it goes back to Allegre Sands I can toggle here between these two and I can also use the left bracket to go back now in this case there's only two suggestions so I basically can go back and forth but let's say I Type R and get a new round of suggestions here Ariel have a helvetica Sans serif I can click through here and I can toggle all of these suggestions this is a really cool way to explore alternate options maybe it's not exactly what you want but that is a keyboard shortcut I think a lot of people don't actually know now in the doc mutation for copilot in this seeing alternative suggestions section in the getting started guide you can see the default keyboard layout for each operating system and Mac which is what I'm using it's option and then the brackets and on Windows and Linux it's alt and you can also remap these as well if we come back into vs code and if I use the command palette which in Mac is command shift p and then I type keyboard shortcuts you can see it actually shows is that if I do command K command s it will open it as well and then I search for inline suggestion you can see that there are these show next inline suggestion and show previous inline suggestion I can actually click these and remap them to something else if I want in this case I'm happy with what I have here but you can see that those are things that you can remap to whatever layout you may want and that's built right into vs code which is pretty neat so we can make use of alternate suggestions but one thing that I like to do is what I kind of loosely refer to as prompt engineering now that's a term that's used a lot in the AI and large language model Community to understand how you can sort of prompt tools like chat GPT to give the prompt that you want now copilot has something like this that usually is done in the form of comments and I'm going to show you how to do that with a brief example let's say that I've added a new parameter here called size and that's just going to be a number here you can see this is totally off base right that's okay soon we'll know how prompt engineering allows us to fix these sort of problems so I'm going to set this to size 500 and then what I may want to do here is say with it with and height are both properties that are based on size so what I'm going to do here is I'm going to delete these and I'm going to add a comment that explains what I want copilot to Output this is kind of what I refer to as prompt engineering so I'm going to make a comment and I'm going to say width and height our size times two okay because we're using retina interesting yeah I guess that's maybe something that would make sense in this case it's sort of a made up example but what I'm going to do here is I'm going to go to new line and then I'm going to wait for the output here which shows that it's actually looking at the comment or at least however a sort of language model like this quote looks at the comment and it's determining how the code should look based on that comment so width is size times two I'll press tab here and height is also size times two and you can see that what we did here is change the sort of output of copilot to be based on the comment that we've given it and this is kind of what I call Prompt engineering now this isn't exactly something that's hidden GitHub mentions this actually in all of the demo videos but I think it is probably the most crucial skill and turns co-pilot into something that's more conversational where instead of it just sort of guessing at what you want if you take the time to write detailed comments uh copilot will generally output things that you want and things that actually match the desired behavior that you're going for and of course you can make use of alternative suggestions as well if things aren't quite right but I find that prompt engineering or at least what I refer to here as prompt Engineering in the context of co-pilot is by far the most powerful thing that you can do in order to make copilot work the way you want it to let's take a look at some of the configuration that copilot offers just so we can understand what options we have for when we're working with our code so if I do command comma which opens up the preferences pane on Mac you can also run command shift p and then type preferences you can see there's a ton of options here let's go to open settings UI this is going to be the general settings screen I'm going to search copilot and then it's going to filter out all of the different copilot uh configurations here so there's a couple options here worth exploring we'll start with the sort of basic ones and then look at Advanced at the end so enable auto completions this is sort of the core Loop of where it's going to show your auto completions in the editor you're definitely going to want this on you're also going to want inline suggest on these combined are what actually allow the suggestion functionality to work and generally you want these on you can turn them off say if you're you know in an interview or something like that and you don't want to show co-pilot while you're doing your technical interview and maybe consider cheating but generally these These are the core Loop of copilot and you want to keep these on and then we also have a selection of more advanced configurations so this is the copilot enable which we'll look at here in just a sec and advanced which is just totally Advanced features honestly a lot of these are probably out of scope for this video both of these have edit in settings.json links and the reason for that is that they're not something you can just configure in the UI so let's go here and click this you can see that basically what this is is a list let me close this out here of different languages and then a mapping as to whether it should be enabled or not so in this case plain text is false markdown is false and SCM input is false so plain text and markdown are both plain text file formats and SCM input is any sort of source control manager so say you're looking at like git or something like that all of these are marked as false but then this wildcard operator is set to true what that means is that it will be enabled for everything except for these three now I personally actually like using GitHub copilot and markdown that's a neat way to help you write so I'm going to take this out and you know what I'll probably do with plain text as well and that way I'll just leave SCM input as the only place where copile is turned off and have it be enabled for everything else now if I come in here and I make a new line you can see that it'll start suggesting things here and I can find any file format let's say Ruby and I can disable it for that configuration option I'll take the comment out here so it's valid Json so for any language you may have you can enter it here and one other trick is that if I actually save this and close it and reopen this this is where I'm going to get a list of all of these different keys there are a ton of options here this is like every string value that vs code knows about and I can look for things like JavaScript JavaScript react Jinja right these are for instance if I don't know exactly what the thing I'm looking for is I can search in here before I before I end up selecting it so say for instance this JavaScript react uh where did that go there's a lot of options here so I can select this and I could also find so that is the uh enabling and disabling for specified languages now let's take a look at the advanced features so if I open this up you can see that it will suggest keys for me of all of these different options now there are a lot of things here that you can do in terms of debugging you can even do proxying and things like that a lot of this I don't recommend that you customize basically unless you I don't know work at co-pilot things like temperature and top p and things like that these are actual like language model configurations and I don't think that they're going to give you the results that you necessarily want unless you want to mess around with them this is where you can do that but generally I'd suggest you leave these alone and I'm sure in the documentation that some of these are outlined but you know they they're there in case say for instance you have substantial problems with copilot and need a contact support they may have you enable this debug mode but that is the options there for advanced and those are basically the settings options for copilot there there's really not that many generally it's just about enabling or disabling it a lot of these sort of output and stuff you can customize using prompt engineering but that's kind of a high level outline of how you can customize it in your editor GitHub copilot chat is a new feature that's currently in limited public beta which allows you to chat with copilot inside of your environment this is actually the first time that I've used copilot chat so this is less of a tutorial and more of an exploration where I'll be talking through what I find interesting and things that I think are kind of cool about copilot chat now a current time of recording you can join the waitlist to participate in the limited public beta you'll get an email when you're accepted in I was accepted in earlier this week so it's actually really great timing I was already planning on recording this course so yeah it really worked out well like I said I haven't used it at all this is my first time using it so I will cover as best I can and then maybe in a future video once it's officially released we'll do a sort of official breakdown of it so here I have the same sort of content that we were working with in the previous videos and all I need to do is go back to my install extensions and I'm going to search for copilot chat and you can see that's this one here I'm going to install that you can see again it's a preview you can hear that in the sort of documentation but you can also see it here and once that's installed I'm going to close this and when I do screencasts I tend to hide What's called the activity bar here on the side just because I think it introduces some clutter but what I'm going to do is enable it here and I'll say toggle and you can see that the chat window shows up over here on the sidebar so I'm going to open that up and I'm already authenticated through copilot so I'll be able to see all this information here let me make this a little bit bigger so I'm your co-pilot and I'm here to help you get things done faster you can ask your questions but what I'm really good at is helping you with your code explain the selected code so that's interesting that tells me that it can actually look at what code I have selected in the editor which is awesome generating a test propose a fix uh super cool yeah so let's um well let's start with this we'll just maybe we'll run through these one by one it'll be interesting so generate unit tests for my code and it has this little kind of chat gbt UI on the side sure here's an example of how you can write unit tests for the process markdown file function oh make us a little bit bigger in fact I'll just do kind of side by side doesn't look like it has wrap or anything there um wow yeah super cool so it's actually looked at my code and it's written in a test maybe you'll uh we'll try and copy it in somewhere and write it will that work probably has marked out file yeah I don't I don't know if it's actually gonna work but this assumes you have a test file named test MD in the same directory and leave install try and mocha uh how can I install a chai mocha packages so it has like follow-up questions too which is very cool gives you the commands directly how can I run the unit test for my code this is super sweet yeah awesome uh all of these directions and how and I can I do these specific things uh looks like I can type slash for topics explain fix help tests vs code clear uh that's really cool okay so let's test the next thing which is maybe explaining code um so it says I can highlight code here I'm going to grab this SVG parameter here and then I think I can type slash explain it's going to think about it and there we go the code you provided is using the Satori library to generate an SVG image from some compiled markdown the resulting SVG is wrapped in a layout component which is passed as the first argument to the Satori function explains width and height explains fonts this is super cool and really uh I mean it's accurate right this is exactly what's happening so that's super cool that's amazing um yeah uh okay and then the last thing is propose a fix for the bugs in my code I think that's fix well I don't know if there are any problems in this but we'll see um propose a fix well what does it oh I mean I don't have an error here so I'm curious what it thinks the error is um that's interesting so process I think it's suggesting that I basically wrap this in a try catch which I probably should do honestly um I wonder if I let's do this I'm going to introduce a bug and we'll see uh what the problem here is so I'm going to make size 500 which is a string and then I'm going to copy this code here actually grab that parentheses as well and I'm going to ask it to fix I probably could add additional text but that's okay uh the issue is that the fonts array is using the same name property for both fonts um that's not true that actually works totally fine let's do this fix uh the size is not working as expected so I'm giving an additional prompt here and now I can figure it out so it may need a little bit of context for things that are a little more complex so the size variable is currently a string but it needs to be a number in order to perform arithmetic operations on it here's the updated code and then explains it in the updated code the size variable is set to 500 instead of string 500 so it'd be really cool if there's like a button I could click like if it generated a diff and just you know updated it but that's that's really cool um and and does have oh it does have that oh no way uh okay I missed that so if I have a highlighted and I come here and say insert a cursor wow look at that so no indentation I have save on format so it should fix it that is really cool so I can copy it obviously but if I have it selected still I can insert it a cursor and it will replace my code that does scare me a little bit I I don't know like how smart it is say if it screws something up here what if I introduce an additional bug here but that's really impressive I think that's really cool that's really impressive I think that's uh probably the coolest part of this entire thing honestly that's that's legit um so looking at other things here um there's some other stuff we've looked at tests we've looked at explain fix vs code I'm guessing it could do things like how do I install a package so it's just general chat inside of vs code which is pretty cool um oh it takes its time thinking about this one I guess I stumped it with a really complicated question I really did stump it this has been about uh 10 15 seconds now and it's still unsure uh on what to do well that's okay maybe that's something that will take some time now it does look like you can upvote and down vote these responses so like for instance I like this one I think it worked really well um this one don't know and this is a bug or is it stop yeah so it just stops it that's okay um I'm gonna say where are you I'm an AI programming assistant designed to help with coding tasks so it can do general purpose stuff uh what I do wonder is it can it do um like General like if I say sort this list of fonts and I can do shift enter for new line here so I'm going to say helvetica enter Ariel I wonder if we can do General tasks here yeah cool it's probably oh and it even suggests code to you yeah that's awesome um I would guess that this is probably using GPT like four under the hood or something maybe GPT 3.5 but it's nice that you can sort of do these other tasks inside of it I can imagine having this open while I'm working like all day that's that's really impressive um yeah so really cool limited public beta when this comes out this will obviously be awesome I imagine that people will use this like crazy and so that's probably why they need to roll it out is it's going to cost them some money that's why we pay for copilot I guess but overall I'm super impressed there's a lot of cool stuff you can do here I'm not sure that the fix yeah I'll experiment with that some more it kind of worries me that it gives stuff that is not correct though I mean in this case I can understand why it would interpret this as being a fonts issue but that is correct as far as I know I don't know maybe I'm wrong it's worked for me fine in the time but um well now I'm questioning myself I guess the weight values here are the same so I don't know that might be a bug on my my end many people watching this video like oh my gosh you've totally incorrect about that but you know in this case I was talking about the size being a string here and it did correctly figure that out but anyway overall I'm really impressed with this I think I'll use it um maybe not on all of my projects but as I'm sort of green Fielding something I will say I'm pretty happy with the default copilot output just like suggestions I use that a ton I don't know a thousand times a day or something like that so I'm pretty happy with it that's good to know that this other option will exist and I'm impressed with it overall

Channel: 7dotdev

Views: 6,167

Keywords: github, github copilot, 7dotdev, 7.dev, free course, programming, programmers, coding, visual studio code, vs code plugins, coding ai, artificial intelligence, copilot ai

Id: FwKe2F7gxNw

Length: 27min 47sec (1667 seconds)

Published: Mon Aug 21 2023