Making Better
Hacks, Faster
with GitHub Copilot
Hey! I’m Alberto.
● I’m a coach at MLH.
● I work as Fronted Developer at Bego.
● I study mechatronics engineering at the IPN.
● I love talking about custom keyboards or other PC
related topics.
● Photography enthusiast.
@alberthor47
linktr.ee/alberthor47
GitHub Copilot
Welcome @MLH, I’m your Copilot and I’m here to help you get things done faster.
I'm powered by Al, so surprises and mistakes are possible. Make sure to verify any generated code or suggestions.
MLH
What should we talk about in a presentation about getting started with GitHub Copilot at hackathons?
GitHub Copilot
As an Al programming assistant, I can provide an outline for a presentation about GitHub Copilot:
1. What is GitHub Copilot?
Why would you use it?
2. Setting up GitHub Copilot.
Getting started using Visual Studio Code & the GitHub Copilot extension.
3. Using GitHub Copilot.
An interactive tutorial using some of the features of GitHub Copilot.
What is GitHub Copilot?
GitHub Copilot is an AI pair
programmer, that can help you
write, debug, and understand code.
Create a new button component /fix myVar is undefined /explain
Accept Discard Accept Discard Accept Discard
Why use GitHub Copilot?
24 frustrating hours just turned into 37 hours in flow.
Source: https://github.blog/2022-09-07-research-quantifying-github-copilots-impact-on-developer-productivity-and-happiness/
Setting up GitHub Copilot
GitHub Copilot lives where you write code.
What text editor is best?
Put the knives away.
Credit: XKCD https://xkcd.com/378/
GitHub Copilot lives where you write code.
Visual Studio Code Visual Studio Vim Neovim JetBrains IDEs
Also on your command line through gh cli…
Butterflies coming soon?
Let’s get started with Visual Studio Code
Free Download
for your system
code.visualstudio.com
Intellisense Built-in Git
Smart completions from Pull, commit, and push all
your code. without leaving your editor.
Run & Debug Extensions
Run your code right from the Add features to make the
IDE. editor match your needs.
Install the Copilot Extension
Ctrl-⇧-P / ⌘-⇧-P
Opens the Command Palette.
Type Install Extension
Install the Copilot Extension
Search for
GitHub Copilot
Install the Copilot Extension
Select Install
Activate Copilot
Free for Students
Claim the GitHub Student Developer Pack
Access dozens of professional tools
for free, while you’re a student.
Signup for Student Developer Pack
https://hackp.ac/pack
Using GitHub Copilot
Starting a Project
Open a New Window
Select Clone Git Repo…
Clone mlh/copilot-starter
Clone:
mlh/copilot-starter
Open app.py
Using Copilot to Explain Code
Ctrl-I / ⌘-I
Opens GitHub Copilot
Type /explain
Seeing the Code in Action
Ctrl-⇧-P / ⌘-⇧-P
Opens the Command Palette.
Type Create Terminal
Seeing the Code in Action
Ctrl-⇧-P / ⌘-⇧-P
Opens the Command Palette.
Type Create Terminal
Seeing the Code in Action
Type
pip install -r requirements.txt
Seeing the Code in Action
Type
python -m flask run --debug
Seeing the Code in Action
‼ 🤯
Fixing the Error
Ctrl-I / ⌘-I
Opens GitHub Copilot
Type /fix
Fixing the Error
Ctrl-I / ⌘-I
Opens GitHub Copilot
Type /fix
Fixing the Error
🥳
Adding to the Program
Ctrl-I / ⌘-I
Opens GitHub Copilot
Type
add a route that shows
hours since the epoch
Adding to the Program
Ctrl-I / ⌘-I
Opens GitHub Copilot
Type
add a route that shows
hours since the epoch
Pairing with Copilot
Start creating a new
route for /minutes
Tab ↹
Pairing with Copilot
Start creating a new
route for /minutes
Tab ↹
Next Steps
Remember: Copilot Makes Errors
Copilot is built on OpenAI’s GPT-4 model.
It will write bad code and it won’t
understand what you want every time.
It also only has code samples up to
September 2021, so it won’t know about new
libraries, APIs, etc.
You’ll need to read, understand, and edit
the code it produces, but you’re a hacker,
you’ll do great.
Add Copilot to Your Team
GitHub Copilot is here for you the
entire hackathon and can do even
more with more complicated code.
Keep Copilot pairing with you for
the event.
It won’t even ask for prizes if
you win.
Create a new button component /fix myVar is undefined /explain
Accept Discard Accept Discard Accept Discard
Additional Resources
hackp.ac/copilot-guides: Set up and
navigate the various functions of GitHub
Copilot across all of the supported
environments.
hackp.ac/copilot-examples: See practical
examples of how GitHub Copilot can help
you work.
hackp.ac/copilot-config: Learn how to
configure GitHub Copilot to your personal
preferences.
