GitHub Copilot Chat Feature
Copilot Chat transforms the way you interact with your code editor. Instead of only accepting or rejecting grey suggestions, you can have a full conversation — ask questions, request changes, and get explanations in plain English. This topic covers how to use Copilot Chat effectively across different scenarios.
Opening Copilot Chat
METHOD 1 — Keyboard Shortcut: Windows/Linux: Ctrl + Shift + I Mac: Ctrl + Shift + I → Opens Chat in the sidebar METHOD 2 — Activity Bar: Click the Copilot Chat icon (speech bubble) on the left sidebar METHOD 3 — Right-click Menu: Highlight code → Right-click → Copilot → Open in Chat METHOD 4 — Inline Chat (stays inside your file): Windows/Linux: Ctrl + I Mac: Cmd + I
The Chat Interface Layout
┌─────────────────────────────────────────┐
│ COPILOT CHAT [≡] [X]│
├─────────────────────────────────────────┤
│ │
│ [Context: app.js, UserModel.js] │ ← File context shown
│ │
│ ● You (10:45 AM) │
│ Explain what this function does │
│ │
│ ◎ Copilot │
│ This function handles user login... │
│ [Insert into Chat] [Copy] │
│ │
│ ● You (10:46 AM) │
│ Can you make it return a JWT token? │
│ │
│ ◎ Copilot │
│ Here's the updated version: │
│ ```javascript │
│ async function login(...) { ... } │
│ ``` │
│ [Apply to Editor] [Copy] │
│ │
├─────────────────────────────────────────┤
│ > Ask Copilot... [Send] │
└─────────────────────────────────────────┘
What You Can Ask in Chat
Copilot Chat handles four main types of requests:
TYPE 1: EXPLAIN "What does this function do?" "Why does this code use a closure here?" "Explain this regex pattern to me" TYPE 2: GENERATE "Write a function that paginate results from an API" "Create a React component for a dropdown menu" "Give me a SQL query to find duplicate emails" TYPE 3: FIX "This function throws a null reference error. Fix it." "Why is this async function not returning the value?" "My for loop runs one extra time. What's wrong?" TYPE 4: REFACTOR "Rewrite this function using async/await instead of callbacks" "Split this 80-line function into smaller functions" "Make this code follow the DRY principle"
Using @workspace, @file, and #code
Copilot Chat supports special prefixes that tell it where to look for context:
@workspace → References your entire project folder → Use for: "Find all places where I handle authentication" @file → References a specific file you name → Use for: "Explain the UserModel in @file:models/user.js" #selection → References the code you have highlighted → Use after highlighting code: "Refactor #selection" #codebase → Searches your entire codebase for relevant files → Use for: "What does my payment module do?"
EXAMPLE WITH @workspace: You: @workspace Where do I handle error logging? ────────────────────────────────────────────────── Copilot: I found error logging in 3 places: 1. middleware/errorHandler.js — line 14 2. services/api.js — line 87 3. utils/logger.js — lines 22–45 These all use the Winston logger. You can centralize them further by calling logger.error() consistently.
Asking Copilot to Explain Code
Highlight any block of code, open Chat, and ask "What does this do?" Copilot reads the selection and explains it in plain language — useful when you inherit code written by someone else or encounter an unfamiliar pattern.
CODE YOU HIGHLIGHT:
const memoize = (fn) => {
const cache = new Map();
return (...args) => {
const key = JSON.stringify(args);
if (cache.has(key)) return cache.get(key);
const result = fn(...args);
cache.set(key, result);
return result;
};
};
YOUR QUESTION: What does this function do?
COPILOT EXPLAINS:
This is a memoization helper. It wraps any function
and stores its results in a cache (a Map object).
The next time you call the function with the same
arguments, it returns the cached result instead of
running the function again. This speeds up expensive
operations that are called repeatedly with the same input.
For example: memoize(calculateTax)(1000) runs the
calculation once, then returns the stored answer
for every future call with 1000.
Asking Copilot to Fix Errors
When your code has a bug, paste the error message into Chat along with the relevant code. Copilot uses both to pinpoint the problem.
YOU: I'm getting this error:
TypeError: Cannot read properties of undefined (reading 'name')
at line 24 in ProductCard.jsx
Here is the code:
function ProductCard({ product }) {
return {product.name};
}
COPILOT RESPONDS:
The error occurs when `product` is undefined — meaning
the component renders before data is available.
Fix: Add a guard clause:
function ProductCard({ product }) {
if (!product) return null;
return {product.name};
}
Or use optional chaining:
return {product?.name};
The Conversation History Advantage
Chat remembers everything said in the current session. You can refer back to earlier code without repeating it.
TURN 1: You: Write a function to validate a phone number Copilot: [writes validatePhone function] TURN 2: You: Now add support for international numbers starting with + Copilot: [updates the SAME function from Turn 1 — no need to paste it again] TURN 3: You: Write a test for that function Copilot: [writes tests for the version from Turn 2]
This conversational flow makes it natural to build complex features incrementally. Each turn builds on the last.
Using Chat for Learning
Chat doubles as a coding teacher. Use it to understand concepts, not just to generate code.
LEARNING QUESTIONS THAT WORK WELL: "What is the difference between == and === in JavaScript?" "Why should I avoid using var in modern JavaScript?" "Explain what a Promise chain looks like vs async/await" "When would I use a Set instead of an Array?" "What does it mean for a function to be pure?"
Unlike a search engine, Copilot answers in the context of your project. Ask "What is a closure?" and it might use a variable name from your own file as the example — making the explanation immediately relevant.
Applying Chat Suggestions to Your Editor
When Copilot produces code in the Chat panel, you see an Apply to Editor button next to the code block. Clicking it inserts the code into your active file at the cursor position. This eliminates the need to copy and paste manually.
For targeted changes — like modifying a specific function — highlight the function first, then ask Chat to update it. The Apply button replaces just the highlighted section rather than appending code at the cursor.
Copilot Chat works best when you treat it like a knowledgeable colleague sitting next to you. Describe what you are trying to do, share what you have, and ask precise questions. The more context you give, the more useful the responses become.