Skip to content

Latest commit

 

History

History
192 lines (124 loc) · 7.16 KB

gettingstarted.md

File metadata and controls

192 lines (124 loc) · 7.16 KB

Getting Started with GitHub Copilot in Visual Studio Code

1. Installing the Visual Studio Code extension

To use GitHub Copilot, you first need to install the Visual Studio Code extension.

  1. Visit the GitHub Copilot extension page on the Visual Studio Code Marketplace and install the extension.

  2. Open Visual Studio Code. You will be prompted to authorize the extension by signing in to GitHub.

    Sign into GitHub to use GitHub Copilot

  3. After you have authorized the extension, you will be returned back to Visual Studio Code.

If you receive the following message, you have not yet been added to the GitHub Copilot Technical Preview. The Technical Preview is open to a limited number of testers. To join the waitlist, visit copilot.github.com.

Not in the preview

After installation, a GitHub Copilot icon should appear in the status-panel at the bottom of your Visual Studio Code window.

Having problems installing? Visit the Feedback forum.

2. Seeing your first suggestion

GitHub Copilot provides suggestions for dozens of languages and a wide variety of frameworks, but it works especially well for Python, JavaScript, TypeScript, Ruby, and Go. The following samples are in JavaScript, but other languages will work similarly.

  1. Create a new JavaScript (.js) file.

  2. Type the following function header:

    function calculateDaysBetweenDates(begin, end) {
  3. GitHub Copilot will automatically suggest an entire function body in grayed text, as shown below. The exact suggestion may vary.

    Code suggested by GitHub Copilot

  4. Press Tab to accept the suggestion.

GitHub Copilot will attempt to match your code's context and style. You can edit the suggested code as you choose.

3. Choosing alternate suggestions

For any given input, GitHub Copilot can provide multiple suggestions. As the developer you are always in charge; you can select which suggestion to use, or reject them all.

  1. Clear the file (or start a new one), and type the following again:

    function calculateDaysBetweenDates(begin, end) {
  2. GitHub Copilot will again show you a suggested completion.

  3. Instead of pressing Tab:

    • On macOS, press Option (⌥) or Alt+] (or Option (⌥) or Alt+[).
    • On Windows or Linux, press Alt+] (or Alt+[).

    GitHub Copilot will cycle through other alternative suggestions.

  4. When you see a suggestion you like, press Tab to accept it.

  5. If you don't like any of the suggestions, press Esc.

You can also hover over a suggestion to see the GitHub Copilot command palette for choosing suggestions.

Code suggested by GitHub Copilot

4. Getting more suggestions

Sometimes, you may not want to use any of the first set of suggestions. You can ask GitHub Copilot to return more.

  1. Clear the file (or start a new one), and type the following again:

    function calculateDaysBetweenDates(begin, end) {
  2. GitHub Copilot will again show you a suggested completion.

  3. Press Ctrl+Enter. GitHub Copilot will open a new tab and suggest multiple options, as shown below.

    Suggestions window

  4. Pick a suggestion that you like, then click "Accept Solution" to continue.

  5. If you don't like any of the returned suggestions, just close the suggestions tab.

5. Generating code from a comment

GitHub Copilot can understand significantly more context than most code assistants, and can generate entire functions from something as simple as a comment.

  1. Create a new JavaScript file, and type the following:

    // find all images without alternate text
    // and give them a red border
    function process() {
  2. GitHub Copilot will automatically suggest an implementation:

    Code from comment

6. Using a framework

GitHub Copilot is especially useful for working with APIs and frameworks you're unfamiliar with. Here, we'll use GitHub Copilot to create a simple Express server that returns the current time.

  1. Create a new JavaScript file, type the following comment, and then press Enter.

    // Express server on port 3000
  2. GitHub Copilot will generate lines of code to create the Express app. Press Tab then Enter to accept each line.

  3. Type the following comment and press Enter.

    // Return the current time
  4. GitHub Copilot will generate code for the default handler. Press Tab to accept each line.

7. More examples

GitHub Copilot can do even more. Check out the examples on copilot.github.com to see more, or the Gallery in this repository for the latest examples from us and the community.

Got an example of your own? We welcome you to share it on our Feedback forum.

8. Keyboard shortcuts

The following lists the most common keyboard shortcuts relevant for GitHub Copilot. If you wish to rebind them, check out the configuration guide.

  • Accept an inline suggestion: Tab.

  • Dismiss an inline suggestion: Esc.

  • Show next inline suggestion: Alt + ] or Option (⌥) + ].

  • Show previous inline suggestion: Alt + [ or Option (⌥) + [.

  • Trigger inline suggestion: Alt + \ or Option (⌥) + \.

  • Open Copilot (10 suggestions in separate pane): Ctrl + Enter.

9. Enabling and disabling GitHub Copilot

The GitHub Copilot status icon in the bottom panel of the Visual Studio Code window indicates whether GitHub Copilot is enabled or disabled. Its background is blue when enabled, and red when disabled. To enable or disable GitHub Copilot, click the icon. You will be asked whether you wish to toggle for the current file type, or globally.

Enabled Copilot Status Icon

10. Learn More

To learn more about configuring GitHub Copilot, go to the documentation table of contents.