Insider newsletter digest: How to use GitHub Copilot

Welcome to our rebranded GitHub Insider newsletter with tips, technical guides, and best practices to help you boost your productivity and happiness. We heard your feedback and refreshed the newsletter experience. Now, each month, Insider will deliver deep dives into one of GitHub’s products, and provide tips and tricks to take your development to the next level.

This month, we’re delving into GitHub Copilot. 92% of developers are already using AI coding tools both in and outside of work (according to our latest survey), and AI could remove major disruptions, delays, and cognitive load that developers previously had to endure. So, we wanted to break down our guide to using GitHub Copilot, and share some prompts, tips, and use cases. Here’s what you’ll find in this post:

• Three best practices for prompting GitHub Copilot
• Some additional tips for communicating with the AI pair programmer

Once you’ve installed the GitHub Copilot extension in your preferred IDE, it’s best to experiment with how to communicate with the AI programmer to get your desired results. Let’s get started.

1. Setting the stage with a high-level goal is useful when you’re starting with a blank file or empty codebase. It provides GitHub Copilot with the context of what you want to build or accomplish, and it primes the tool with a big picture description of what you want it to generate before you jump in with the details.

/* Create a basic markdown editor in Next.js with the following features:
- Use react hooks
- Create state for markdown with default text "type markdown here"
- A text area where users can write markdown - Show a live preview of the markdown text as I type
- Support for basic markdown syntax like headers, bold, italics - Use React markdown npm package
- The markdown text and resulting HTML should be saved in the component's state and updated in real time */

/* Create a basic markdown editor in Next.js with the following features:
- Use react hooks
- Create state for markdown with default text "type markdown here"
- A text area where users can write markdown - Show a live preview of the markdown text as I type
- Support for basic markdown syntax like headers, bold, italics - Use React markdown npm package
- The markdown text and resulting HTML should be saved in the component's state and updated in real time */

A detailed comment like the one above can prompt GitHub Copilot to generate a very simple, unstyled, but functional, markdown editor in less than 30 seconds. Keep in mind, though, that outputs from a generative AI tool are non-deterministic, so the responses may vary.

1. A simple, specific ask goes a long way. Though this might result in shorter outputs from GitHub Copilot, it helps to break down the steps and logic that the AI pair programmer needs to follow to achieve your goal. Then, let GitHub Copilot generate the code after each step instead of asking it to generate a bunch of code all at once. Think of it as writing a recipe: You break the cooking process down into simple, succinct steps, rather than writing a paragraph that describes the dish you want to make.

2. Learning from examples is not only useful for humans, but also for an AI pair programmer, so throw a bone or two to GitHub Copilot. Let’s say you want to extract the names from the array of data below and store it in a new array. A prompt that doesn’t provide an example might look something like this:

// Map through an array of arrays of objects to transform data
const data = [
[
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 }
],
[
{ name: 'Bob', age: 40 }
]
];

// Map through an array of arrays of objects to transform data
const data = [
[
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 }
],
[
{ name: 'Bob', age: 40 }
]
];

As a result, GitHub Copilot generates an incorrect usage of map. On the other hand, a prompt with an example might look something like this:

// Map through an array of arrays of objects
// Example: Extract names from the data array
// Desired outcome: ['John', 'Jane', 'Bob']
const data = [
[{ name: 'John', age: 25 }, { name: 'Jane', age: 30 }],
[{ name: 'Bob', age: 40 }]
];

// Map through an array of arrays of objects
// Example: Extract names from the data array
// Desired outcome: ['John', 'Jane', 'Bob']
const data = [
[{ name: 'John', age: 25 }, { name: 'Jane', age: 30 }],
[{ name: 'Bob', age: 40 }]
];

And that results in GitHub Copilot generating the desired outcome:

const mappedData = data.flatMap(sublist => sublist.map(person => person.name));

console.log(mappedData);
// Results: ['John', 'Jane', 'Bob']

const mappedData = data.flatMap(sublist => sublist.map(person => person.name));

console.log(mappedData);
// Results: ['John', 'Jane', 'Bob']

Here are some additional tips to help guide your conversation with GitHub Copilot:

1. Experiment with your prompts. If you don’t receive what you want on the first try, recraft your prompt by following the best practices above. Here are three iterations of the same request, from vague to specific:

# Write some code for grades.py

# Write some code for grades.py

The prompt above doesn’t provide any context or boundaries for GitHub Copilot to generate relevant suggestions.

# Implement a function in grades.py to calculate the average grade

# Implement a function in grades.py to calculate the average grade

This version of the prompt is more specific than the first one, but it doesn’t clearly define the input and output requirements.

# Implement the function calculate_average_grade in grades.py that takes a list of grades as input and returns the average grade as a floating-point number

# Implement the function calculate_average_grade in grades.py that takes a list of grades as input and returns the average grade as a floating-point number

This third iteration sets boundaries and outlines what the function should do. The comment was also rephrased to give GitHub Copilot a clear intention to verify against.

1. Keep a couple of relevant tabs open. GitHub Copilot uses a technique called neighboring tabs that allows the AI pair programmer to contextualize your code by processing all of the files open in your IDE instead of just the single file you’re working on. We don’t have an exact number of tabs that you should keep open to help GitHub Copilot contextualize your code, but from our experience, we’ve found that one or two is helpful.

Try your hand at prompting GitHub Copilot and follow our seven-step tutorial for using the tool to build a browser extension that clears your cache.

Ready to try these tips out for yourself? Start your free GitHub Copilot trial today.

Want to receive content like this once a month, right in your inbox? Sign up for the newsletter now >