From the course: Complete Guide to GitHub Copilot for Developers by Microsoft Press
Hands-on lab: Configure Copilot in your development environment - Github Copilot Tutorial
From the course: Complete Guide to GitHub Copilot for Developers by Microsoft Press
Hands-on lab: Configure Copilot in your development environment
- [Instructor] Now I understand that my learners, namely you, are coming from different backgrounds. You have different strengths. You work on different projects. You're in different editors. So how do I write end of module labs that my learners can follow along and do? That's my responsibility. Here's what we're doing on this lesson. By the end of this hands-on lab, I want to make sure that you've got GitHub Copilot, you can verify your subscription, you can tweak your settings a little bit. Get GitHub Copilot set up in your integrated development environment, and then I've got some additional instructions here on creating a new TypeScript or JavaScript. It doesn't matter. I've got TypeScript and JS both here. fizzbuzz, there's a reason why I'm using that as my function name as well, and then at that point, the idea is that we want to roll into lesson two with you being all set in your IDE. And you might think, "Well, Tim, you showed us some slides, but you didn't give me instructions." I'm going to do that in the demo, so pay close attention. Alright, let's do a demo, and let me say the purpose of my demos is not simply to repeat verbatim some of the theory that I've given you in the slides. It's actually to add a lot of new value, so intentionally I'd like you to check out not only the theory, but the practice part of each of these lessons, especially something as practical as GitHub Copilot. So I'm going to assume that you already have a GitHub Copilot trial going. I'm at github.com/copilot or you could just do a Google search. This is the marketing page. It's almost too easy to get a free trial going, so I don't want to belabor that. Now, once you've received your license, how can you verify it? That's going to be something we do at GitHub Enterprise Cloud, as you can see here. So I'm going to come up to my user menu and come down to Settings, and then in the Settings under Billing and Plans, Plans and Usage, this is where you can verify GitHub Copilot. And again, there's different stock keeping units or SKUs. I'm using the Enterprise, which is the most expensive SKU, but it's the one that unlocks everything. And I wanted to just make sure you knew where this was in case you have an issue if you're waiting on a license and so on. I know how it is, especially when it's something exciting like AI. In terms of your Copilot settings, under Code, Planning, and Automation, Copilot here. This actually is a pretty useful page. Here's some instructions. The docs are actually very good on using GitHub Copilot in different environments, particularly in your integrated development environment. For that reason, I want to make sure that you have docs.github.com/copilot bookmarked. Please make sure that you're on this site because it's a well written set of docs, and if we open the sidebar here under Setup, you could do, well, you'll go set up for self, just as a developer, and then under Use GitHub Copilot, it'll give you instructions per IDE. Now, remember I said in the theory part of this lesson that there's a bit of a story to that, and that's true. And because the teams are separate humans, these extensions are at different levels of maturity. So you might find that something that your colleague using Vs Code or Visual Studio sees, you may not yet see in PyCharm, let's say. So please understand that it's asynchronous, and I believe that's just an early days artifact, that we have limited people to do a huge amount of work and that kind of stuff. Initially, or ideally, not initially, but ideally we're going to have the extension be at the same level of maturity. Whether that'll actually happen, I hope, I really do. Don't want to belabor it, so enough about that. Coming back to the GitHub settings here, this is where you can see, now my settings are enabled for me at the cloud level or at the organization or enterprise level, but if you have an individual license, you can control these integrations. So this is the different control surfaces. This one here, I would definitely have you turn on unless you've got a strong reason otherwise, because we want to make sure that GitHub Copilot can get out onto the internet and fetch improved answers. You don't want outdated answers. Again, I keep repeating this. GitHub Copilot at this recording, at the time of this recording in fall 2024 is an off the shelf GPT, and so it's going to have a knowledge cutoff of when training stopped on that snapshot. So I can't really state enough how important it is that you have that Bing integration enabled. Now that having been said, let's get into an editor and let's finish this process. And speaking of which, here I am. As I mentioned, I use Visual Studio Code, which if you don't know, is Microsoft's free open source cross-platform code editor. Now, I want you to know that this process for installing GitHub Copilot is the same on other IDEs. Again, I'll show you over time. We have lots of time together as we go through these dozen or so lessons in my course. So there's time for us to stretch out and see everything. Here in VS Code, I'll go to the Visual Studio Extension Marketplace and do a search for GitHub Copilot. Looks like my caps lock flapped a little bit. Now the story's a little bit messy here in as much as, again, as of this recording, fall 2024, in VS Code, you need to install two first-party extensions, GitHub Copilot, this is what GitHub calls the Completions extension, and the GitHub Copilot Chat. There's dependencies between them. They both need to be there, and in the VS Code activity bar over on the left, let me right click and make sure that my account, where is Account? Here it is, my Accounts panel is here, because as soon as you load the extension, you'll be prompted to flow into an off-flow into GitHub, and this is where you can verify that you're signed in to the Completions extension as well as the chat. I know it's a little bit messy. The other IDEs are more advanced, where I think pretty much, it's just one and done in terms of you just need the one extension. This is an artifact of architecture in VS Code, and there's some other terms that we might want to throw in. Are there any other extensions that you might want to look at here in VS Code? Definitely. How about the GitHub pull requests? This is going to allow you to manage a lot of your work right from within VS Code, and you can take advantage of GitHub Copilot to boot. I like the GitHub theme because of the colorblind support. That means the world to me. Going further with GitHub, using the Codespaces and vscode.dev. In terms of GitHub actions, YAML. As you can see, there's plenty of quality extensions directly from GitHub, so I want to call those out. Now, let's say that we've done all that. We've got our extension loaded. What are the basic need-to-know low-hanging fruit? This specific example is in VS Code, but the way it works is in the lower right status bar, you see the icon always reminds me of the John Belushi film, "1941," I think it was, World War I with a leather cap and flying goggles. That's our Copilot icon. Now, if there's a transient issue, a network connectivity issue, if the actual GitHub Copilot API endpoint is acting up, this icon will turn into a spinning circle, so it can actually be helpful in debugging problems and isolating root causes. Another thing is that maybe you had too much coffee and you clicked a couple times, and the next thing you know, you see that your completions aren't working. You create a new file, for example, and you come over here into your code file and you start to type, and you may be getting some, as you see here, some snippets and other stuff coming in from VS Code in your extensions, but you're not seeing anything from the AI. This is just a reminder for you to be really careful, depending on your IDE, to know where that status control is and just keep an eye on it, 'cause you control it. See, if I give it a click again, what I had done is I did disable completions. So now it's back on. I want to show one more thing about that. So let's click the icon, and this time let's go to the settings. So it'll show the Settings UI. There's not a whole lot of settings to GitHub Copilot, as you can see. We can just click through 'em a little bit. Notebook, Extensions. Here's a pretty important one, I would say, the GitHub Copilot Enable. This is a dictionary, just a key list, key-value list with Booleans, and based on a language identifier. This is a link to the doc where it shows the different identifiers. You do true or false, and that determines whether Copilot will be enabled or not. Now actually, why do I have false for markdown? I definitely don't want false. I want true for markdown. That's going to mean that, well, I mean, if I put false, that means if I open a markdown file, I'm not going to get completions. I don't mean to over-explain. Other than that, I would strongly encourage you to look at all of the settings that the developers at GitHub and Microsoft have put together in the extension, because you'll find that the extension gets updated pretty much every day. And so it can be almost like a surprise to see things that you didn't before. It can also be annoying, especially as a technical trainer, and I know if you've done whiteboarding for customers, it can be embarrassing when you're leading a demo and you pause, thinking, "Why does this look different from how it did this morning?" I've been there, I've been there many, many times. Okay, so as I was saying, once we've gotten hold of the extension and we know it's working, the first thing you'll find, is as you're typing, like I just did, as soon as GitHub Copilot has some context to go on, it's going to start sending you suggestions. See, and this toolbar, again, is going to be specific to VS Code, but the idea is the same. We can press tab to accept the whole suggestion, which might be exactly what we need, but probably isn't. But at the least, the idea is we can come in here and we can start dressing it up. I can right click and go to Copilot, for example, and say, "What is this? Explain this to me." And we'll have the chat panel show up on the left and it starts to go through and describe exactly what this fizzBuzz sample function does. And if the chat is too verbose, just say, "Please condense to one small paragraph." What if you need to have something to say at standup in 15 minutes, you know? See, you're just using your natural language prompts. And another thing that GitHub Copilot Chat will generate, next prompts, follow up prompts. Don't ignore those, because they may lead you down paths that you didn't think of before. What about debugging? We can make a selection, Copilot, fix this. And it spotted it, and not only did GitHub Copilot spot the problem, it's nominated a solution, which I can accept, discard, or roll the dice again to get a new suggestion. I'll accept that. What about stuff that every dev likes to do, generating unit tests and documentation strings? That's always fun, right? Right click, Copilot, generate tests. Okay, well, this would be a case where we need, of course, to create a test file. So notice that when you're in line in a code file, we can go View in Chat, and now we can continue and carry on the file. So we're already well off and running using GitHub Copilot creating code. Now of course, there's the whole debugging experience. What happens when we actually run it, and more will be revealed as we go along. But I think at this point I'm satisfied that you'll now be able to, anchored in those docs, get GitHub Copilot integrated into your environment and start experimenting. Read up whenever you see one of those toolbars, like originally, and it all comes down to your prompt again. So if we had a function, keepComputerAwake, just based on what GitHub Copilot has to go on, which in this case, hmm! I may or may not like what it's giving me, but let me leave you with this. If it's been a while since you and your development team have last standardized on identifier names, you know, for variables and classes and functions, so on, methods, properties, et cetera, you might want to revisit not only just for your organizational clarity, but also to refactor your identifiers to be LLM-friendly. In other words, simply to have them be crisp. I know that's the proven practice anyway. You want your identifiers to be immediately identifiable, and that's absolutely true for GitHub Copilot. But okay, we'll leave it at that. (chuckles) Thank you. I hope you're as excited as I am about this stuff.
Contents
-
-
-
(Locked)
Learning objectives41s
-
(Locked)
Learn what GitHub Copilot is2m 15s
-
(Locked)
Understand how AI assists in coding1m 47s
-
(Locked)
Grasp the principles of Responsible AI2m 16s
-
(Locked)
Set up GitHub Copilot in your code editor2m 45s
-
(Locked)
Discover GitHub Copilot for non-coders1m 19s
-
(Locked)
Explore GitHub Copilot and accessibility1m 48s
-
Hands-on lab: Configure Copilot in your development environment14m 12s
-
(Locked)
-
-
-
-
-
-
-
-
-
-
-
-