---
title: Getting started with GitHub Copilot in Visual Studio Code
shortTitle: Visual Studio Code
intro: 'Learn how to install {% data variables.product.prodname_copilot %} in {% data variables.product.prodname_vscode %}, and start seeing suggestions as you write comments and code.'
product: '{% data reusables.gated-features.copilot %}'
versions:
feature: 'copilot'
topics:
- Copilot
---
## About {% data variables.product.prodname_copilot %} and {% data variables.product.prodname_vscode %}
{% data reusables.copilot.procedural-intro %}
If you use {% data variables.product.prodname_vscode %}, you can view and incorporate suggestions from {% data variables.product.prodname_copilot %} directly within the editor. This guide demonstrates how to use {% data variables.product.prodname_copilot %} within {% data variables.product.prodname_vscode %} for macOS, Windows, or Linux.
## Prerequisites
To use {% data variables.product.prodname_copilot %} in {% data variables.product.prodname_vscode %}, you must have {% data variables.product.prodname_vscode %} installed. For more information, see the [{% data variables.product.prodname_vscode %} download page](https://code.visualstudio.com/Download).
## Installing the {% data variables.product.prodname_vscode %} extension
To use {% data variables.product.prodname_copilot %}, you must first install the {% data variables.product.prodname_vscode %} extension.
1. In the {% data variables.product.prodname_vscode %} Marketplace, go to the [{% data variables.product.prodname_copilot %} extension](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) page and click **Install**.
1. A popup will appear, asking to open {% data variables.product.prodname_vscode %}. Click **Open {% data variables.product.prodname_vscode %}**.
1. In the "Extension: {% data variables.product.prodname_copilot %}" tab in {% data variables.product.prodname_vscode %}, click **Install**.
1. If you have not previously authorized {% data variables.product.prodname_vscode %} in your {% data variables.product.prodname_dotcom %} account, you will be prompted to sign in to {% data variables.product.prodname_dotcom %} in {% data variables.product.prodname_vscode %}.
- If you have previously authorized {% data variables.product.prodname_vscode %} in your {% data variables.product.prodname_dotcom %} account, {% data variables.product.prodname_copilot %} will be automatically authorized.
1. In your browser, {% data variables.product.prodname_dotcom %} will request the necessary permissions for {% data variables.product.prodname_copilot %}. To approve these permissions, click **Authorize {% data variables.product.prodname_vscode %}**. To refuse the permissions, click **Cancel**.
1. In {% data variables.product.prodname_vscode %}, in the "{% data variables.product.prodname_vscode %}" dialogue box, to confirm the authentication, click **Open**. To cancel the authentication, click **Cancel**.
## Seeing your first suggestion
{% data reusables.copilot.supported-languages %} The following samples are in JavaScript, but other languages will work similarly.
{% data reusables.copilot.create-js-file %}
1. In the JavaScript file, type the following function header. {% data variables.product.prodname_copilot %} will automatically suggest an entire function body in grayed text, as shown below. The exact suggestion may vary.
```javascript{:copy}
function calculateDaysBetweenDates(begin, end) {
```
{% data reusables.copilot.accept-suggestion %}
## Seeing alternative suggestions
{% data reusables.copilot.alternative-suggestions %}
{% data reusables.copilot.create-js-file %}
1. In the JavaScript file, type the following function header. {% data variables.product.prodname_copilot %} will show you a suggestion.
```javascript{:copy}
function calculateDaysBetweenDates(begin, end) {
```
{% data reusables.copilot.see-alternative-suggestions %}
| OS | See next suggestion | See previous suggestion |
| :- | :- | :- |
|macOS|Option (⌥) or Alt+]|Option (⌥) or Alt+[|
|Windows|Alt+]|Alt+[|
|Linux|Alt+]|Alt+[|
1. Alternatively, you can hover over the suggestion to see the {% data variables.product.prodname_copilot %} command palette for choosing suggestions.
{% data reusables.copilot.accept-or-reject-suggestion %}
## Seeing multiple suggestions in a new tab
{% data reusables.copilot.suggestions-new-tab %}
{% data reusables.copilot.create-js-file %}
1. In the JavaScript file, type the following function header. {% data variables.product.prodname_copilot %} will show you a suggestion.
```javascript{:copy}
function calculateDaysBetweenDates(begin, end) {
```
1. To open a new tab with multiple additional options, press Ctrl+Enter.
1. To accept a suggestion, above the suggestion, click **Accept Solution**. To reject all suggestions, close the tab.
## Generating code suggestions from comments
{% data reusables.copilot.generating-suggestions-from-comments %}
{% data reusables.copilot.create-js-file %}
1. In the JavaScript file, type the following comment. {% data variables.product.prodname_copilot %} will suggest an implementation of the function.
```javascript{:copy}
// find all images without alternate text
// and give them a red border
function process() {
```
## Using a framework
You can also use {% data variables.product.prodname_copilot %} to generate suggestions for APIs and frameworks. The following example uses {% data variables.product.prodname_copilot %} to create a simple Express server that returns the current time.
{% data reusables.copilot.create-js-file %}
1. In the JavaScript file, type the following comment and then press Enter.
```javascript{:copy}
// Express server on port 3000
```
{% data variables.product.prodname_copilot %} will suggest an implementation of the Express app.
1. To accept each line, press Tab, then Enter.
1. Type the following comment and then press Enter. {% data variables.product.prodname_copilot %} will suggest an implementation for the default handler.
```javascript{:copy}
// Return the current time
```
1. To accept each line, press Tab.
## Enabling and disabling {% data variables.product.prodname_copilot %}
You can enable or disable {% data variables.product.prodname_copilot %} from within {% data variables.product.prodname_vscode %}. The {% data variables.product.prodname_copilot %} status icon in the bottom panel of the {% data variables.product.prodname_vscode %} window indicates whether {% data variables.product.prodname_copilot %} is enabled or disabled. When enabled, the background color of the icon will match the color of the status bar. When disabled, the background color of the icon will contrast with the color of the status bar.
1. To enable or disable {% data variables.product.prodname_copilot %}, click the status icon in the bottom panel of the {% data variables.product.prodname_vscode %} window.
2. If you are disabling {% data variables.product.prodname_copilot %}, you will be asked whether you want to disable suggestions globally, or for the language of the file you are currently editing.
- To disable suggestions from {% data variables.product.prodname_copilot %} globally, click **Disable Globally**.
- To disable suggestions from {% data variables.product.prodname_copilot %} for the specified language, click **Disable for _LANGUAGE_**.
## Further reading
- [{% data variables.product.prodname_copilot %}](https://copilot.github.com/)