113 lines
6.5 KiB
Markdown
113 lines
6.5 KiB
Markdown
---
|
|
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 Visual Studio Code, and start seeing suggestions as you write comments and code.'
|
|
product: '{% data reusables.gated-features.copilot %}'
|
|
versions:
|
|
feature: 'copilot'
|
|
topics:
|
|
- Copilot
|
|
---
|
|
|
|
## Prerequisites
|
|
|
|
|
|
To use {% data variables.product.prodname_copilot %} in Visual Studio Code, you must have Visual Studio Code installed. For more information, see the [Visual Studio Code download page](https://code.visualstudio.com/Download).
|
|
|
|
|
|
## Installing the Visual Studio code extension
|
|
|
|
To use {% data variables.product.prodname_copilot %}, you must first install the Visual Studio Code extension.
|
|
|
|
1. In the Visual Studio Code Marketplace, go to the [{% data variables.product.prodname_copilot %} extension](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) page and click **Install**.
|
|
|
|
2. A popup will appear, asking to open Visual Studio Code. Click **Open Visual Studio Code**.
|
|
3. In the "Extension: {% data variables.product.prodname_copilot %}" tab in Visual Studio Code, click **Install**.
|
|
|
|
4.
|
|
|
|
|
|
## 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 %}
|
|
{% data reusables.copilot.type-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.
|
|
|
|
{% data reusables.copilot.accept-suggestion %}
|
|
|
|
## Seeing alternative suggestions
|
|
|
|
{% data reusables.copilot.alternative-suggestions %}
|
|
|
|
{% data reusables.copilot.create-js-file %}
|
|
{% data reusables.copilot.type-function-header %}
|
|
{% data variables.product.prodname_copilot %} will show you a suggestion.
|
|
3. Optionally, you can see alternative suggestions.
|
|
- On macOS, press <kbd>Option (⌥) or Alt</kbd>+<kbd>]</kbd> (or <kbd>Option (⌥) or Alt</kbd>+<kbd>[</kbd>).
|
|
- On Windows or Linux, press <kbd>Alt</kbd>+<kbd>]</kbd> (or <kbd>Alt</kbd>+<kbd>[</kbd>).
|
|
4. If {% data variables.product.prodname_copilot %} offers a suggestion you want to accept, press <kbd>Tab</kbd>.
|
|
5. Alternatively, to reject all suggestions, press <kbd>Esc</kbd>.
|
|
6. Optionally, you can hover over the suggestion to see the {% data variables.product.prodname_copilot %} command palette for choosing suggestions.
|
|
|
|
## Getting more suggestions
|
|
|
|
{% data reusables.copilot.suggestions-new-tab %}
|
|
|
|
{% data reusables.copilot.create-js-file %}
|
|
{% data reusables.copilot.type-function-header %}
|
|
{% data variables.product.prodname_copilot %} will show you a suggestion.
|
|
2. To open a new tab with multiple additional options, press <kbd>Ctrl</kbd>+<kbd>Enter</kbd>.
|
|
3. To accept a suggestion from the new tab, above the suggestion you want to accept, click **Accept solution**.
|
|
|
|
4. Alternatively, to reject all the suggestions, close the "Copilot" tab.
|
|
|
|
## Generating code suggestions from comments
|
|
|
|
{% data variables.product.prodname_copilot %} can also generate code suggestions from comments.
|
|
|
|
{% data reusables.copilot.create-js-file %}
|
|
1. In the JavaScript file, type the following comment:
|
|
```
|
|
// find all images without alternate text
|
|
// and give them a red border
|
|
function process() {
|
|
```
|
|
{% data variables.product.prodname_copilot %} will suggest an implementation of the function.
|
|
|
|
## 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 <kbd>Enter</kbd>.
|
|
```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 <kbd>Tab</kbd>, then <kbd>Enter</kbd>.
|
|
1. Type the following comment and then press <kbd>Enter</kbd>.
|
|
```javascript{:copy}
|
|
// Return the current time
|
|
```
|
|
{% data variables.product.prodname_copilot %} will suggest an implementation for the default handler.
|
|
1. To accept each line, press <kbd>Tab</kbd>.
|
|
|
|
## Enabling and disabling {% data variables.product.prodname_copilot %}
|
|
|
|
You can enable or disable {% data variables.product.prodname_copilot %} from within Visual Studio Code. The {% data variables.product.prodname_copilot %} status icon in the bottom panel of the Visual Studio Code 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 Visual Studio Code 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/)
|
|
- [About {% data variables.product.prodname_copilot %}](/copilot/overview-of-github-copilot/about-github-copilot)
|