|
| 1 | +# Getting Started with GitHub Copilot in Visual Studio |
| 2 | + |
| 3 | +- [Getting Started with GitHub Copilot in Visual Studio](#getting-started-with-github-copilot-in-visual-studio) |
| 4 | + - [Prerequisites](#prerequisites) |
| 5 | + - [1. Installing the Visual Studio extension](#1-installing-the-visual-studio-extension) |
| 6 | + - [2. Seeing your first suggestion](#2-seeing-your-first-suggestion) |
| 7 | + - [3. Choosing alternate suggestions](#3-choosing-alternate-suggestions) |
| 8 | + - [4. Generating code from a comment](#4-generating-code-from-a-comment) |
| 9 | + - [6. More examples](#6-more-examples) |
| 10 | + - [7. Keyboard shortcuts](#7-keyboard-shortcuts) |
| 11 | + - [8. Enabling and disabling GitHub Copilot](#8-enabling-and-disabling-github-copilot) |
| 12 | + - [9. Learn More](#9-learn-more) |
| 13 | + |
| 14 | +<a name="installing"></a> |
| 15 | + |
| 16 | +## Prerequisites |
| 17 | + |
| 18 | +- You will need VS 2022 17.1 or later: https://devblogs.microsoft.com/visualstudio/visual-studio-2022-17-1-is-now-available/ |
| 19 | + |
| 20 | +## 1. Installing the Visual Studio extension |
| 21 | + |
| 22 | +To use GitHub Copilot, you first need to install the Visual Studio extension. |
| 23 | + |
| 24 | +1. Open Visual Studio. |
| 25 | + |
| 26 | +2. In Extensions | Manage Extensions, from the Visual Studio Marketplace, install the GitHub Copilot extension for Visual Studio. |
| 27 | + |
| 28 | +<img alt="Manage Extensions" src="resources/manage-extensions.png" width="600"></img> |
| 29 | + |
| 30 | + |
| 31 | +3. Close the dialog, then exit and relaunch Visual studio. |
| 32 | + |
| 33 | +<img alt="Manage Extensions restart" src="resources/manage-extensions-restart.png" width="600"></img> |
| 34 | + |
| 35 | +4. After restarting Visual Studio, use Extensions | Manage Extensions | Installed to confirm that the GitHub Copilot extension is installed and enabled. |
| 36 | + |
| 37 | +<img alt="Manage extensions confirmmation" src="resources/manage-extensions-confirmation.png" width="600"></img> |
| 38 | + |
| 39 | +Having problems installing? Visit the [Feedback forum](https://github.com/github/feedback/discussions/categories/copilot-feedback). |
| 40 | + |
| 41 | +<a name="first-suggestion"></a> |
| 42 | +## 2. Seeing your first suggestion |
| 43 | + |
| 44 | +GitHub Copilot provides suggestions for dozens of languages and a wide variety of frameworks, |
| 45 | +but it works especially well for Python, JavaScript, TypeScript, Ruby, Go, C#, and C++. |
| 46 | +The following samples are in C#, but other languages will work similarly. |
| 47 | + |
| 48 | +1. Create a new C# Console App project by following the instructions in steps 1 and 2 [here](https://docs.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-console?view=vs-2022#:~:text=1%20Tutorial%3A%20Create%20a%20simple%20C%23%20console%20app,yet%20have%20fail%20safes%20in%20place%20to%20). |
| 49 | + |
| 50 | +2. Name your project "Copilot Demo". |
| 51 | + |
| 52 | +<img alt="Configure your new project" src="resources/configure-new-project.png" width="600"></img> |
| 53 | + |
| 54 | +3. Click "Next". |
| 55 | + |
| 56 | +<img alt="Additional information" src="resources/configure-additional-information.png" width="600"></img> |
| 57 | + |
| 58 | +4. Click "Create". |
| 59 | + |
| 60 | + 1. The very first run, you will be presented with a message to activate your connection to GitHub |
| 61 | + |
| 62 | +<img alt="First run authorization" src="resources/first-run-authorize.png" width="448"></img> |
| 63 | + |
| 64 | + 2. A device code will be copied automatically to the clipboard. Paste it on the GitHub device authorization page that will open. If you miss the device code, you will find it in the status bar, at the bottom left of Visual Studio, as well as on the GitHub Copilot output window pane. |
| 65 | + |
| 66 | +<img alt="First run device code" src="resources/first-run-device-code.png" width="443"></img> |
| 67 | +<img alt="First run device code output" src="resources/first-run-device-code-output.png" width="711"></img> |
| 68 | + |
| 69 | + 3. After successful authorization, proceed to read and approve the [telemetry terms](https://github.co/copilot-telemetry-terms). |
| 70 | + |
| 71 | +<img alt="First run telemetry consent" src="resources/first-run-telemetry-terms.png" width="423"></img> |
| 72 | + |
| 73 | +After installation, a GitHub Copilot icon should appear in the editor margin at the bottom of your Visual Studio window, in the lower left. |
| 74 | + |
| 75 | +<img alt="icon" src="resources/visual-studio-copilot-icon.png" width="316"></img> |
| 76 | + |
| 77 | +and your file should show short "Hello, World!" code. |
| 78 | + |
| 79 | +<img alt="Hello, world!" src="resources\hello-world.png" width="600"></img> |
| 80 | + |
| 81 | +1. Below that, type the following function header: |
| 82 | + |
| 83 | + ``` |
| 84 | + int CalculateDaysBetweenDates( |
| 85 | + ``` |
| 86 | + |
| 87 | +2. GitHub Copilot will automatically suggest an entire function body in grayed text, as shown below. |
| 88 | +The exact suggestion may vary. |
| 89 | + |
| 90 | + <img alt="Code suggested by GitHub Copilot" src="resources/calculate-days-between-dates.png" width="600"></img> |
| 91 | + |
| 92 | +7. Press `Tab` to accept the suggestion. |
| 93 | + |
| 94 | +GitHub Copilot will attempt to match your code's context and style. You can edit the suggested code as you choose. |
| 95 | + |
| 96 | +<a name="alternates"></a> |
| 97 | +## 3. Choosing alternate suggestions |
| 98 | + |
| 99 | +For any given input, GitHub Copilot can provide multiple suggestions. |
| 100 | +As the developer you are always in charge; you can select which suggestion to use, or reject them all. |
| 101 | + |
| 102 | +1. Clear the file (or start a new one), and type the following again: |
| 103 | + |
| 104 | + ``` |
| 105 | + int CalculateDaysBetweenDates( |
| 106 | + ``` |
| 107 | + |
| 108 | +2. GitHub Copilot will again show you a suggested completion. |
| 109 | + |
| 110 | +3. Instead of pressing `Tab`, press `Ctrl`+`Alt`+`]` (or `Ctrl`+`Alt`+`[`). |
| 111 | + |
| 112 | + GitHub Copilot will cycle through other alternative suggestions. |
| 113 | + |
| 114 | +<img alt="Alternate code suggested by GitHub Copilot" src="resources/alternate-calculate-days-between-dates.png" width="600"></img> |
| 115 | + |
| 116 | +4. When you see a suggestion you like, press `Tab` to accept it. |
| 117 | + |
| 118 | +5. If you don't like any of the suggestions, press `Esc`. |
| 119 | + |
| 120 | +You can also hover over a suggestion to see the GitHub Copilot command palette for choosing suggestions. |
| 121 | + |
| 122 | +<img alt="Code suggested by GitHub Copilot" src="resources/command-palette.png" width="600"></img> |
| 123 | + |
| 124 | +<a name="more-suggestions"></a> |
| 125 | + |
| 126 | +## 4. Generating code from a comment |
| 127 | + |
| 128 | +GitHub Copilot can understand significantly more context than most code assistants, |
| 129 | +and can generate entire functions from something as simple as a comment. |
| 130 | + |
| 131 | +1. Clear the file (or start a new one), and type the following: |
| 132 | + |
| 133 | + ```csharp |
| 134 | + using System.Xml.Linq; |
| 135 | + |
| 136 | + var doc = XDocument.Load("index.xhml"); |
| 137 | + |
| 138 | + // find all images |
| 139 | + ``` |
| 140 | + |
| 141 | + Press `Enter`. |
| 142 | + |
| 143 | +2. GitHub Copilot will automatically suggest an implementation. Press "tab" to accept it. |
| 144 | + |
| 145 | +2. Enter a second comment |
| 146 | + |
| 147 | + ```csharp |
| 148 | + // and give them a red border |
| 149 | + ``` |
| 150 | + |
| 151 | + <img alt="Code from comment" src="resources/code-from-comment.png" width="600"></img> |
| 152 | + |
| 153 | +<a name="using-a-framework"></a> |
| 154 | + |
| 155 | +## 6. More examples |
| 156 | + |
| 157 | +GitHub Copilot can do even more. |
| 158 | +Check out the examples on [copilot.github.com](https://copilot.github.com) to see more, |
| 159 | +or the [Gallery](../../gallery) in |
| 160 | +this repository for the latest examples from us and the community. |
| 161 | + |
| 162 | +Got an example of your own? We welcome you to share it on our [Feedback forum](https://github.com/github/feedback/discussions/categories/copilot-feedback). |
| 163 | + |
| 164 | +<a name="shortcuts"></a> |
| 165 | +## 7. Keyboard shortcuts |
| 166 | + |
| 167 | +The following lists the most common keyboard shortcuts relevant for GitHub |
| 168 | +Copilot. If you wish to rebind them, check out [the configuration guide](configuring.md). |
| 169 | + |
| 170 | +* Accept an inline suggestion: `Tab`. |
| 171 | + |
| 172 | +* Dismiss an inline suggestion: `Esc`. |
| 173 | + |
| 174 | +* Show next inline suggestion: `Ctrl + Alt + ]`. |
| 175 | + |
| 176 | +* Show previous inline suggestion: `Ctrl + Alt + [`. |
| 177 | + |
| 178 | +* Trigger inline suggestion: `Ctrl + Alt + \`. |
| 179 | + |
| 180 | +<a name="enabling"></a> |
| 181 | +## 8. Enabling and disabling GitHub Copilot |
| 182 | + |
| 183 | +The GitHub Copilot status icon in the bottom panel of the Visual Studio window |
| 184 | +indicates whether GitHub Copilot is enabled or disabled. It will have a diagonal line through it when disabled. To enable or disable GitHub Copilot, click the icon. You will be |
| 185 | +asked whether you wish to toggle for the current file, current file type, or globally. |
| 186 | + |
| 187 | +<img alt="icon" src="resources/visual-studio-copilot-icon.png" width="100"></img> |
| 188 | + |
| 189 | +<a name="more"></a> |
| 190 | +## 9. Learn More |
| 191 | + |
| 192 | +To learn more about configuring GitHub Copilot, go to the [documentation table of |
| 193 | +contents](README.md). |
0 commit comments