Transcript for:
GitHub Copilot: A Developer's Guide

coding has changed in fascinating ways GitHub co-pilot GitHub co-pilot GitHub copilot GitHub co-pilot GitHub copilot GitHub copilot co-pilot co-pilot co-pilot co-pilot co-pilot co-pilot AI has arrived and co-pilot is all about it one way to describe it is right from its documentation GitHub co-pilot is an AI coding assistant that helps you write code faster and with less effort which ultimately frees up your time to focus more more energy on problem solving and this is true whether you're a new developer or season but to get a sense of what I mean you really got to see it so let's take a look before we even get started to even have access to GitHub co-pilot if you're just starting out all you need to do is at the top of the vs code screen click on the co-pilot logo and this will bring up the sidebar where you can now click to sign into use co-pilot on the bottom right hand side you'll see that it's attempting to sign into get Hub and then choose the GitHub account that you want to use with co-pilot and I'm going to choose the first one that's currently not being used and I'll choose to open up vs code and here I am ready to go no subscription needed no credit card information I can just get started with the default free tier of GitHub co-pilot since we are using the free version of copilot for this demonstration there's a couple of things I want to mention the first is that it in include 2,000 completions what exactly is a completion so let's say in this form here I just you know wanted to add a little text right under the word login such as enter and right there your username and password to login that's a completion so when I tab it now I've used one completion and there you go nice so I have 1,999 left now if for any reason you don't want to use some of these completions you want to optimize your control over it all you need to do is screw on over down to the co-pilot icon at the bottom right hand corner of the screen it'll give you an option to disable completions now if you actually have focus on your page when you click on this option like for example right here index.html there's focus on this page versus if I clicked over here now there's focus on this preview so let's go back focus on index.html if I were to go back you'll see that there's an option for disabled completions for HTML and I mentioned this because this option will change depending on what you have focus on so if I had a markdown file it'll say disable completions for markdown which is pretty cool because now you have control over what type of page you don't want completions to go so then this way you use it when you really do need to now the other thing that the free tier of copilot comes with is 50 chat requests per month so just by clicking on open chat on the upper right hand corner here I can ask it a question like how can I make this form more secure and it'll give me a solution for this login form that I can consider and that was one chat request so those are the two main characteristics of the free tier of co-pilot I should mention that within your text editor here if you hit command I you can ask questions right over here but if I don't want to I can hit escape and just continue working with chat on my right hand side now when we examine the interface here something great that we have available is the ability to pick a model Right Now the default is GPT 40 but if we hit the drop down we have an option for Claud 3.5 so as time goes on we're going to have more models most likely so make sure to check back here now just three other icons here that I want to point out the first here is to start a voice chat so you could literally dictate your questions if you don't feel like typing it in context is very important when you're asking questions to co-pilot and here if we hit the attach button there's different options to add context we won't review all these right now but one of the most popular is to just attach files so for example I have a CSV file here of top 25 popular musical artists in a number of albums that they've sold so I could go ahead and drag and drop this right over here and use voice chat to ask a question tell me the top five artists from the CSV file the top five artists from the CSV file based on copies sold are Michael Jackson Thriller 70 million copies sold ACDC Back in Black 50 million copies and I just stopped it right there from reading it but that's pretty cool the last I on here are for participants which we could talk about next so now let's talk about participants participants can be invoked to see the list of them by using the at symbol and here they are now we won't cover all of them since that's out of scope for this video but we'll cover a few the first will be for vs code but before even using it let's see if I just asked copilot what's the shortcut command for inline now without using participants co-pilot goes online and pretty much searches all the internet to do its magic before it returns an answer and what happens is it tends to be less accurate because there's too much context for it to review and in this case it does its best to give this suggestion here but this is not exactly what I was looking for what I'm really looking for is the shortcut to invoke copilot chat in line so if I say this question applies to within VSS code and try again now it gives me an answer closer to what I want cuz if I actually choose show and command pallet you see that says command I so if I'm within one of these files and I hit command I this is exactly the shortcut that I wanted now I'll hit escape to get out of that and let's experiment with another participant let's say for terminal so now this again Narrows the scope down to questions related to the terminal within the s code so basically anything that you would want to run here so I could ask it just as it mentions here ask how to do something in the terminal what are the top 10 popular G commands and boom it returns me content that I'd want to put right into the terminal so now let's try another participant specifically at workspace which is an important one because sometimes you want to ask questions that's relevant to your workspace that is your project file files you don't need co- pilot to go look throughout all of the internet and return you just general answers for example I may want to know where is this object axios being referenced now I'm going to close this file here just so that it doesn't think I just want to look only into that file and when I hit enter it returns me all the files where axios was referen to learn more about at workspace and participants in general definitely check out this video here because there's a lot to it so you could really get a good understanding what's going on behind the scenes and also this page to look a little bit more into participants now let's talk about Slash commands which are shortcuts for commands that you don't need to have to type in the word each time so for example if I highlighted my code and went to my inline chat and typed in just the slash you can see a few commands that PO po up common one is explain that we can use so that it could explain the code that we've highlighted and once it starts writing and finishes we can go ahead and just look at this horizontal bar grab it move it down and then scroll up to see the full explanation of everything that our code is doing with each function and hyperlink that brings you right to it now I'll close that and let's observe another if I highlight my code and bring in the inline chat sometimes it's important to detail some documentation about our code so there is the doc to add documentation to our code so if I hit that it gives a general summary that we could go ahead and accept if we want to keep that at the top at which point we could just modify if we want but it's a nice quick start to adding some documentation I'll get rid of that for now another common command is the slash command to fix issues so let's say we had a type of here and we weren't really sure what the correct spelling is we could highlight our code and there was a bubble here that could give us an option if we want to have co-pilot troubleshoot this but these aren't really the options that I want cuz I know I need to have axios in here but it's asking me if I want to remove it or modify it let's try to just highlight the line and hit command I and fix and boom it knows exactly what the issue is it says hey look this is incorrectly imported and it should be axios so I could accept that and that fix the issue so slash commands are great for that and while within inline chat we have currently six types of commands available if you actually went to chat window and hit slash there's even a lot more to experiment with so toy around with it and to see all the different ways that it can help you out to be a little bit more efficient the next thing I'd like to show you is how you can use co-pilot as an amazing tool to learn new forms of software development so for example I have this react program here but let's say I'm not really that familiar with react I can ask Co pilot can you give me some exercises to learn react skills relevant to this project maybe a curriculum and let's change that to four react skill so it's a little bit more specific and this is amazing here so now rather than just giving me like a curriculum that's just how to learn react it looks at my workspace it sees the skills I'm going to need to practice and suggest some exercises that's relevant to it so it covers Basics such as components and then States and props forms an events crud operations routing testing and then there's some more advanced topics along with Dey alment towards the end and it gives me the option to get information regarding prioritizing it and you don't need to stop there whichever topics that it mentions if there's one that you want to dive deep into you could say explain more regarding deployment on week eight and it'll do so so this saves a lot of time having to go out and Google to find additional information regarding deployment and allows you to just stay within vs code to get all your question questions answered and if you do need to leave here to set up an account like it does here for step one it provides a link such as to verell which you can then open and go to now I'd like to continue a little bit more regarding how you could use co-pilot for learning because before you can get any type of software engineering job you need to interview and Technical interviews is a key component to that let's say your job was going to involve a lot of react using co-pilot you could ask it to to give yourself 15 react interview questions and answers and we're just saying 15 for now just so you get a sense of it but this is an excellent way to again save time from researching this on your own and it'll come up with very common questions and I always recommend to Junior developers to always a cross reference even though co-pilot is a great start I would definitely get into the habit of cross referencing different sources for questions and answers and then you could form your own way to answer them and of course you could ask it General engineering questions such as what does solid stand for and I'm not even going to mention that it's in the context of programming but it does pick it up and sure enough it explains that it is an acronym for five design principles now let's turn our attention to some coding efforts which often give some people a headache especially for me which is reg X so let's say I want re X to match a phone number in the format just like this I hit enter and co-pilot immediately gives me a solution which I can come over here and at the second icon click insert add cursor and boom it's right there in our text editor so now I want to go ahead and test this so I'll do console.log and I like the completion that it's offering me and it says that this example should return true so let's go ahead and now execute this in our terminal and see if it returns true and it does so why don't we go ahead and mess this up here and add in like a letter and when we run it again ideally it should not be true anymore and that is certainly the case and now we see redx life is effectively easier with co-pilot let's turn our attention now to testing now this will be a short little demo here but I want to show you how co-pilot could easily simplify your life when it comes to testing let's say that we highlighted this and then we went straight into the inline chat and we chose the slash command for test generate unit test for the selected code let's go ahead and choose that reviews the code and it has gone ahead and created some tests I'll go ahead and accept that so imagine if you had a really large project this saves you a lot of time from having to create all these asserts manually yourself which is a great thing the next thing that I'd like to show you is a pretty important feature that's going to be continuing to evolve which is called co-pilot edits which you go and click on this second icon here towards the top of the chat window and what co-pilot edits allows you to do is to propose code changes across multiple files in your workspace so on my left hand side you'll notice I have four files here three of them are blank the index the contact and the about HTML files are blank and then the last file is a c CSV file that we referenced earlier let's go ahead and highlight them all and drag them into edit with copilot's window and start indicating what we'd like the changes to be so the first will be and I'll be kind and say please do the following update the homepage to list the artist from our previous CSV file next will be to add a link to the about and contact page next is to add generic info to the about page and last but not least to complete the contact form to accept name phone and email so let's go ahead and execute that and see co-pilot at work step by step it's telling us what it's doing first to the index page it updated the homepage to list the artists then it added some generic information the contact let's take a look there's our index page let's take a look at the preview all right pretty cool and it add the links to the about and contact page as we asked all about page if we look at the preview there it does have some generic info Welcome to our website dedicated to the top 25 musical artists of all time and let's look at the contact page and there's our generic form all right that's a good start now I like what it has what's great with this is it doesn't automatically assume that it did everything perfect if you don't like it you can come over here on the bottom right hand side to discard it or just accept it so I'm going to go ahead and accept all the edits and now I'm going to ask it to style it cuz it did look a little bit boring can you add styling to all the pages please never hurts to be kind and now it's going to add some styling for each of them so let's take a look once it's completed all right our homepage looks a little bit better so there's the about and our contact form so we can go ahead and except all these and this is just a quick example of how you could have like a good start using coplot while I appreciate the styling I do want it to be a little bit more colorful so let's go ahead and ask it verbally to make it a little bit more colorful thanks for what you've done so far but can you go ahead and update all the pages so that they could have a little bit more color to The Styling and also for the home page right now the table's taking up the entire page can you adjust the table so it's centered in the page index.htm update The Styling to add more color and center the table on theage HTML HTML let me go ahead and mute the voice so you don't have to hear her speak everything out give different colors to each page I don't like them all being green and there you go that looks a little bit nicer great job so far or can you update the homepage to include all the data from the CSV file index.htm update one last thing I'd like to mention is that for a lot of changes that are being made if you want you can navigate through and choose what you want to accept and what you want to discard but things are looking pretty good here so I'm going to go ahead and accept all the changes and there you go to learn more about copilot EDS go ahead and visit this section of the documentation that gives a little bit more detail regarding all the different ways that you can use it now to learn more about all the different tiers available for gith help co-pilot you can come to this page here and click on see plans and pricing and you'll see the first option is the free tier which we've been working on and it comes automatically with vs code which includes up to 2,000 completions and 50 chat request but if you do find this limiting because you are coding a lot then the pro might be better for you where developers have unlimited access to GitHub co-pilot for 10 bucks a month now something that's cool that I should mention is that if you are a student or teacher at the fine print here you can see that there is an option where it would be free for you all but you would need to sign up and indicate that you're a student or educator if you're part of a team then the business plan would make more sense for you where it's 19 bucks per user but if it's for your whole company then it would be the Enterprise and you can click on get started or contact sales to get more information and the last thing I'd like to mention is a reminder that co-pilot is not just used for VSS code but you could use it on code spaces Visual Studio xcode jetbrain IDE neovim and of course Azure data Studio before we wrap up there's a couple of resources I'd like to point you to one is a video for Best Practices to really get the most out of co-pilot you not only want to know how to use its features but the best way to use it that is to follow some best practices so we have this video here that you can check out in addition to another video that has to do with prompt engineering which is what's it's referred to there's this other video here that focuses just on that now there's a lot to prompt engineering but there are a couple of key strategies that you can follow to really strengthen your skill set to leverage co-pilot to its fullest potential and the last resource I'd like to point you to is actual GitHub co-pilot documentation which is really well written so go ahead and bookmark this and check it out from time to time so we cover quite a lot and with the new free tier of co-pilot you can get started right now even if if you're new to coding because co-pilot can help you take those first few steps and if you're a season developer go ahead and pull in some of your Advanced projects and see how co-pilot can assist with everything in your workspace if you found this video helpful don't forget to like subscribe and hit the notification Bell so you don't miss any future co-pilot updates and you definitely know that there will be so I will see you in the next one