Core FeaturesLesson 6 of 10

Inline Code Explanations

2 min readGitHub Copilot for Designers

Understand developer code instantly. Ask Copilot to explain what code does.

When reviewing code from developers or looking at examples, sometimes the code is confusing. Copilot can break it down into simple terms, perfect for designers who need to understand what developers are building.

How to Get Explanations

Highlight the Code

Select (highlight) the code you don't understand

Right-Click and Explain

Right-click on the selection and look for "Copilot: Explain This" option

Read the Explanation

Copilot will break down what the code does in simple language, line by line

Ask Follow-ups

If you still have questions, ask them in Copilot Chat (Ctrl+Alt+I / Cmd+Alt+I)

Example Code That Needs Explanation

const handleFormSubmit = (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  const data = Object.fromEntries(formData);
  fetch('/api/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  });
};

// Step by step:
// 1. e.preventDefault() stops the form from refreshing the page
// 2. FormData captures all the input values
// 3. fetch sends the data to the server
// 4. The server responds with confirmation

VS Code showing Copilot explanation of JavaScript function alongside the code — Copilot explaining complex code in simple terms

Why This Matters for Designer-Developer Collaboration

Understanding what code does helps you make better design decisions. You'll know what's possible to build, what might take longer, and how to communicate with developers about implementation.

Skill Building

Every time you ask Copilot to explain code, you're learning. Over time, you'll understand more code patterns and be able to collaborate more effectively with developers.

← Back to GitHub Copilot Guide for Designers overview

Core FeaturesLesson 6 of 10

Inline Code Explanations

2 min readGitHub Copilot for Designers

Understand developer code instantly. Ask Copilot to explain what code does.

How to Get Explanations

Highlight the Code

Select (highlight) the code you don't understand

Right-Click and Explain

Right-click on the selection and look for "Copilot: Explain This" option

Read the Explanation

Copilot will break down what the code does in simple language, line by line

Ask Follow-ups

If you still have questions, ask them in Copilot Chat (Ctrl+Alt+I / Cmd+Alt+I)

Example Code That Needs Explanation

const handleFormSubmit = (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  const data = Object.fromEntries(formData);
  fetch('/api/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  });
};

// Step by step:
// 1. e.preventDefault() stops the form from refreshing the page
// 2. FormData captures all the input values
// 3. fetch sends the data to the server
// 4. The server responds with confirmation

Why This Matters for Designer-Developer Collaboration

Understanding what code does helps you make better design decisions. You'll know what's possible to build, what might take longer, and how to communicate with developers about implementation.

Skill Building

Every time you ask Copilot to explain code, you're learning. Over time, you'll understand more code patterns and be able to collaborate more effectively with developers.

← Back to GitHub Copilot Guide for Designers overview