Understanding Copilot

Pair programming is the idea of (usually two) developers working together, often in front of the same screen, also sometimes called “pairing.” GitHub Copilot can be seen as an “AI pair programmer” that helps you write code, enabling you to get more done, faster. It’s based on OpenAI’s Codex model, a new AI system trained on publicly available source code and natural language. But in reality, it has gone beyond this. Let’s denote GitHub Copilot as Copilot for the remainder of the book. Copilot suggests whole lines or entire functions right inside your editor.

How Copilot knows what to generate

The idea behind Copilot is that it learns from the code you and others have written and uses that knowledge to suggest new lines of code as you type.

How does Copilot work? It uses machine learning to build a model of the code you and others have written and suggests the best text for you to use next. There are two parts of importance, the trained model and the so-called in-memory context. The model is trained on public repositories on GitHub and the context is something it assembles at runtime from looking at your files. Using the context and the underlying model, it provides you with text suggestions. Copilot uses some of the following to build its context (i.e., its in-memory capability that it uses together with the trained model to provide suggestions):

• Your active file: The code you’re working on.
• Comments: Copilot uses comments to understand the context of your code.
• Open files and your workspace: It not only looks at the code in your active file but also at the code in other files in your workspace.
• Import statements: Even import statements are factored into Copilot’s suggestions.
• The underlying model and its training data: The code in public GitHub repositories constitutes the base of what it’s trained on.

Copilot capabilities and limits

So, what can Copilot do? It can do a lot, but here’s a non-exhaustive list of capabilities:

• Code completion: Copilot can complete lines of code for you.
• Code generation: Copilot can generate whole functions for you.
• Tests, comments, and documentation: Copilot can generate tests, comments, and documentation for you.
• Suggest improvements: Copilot can suggest improvements to your code. Improvements can come in many forms, from suggesting a better variable name or a better way to write a function to how to organize code better.
• Translate code: Copilot can translate code from one language to another. For example, it can translate Python code to JavaScript code.
• Answer questions: Copilot can answer questions about your code. For example, it can tell you what a function does or what a variable is used for, and answer questions about a domain such as “What is machine learning?”, for example.

Setup and installation

How can you get started? You can use Copilot from a variety of places and editors including Visual Studio, Visual Studio Code, GitHub Codespaces, and GitHub’s web-based editor. In this chapter, we’ll use Visual Studio Code.

Installing Copilot

To install Copilot, you need to install the GitHub Copilot extension for Visual Studio Code and also need to allow access.

Let’s review the steps in more detail (as outlined on the official Copilot docs page).

You can install the GitHub Copilot extension for Visual Studio Code from the Visual Studio Code Marketplace or from within Visual Studio Code. We will show the latter here:

1. In the Extension: GitHub Copilot tab in Visual Studio Code, select Install.
2. If you have not previously authorized Visual Studio Code in your GitHub account, you will be prompted to sign in to GitHub in Visual Studio Code.
3. If you have previously authorized Visual Studio Code for your account on GitHub, GitHub Copilot will be automatically authorized.
4. If you don’t get the prompt to authorize, select the bell icon in the bottom panel of the Visual Studio Code window.
5. In your browser, GitHub will request the necessary permissions for GitHub Copilot. To approve these permissions, select Authorize Visual Studio Code.
6. To confirm the authentication, in Visual Studio Code, select Open in the Visual Studio Code dialog box.

Refer to this page if you have any problems getting Copilot to work: https://docs.github.com/en/copilot/getting-started-with-github-copilot.

Getting started with Copilot

How do we get started? Well, provided you have installed Copilot and there’s a Copilot icon in the bottom-right corner of your Visual Studio Code window, you’re good to go.

Here’s a suggestion to get started:

1. Create a new file in Visual Studio Code named app.js.
2. Start typing the text prompt “Express web api with routes products and customers” as a comment at the top of the file like so, and press Enter:

   //Express web api with routes products and customers
   

3. Give it a few seconds and you should see a suggestion from Copilot as follows:

   const express = require('express');
   

   If nothing appears, try pressing Ctrl + Spacebar to trigger a suggestion or start typing the start of the code, i.e., const, and wait for a suggestion to appear.

4. You will have to press the Tab key to accept the suggestion. At this point, Copilot can keep generating code for you. To ensure it does, press Enter and watch as Copilot generates more code for you. Repeatedly press Enter and press Tab to accept the suggestions until you have code similar to the following:

   const app = express();
   app.get('/products', (req, res) => {
     res.send('products');
   });
   app.get('/customers', (req, res) => {
     res.send('customers');
   });
   app.listen(3000, () => {
     console.log('Server listening on port 3000');
   });
   

5. Congratulations, you’ve just written your first lines of code with Copilot. Feel free to experiment with Copilot and try adding comments, so-called prompts, in the middle of your code and see what happens. Also, try varying the prompts and see what happens.

Assignment: improve the code

As an assignment, you’re asked to improve the code generated by Copilot. Here are a few suggestions:

• Add a route for the root of the web API.
• Add a route for a specific product.
• Add documentation for one of the routes.

Solution

Here’s a possible solution:

const express = require('express');
app = express();
// add default route
app.get('/', (req, res) => {
  res.send('Hello world');
});
app.get('/products', (req, res) => {
  res.send('products');
});
// document route
/**
 * Get a product by id
 * @param {number} id - The id of the product
 */
app.get('/products/:id', (req, res) => {
  res.send(`product with id ${req.params.id}`);
});
app.get('/customers', (req, res) => {
  res.send('customers');
});
app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

Challenge

See if you can add a test for one of the routes.

In the next chapter, we will look at how to use Copilot in more detail. To use any AI assistant well, you need to understand how it works and how to use it. There’s a skill associated with using these tools well and it’s called prompt engineering. Prompt engineering is the art of writing prompts, not only to make it understand your intentions but also to produce an output you’re happy with. It’s more than just writing a comment; you can instruct your AI assistant to solve something, apply a form of reasoning to it, and much more. The next chapter presents the central theme of this book, prompt engineering.

References

• Copilot landing page: https://github.com/features/copilot
• Copilot docs: https://docs.github.com/en/copilot/getting-started-with-github-copilot