Code completions with GitHub Copilot in VS Code

GitHub Copilot provides autocomplete-style code completions from an AI pair programmer as you code. As you start writing code or code-related items (comments, test, and more), Copilot presents suggestions automatically in the editor to help you code more efficiently. GitHub Copilot provides suggestions for numerous languages and a wide variety of frameworks.

Getting started

Note: After reviewing this topic, you can get started with the introductory Copilot getting started tutorial to get set up and take a hands-on tour of Copilot in VS Code.

  • To use GitHub Copilot, you must have an active subscription for GitHub Copilot in your personal account, or you need to be assigned a seat by your organization.

  • To use GitHub Copilot in VS Code, you must have the GitHub Copilot extension. When you install this extension, the GitHub Copilot Chat extension is also installed.

Follow these steps to set up GitHub Copilot in VS Code by signing up for a subscription and installing the Copilot extension in VS Code.

Inline suggestions

Copilot offers code suggestions as you type: sometimes the completion of the current line, sometimes a whole new block of code. You can accept all, or part of a suggestion, or you can keep typing and ignore the suggestions.

Notice in the following example how Copilot suggests an implementation of the calculateDaysBetweenDates JavaScript function by using dimmed ghost text:

JavaScript ghost text suggestion.

When you're presented with an inline suggestion, you can accept it with the Tab key.

Copilot tries to apply the same coding style for the code suggestions that you already have in your code. Notice in the following example that Copilot applies the same input parameter naming scheme from the add method for the suggested subtract method.

JavaScript ghost text suggestion.

Partially accepting suggestions

You might not want to accept an entire suggestion from GitHub Copilot. You can use the ⌘→ (Windows, Linux Ctrl+Right) keyboard shortcut to accept either the next word of a suggestion, or the next line.

Alternative suggestions

For any given input, Copilot might offer multiple, alternative suggestions. You can hover over the suggestion to any of the other suggestions.

Hovering over inline suggestions enables you to select from multiple suggestions

Generate suggestions from code comments

Instead of relying on Copilot to provide suggestions, you can provide hints about what code you expect by using code comments. For example, you could specify a type of algorithm or concept to use (for example, "use recursion" or "use a singleton pattern"), or which methods and properties to add to a class.

The following example shows how to instruct Copilot to create a class in TypeScript to represent a student, providing information about methods and properties:

Use code comments to let Copilot generate a Student class in TypeScript with properties and methods.

Enable or disable inline suggestions

You can temporarily enable or disable code completions either for all languages, or for specific languages only.

  1. The GitHub Copilot status icon in the VS Code Status Bar indicates whether GitHub Copilot is enabled or disabled.

    Screenshot showing the VS Code status bar, highlighting the Copilot icon that indicates Copilot is active.

  2. To enable or disable Copilot completions, first select the GitHub Copilot icon in the Status Bar.

  3. If you are disabling GitHub Copilot, you are asked whether you want to disable suggestions globally, or for the language of the file you are currently editing.

    • To disable suggestions from GitHub Copilot globally, select Disable Globally.
    • To disable suggestions from GitHub Copilot for the specified language, select Disable for <language>.

    Screenshot showing the VS Code command menu for Copilot, highlighting the options to disable completions.

Tips & tricks

Context

To give you relevant inline suggestions, Copilot looks at the current and open files in your editor to analyze the context and create appropriate suggestions. Having related files open in VS Code while using Copilot helps set this context and lets the Copilot see a bigger picture of your project.

Settings

You can configure the font for the inline suggestions with the editor.inlineSuggest.fontFamily setting.

Next steps

  • Get started with the introductory Copilot tutorial to get set up with Copilot in VS Code and experience Copilot hands-on.

  • Learn how you can use AI chat conversations with GitHub Copilot Chat.

Additional resources

You can read more about Copilot and how to use it in VS Code in the GitHub Copilot documentation.

Or check out the VS Code Copilot Series on YouTube, where you can find more introductory content and programming-specific videos for using Copilot with Python, C#, Java, PowerShell, and more.

04/04/2024