You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
You will install GitHub Copilot and GitHub Copilot Chat Visual Studio Code extensions.
60
-
61
-
**Instructions:**
24
+
First, we will install GitHub Copilot and its corresponding Visual Studio Code extensions.
62
25
63
26
1. Open Visual Studio Code.
64
-
2. Open Extensions view by clicking the Extensions icon in the Activity Bar.
65
-
3. Enter 'GitHub Copilot' in the Search Extensions in Marketplace field.
27
+
2. Open Extensions view by clicking the Extensions icon in the Activity Bar
28
+
3. Enter 'GitHub Copilot' in the Search Extensions in Marketplace.
66
29
4. Click Install button on the **GitHub Copilot** extension by GitHub.
67
30
Wait until GitHub Copilot is installed.
68
31
It will also install **GitHub Copilot Chat** by GitHub extension.
69
-
5. While the Extensions view is still open, find **GitHub Copilot for Azure** by Microsoft and click Install.
70
-
With this extension installed, you can ask @azure questions about Azure services and get help with tasks related to Azure.
71
-
6. (Optional) In the Search Extensions in Marketplace field, enter "Vision", find **Vision for Copilot Preview** by Microsoft and click Install.
72
-
This extension enhances chat interactions by enabling users to leverage advanced vision capabilities, such as including images with your prompts to GitHub (a picture is worth a thousand words?).
73
-
7. (Optional) In the Search Extensions in Marketplace field, enter "Voice", find **VS Code Speech** by Microsoft and click Install.
74
-
This extension adds speech-to-text and text-to-speech capabilities to Visual Studio Code in general, but can also let you interact with GitHub Copilot using natural language speech.
32
+
5. Next, we will install the following Copilot Extensions that are needed for the remainder of the training:
33
+
-**Install GitHub Copilot for Azure**
34
+
- While in the Extensions view, search for **GitHub Copilot for Azure** by Microsoft.
35
+
- Click the **Install** button.
36
+
- With this extension, you can ask **@azure** questions about Azure services and receive assistance with Azure-specific tasks.
37
+
-**Install VS Code Speech (Optional)**
38
+
- In the **Search Extensions in Marketplace** field, type **Voice**.
39
+
- Locate the **VS Code Speech** extension by Microsoft and click the **Install** button.
40
+
- This extension adds speech-to-text and text-to-speech functionality, allowing you to interact with GitHub Copilot using natural language speech.
41
+
-**Install Vision for Copilot Preview (Optional)**
42
+
- In the **Search Extensions in Marketplace** field, type **Vision**.
43
+
- Locate the **Vision for Copilot Preview** extension by Microsoft and click the **Install** button.
44
+
- This extension enables advanced vision capabilities, allowing you to include images in your prompts for enhanced interactions with GitHub Copilot.
45
+
->**Note**: This feature requires an Open AI Service and access credentials.
46
+
- After installing the extension, update your Visual Studio Code settings:
47
+
- Open the Command Palette (`Ctrl+Shift+P`) and type **Preferences: Open Settings (JSON)**.
48
+
- Add the following parameters to your `settings.json` file:
49
+
50
+
```json
51
+
"copilot.vision.azureEndpoint": "<your instructor will provide an endpoint>",
52
+
"copilot.vision.provider": "AzureOpenAI",
53
+
"copilot.vision.model": "gpt-4o"
54
+
```
75
55
76
56
**Expected Outcome:**
77
57
Both GitHub Copilot and GitHub Copilot Chat extensions are installed in Visual Studio Code.
@@ -90,17 +70,13 @@ For other platforms, see the instructions [here](https://github.com/cli/cli?tab=
90
70
1. Open Visual Studio Code shell (Ctrl-`).
91
71
2. In the Visual Studio Code terminal window, enter the following command:
92
72
93
-
```bash
94
-
winget install --id GitHub.cli
95
-
```
73
+
winget install --id GitHub.cli
96
74
97
75
3. Once GitHub CLI installation completes, login to GitHub:
98
76
99
-
```bash
100
-
gh auth login
101
-
```
77
+
gh auth login
102
78
103
-
When prompted, select the following options by using the arrows keys and pressing Enter and follow the instructions:
79
+
4. When prompted, select the following options by using the arrows keys and pressing Enter and follow the instructions:
104
80
105
81
- Where do you use GitHub? **GitHub.com**
106
82
- What is your preferred protocol for Git operations on this host? **HTTPS**
@@ -124,10 +100,7 @@ You will install GitHub Copilot extension to GitHub CLI (_gh_).
124
100
125
101
1. In the Visual Studio Code terminal window, enter the following command:
126
102
127
-
```bash
128
-
gh extension install github/gh-copilot
129
-
130
-
```
103
+
gh extension install github/gh-copilot
131
104
132
105
**Expected Outcome:**
133
106
GitHub Copilot extension to GitHub CLI is installed.
@@ -138,9 +111,7 @@ GitHub Copilot extension to GitHub CLI is installed.
138
111
139
112
1. Test the installed Copilot extension to GitHub CLI.
Copy file name to clipboardexpand all lines: docs/2-development-with-copilot.md
+11
Original file line number
Diff line number
Diff line change
@@ -110,6 +110,17 @@ Refactor the GetTotal method to include taxes and discounts. get the taxes from
110
110
111
111
You will notice that instead of generating code snippets like `Inline Chat`, copilot edits parses the entire Order class and modifies the logic accordingly.
112
112
113
+
## Copilot Vision (Preview)
114
+
115
+
GitHub Copilot Vision enhances your workflow by enabling image-based prompts and visual context for smarter code suggestions. In this step, we will enhance code tied to visual components like HTML `<img>` tags.
116
+
117
+
1. Open the file `samples/eShop/src/HybricApp/wwwroot/test.html' in Visual Studio Code.
118
+
2. You will notice a img tag that currently has incorrect `alt` tag value.
119
+
3. Click on the refactor icon  and select `Fix with Copilot`.
120
+
>*Note*: The first time you select this option, you will be prompted to provide API Key for Azure Open AI Service. You instructure will provide that information.
121
+
4. Once you enter the API key, you should see an `alt` text with description of the image.
122
+
5. Review the suggested fixes or enhancements for the image tag and apply them as needed.
123
+
113
124
## Copilot CLI
114
125
115
126
GitHub Copilot CLI offers an efficient way to interact with Copilot directly from the command line. With Copilot CLI, you can generate shell commands and automate tasks with ease, making it a powerful tool for developers who prefer working in a terminal environment.
0 commit comments