Ga naar hoofdinhoud

Hands-on: GitHub Copilot

Reading time: ~12 minutes

What Is GitHub Copilot?​

GitHub Copilot is an AI coding assistant that runs inside your code editor (VS Code). It works in two ways:

  1. Autocomplete — As you type, Copilot suggests code completions (like a very smart autocomplete)
  2. Copilot Chat — A chat panel inside VS Code where you can ask questions about your code

Before You Start​

Make sure you have:

How to Get Copilot Free as a Student​

  1. Go to education.github.com
  2. Click "Join GitHub Education"
  3. Verify your student status (school email or student ID)
  4. Once approved, Copilot is automatically available in your GitHub account

Approval usually takes a few minutes to a few hours. Do this at least a few days before the hackathon.

Step 1: Install the Copilot Extension​

  1. Open VS Code
  2. Click the Extensions icon in the left sidebar (or press Ctrl+Shift+X)
  3. Search for "GitHub Copilot"
  4. Click Install on the "GitHub Copilot" extension (by GitHub)
  5. Also install "GitHub Copilot Chat" (separate extension)
  6. VS Code will ask you to sign in to GitHub — follow the prompts

After installation, you should see a small Copilot icon in the bottom status bar of VS Code.

Step 2: Using Autocomplete​

This is Copilot's main feature. As you type code, it suggests completions in gray text.

How it works:​

  1. Start typing a function, comment, or code structure
  2. Copilot shows a suggestion in gray text
  3. Press Tab to accept the suggestion
  4. Press Esc to dismiss it
  5. Press Alt+] to see the next suggestion (if there are multiple)

Example:​

Type this comment in a JavaScript file:

// function that checks if a number is prime

Copilot will suggest a complete function below the comment. Press Tab to accept it.

Tips for better autocomplete:​

  • Write descriptive comments first — Copilot uses your comments as context
  • Name your variables clearly — calculateTotalPrice gives better suggestions than calc
  • Start the function signature — typing function validateEmail( gives Copilot enough context
  • Keep your file open — Copilot reads the current file for context

What NOT to do:​

  • Don't accept every suggestion without reading it
  • Don't assume the code is correct — always review
  • Don't use it for security-sensitive code without careful review

Step 3: Using Copilot Chat​

Copilot Chat is a conversation panel inside VS Code where you can ask questions.

How to open it:​

  • Press Ctrl+Shift+I (Windows/Linux) or Cmd+Shift+I (Mac)
  • Or click the chat icon in the left sidebar

What you can ask:​

Explain code:

"What does this function do?" (Select the code first, then ask)

Fix errors:

"I'm getting this error: TypeError: Cannot read property 'map' of undefined. Here's my code..."

Generate code:

"Write a function that takes an array of numbers and returns the average"

Refactor:

"How can I make this code shorter/cleaner?"

Slash commands in Copilot Chat:​

CommandWhat it does
/explainExplain the selected code
/fixSuggest a fix for problems in the selected code
/testsGenerate tests for the selected code
/docGenerate documentation for the selected code

Example workflow:​

  1. Select a block of code in your editor
  2. Open Copilot Chat
  3. Type /explain
  4. Copilot explains what the code does, line by line

Pro Tips​

1. Be specific in comments​

Instead of:

// handle the data

Write:

// fetch user data from the API, filter by active status, and sort by name

2. Use Copilot for repetitive patterns​

If you need to write similar code multiple times (e.g., form fields, API endpoints), write the first one manually and let Copilot generate the rest.

3. Combine with Claude​

Use Copilot for quick, in-editor suggestions. Switch to Claude (next tutorial) when you need:

  • Longer explanations
  • Help planning your approach
  • Generating larger blocks of code
  • Debugging complex issues

4. Learn from the suggestions​

Don't just accept — read the suggestions. You'll pick up new patterns, functions, and approaches you didn't know about.

Quick Reference​

ActionShortcut
Accept suggestionTab
Dismiss suggestionEsc
Next suggestionAlt+]
Previous suggestionAlt+[
Open Copilot ChatCtrl+Shift+I
Trigger suggestion manuallyAlt+\

Next: Tutorial 4: Claude for Coding