Skip to content

Commit 8a362aa

Browse files
committed
Update github copilot windows dev topic
1 parent 0849482 commit 8a362aa

File tree

3 files changed

+25
-33
lines changed

3 files changed

+25
-33
lines changed
Lines changed: 25 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: How to use GitHub Copilot to create WinUI 3 / Windows App SDK apps in Visual Studio
3-
description: Get started with WinUI 3 / Windows App SDK by integrating GitHub Copilot code autocompletion capabilities into Visual Studio.
4-
ms.topic: article
5-
ms.date: 3/12/2024
6-
keywords: windows app sdk, winappsdk, winui3, copilot
2+
title: How to use GitHub Copilot to create WinUI 3 apps in Visual Studio
3+
description: Get started with WinUI 3 / Windows App SDK by using the GitHub Copilot code completion capabilities in Visual Studio.
4+
ms.topic: how-to
5+
ms.date: 11/26/2024
6+
keywords: windows app sdk, winappsdk, winui3, copilot, github copilot
77
ms.localizationpriority: medium
88
ms.custom: template-quickstart
99
audience: new-desktop-app-developers
@@ -12,80 +12,72 @@ content-type: how-to
1212

1313
# Use GitHub Copilot to create WinUI 3 / Windows App SDK apps in Visual Studio
1414

15-
In this how-to, we'll demonstrate how [GitHub Copilot](https://github.com/features/copilot) can be used to build WinUI 3 / Windows App SDK desktop apps in Visual Studio. This guide builds upon *[What is the GitHub Copilot extension for Visual Studio?](/visualstudio/ide/visual-studio-github-copilot-extension)*, offering tailored tips and best practices for Copilot-assisted WinUI 3 app development.
15+
In this how-to, we'll demonstrate how [GitHub Copilot](https://github.com/features/copilot) can be used to build WinUI 3 / Windows App SDK desktop apps in Visual Studio. This guide builds upon *[What is GitHub Copilot Completions for Visual Studio?](/visualstudio/ide/visual-studio-github-copilot-extension)*, offering tailored tips and best practices for Copilot-assisted WinUI 3 app development.
1616

17-
:::image type="content" source="images/github-copilot-winui-vs/github-copilot-extension-example.gif" alt-text="Animated screenshot that shows the code completion capabilities of the GitHub Copilot extension.":::
17+
:::image type="content" source="images/github-copilot-winui-vs/github-copilot-extension-example.gif" alt-text="Animated screenshot that shows the code completion capabilities of the GitHub Copilot in Visual Studio.":::
1818

1919
## Prerequisites
2020

21-
- Visual Studio 2022 (v17.6+) and Tools for Windows App SDK (see [Get started with WinUI](../get-started/start-here.md)).
21+
- Visual Studio 2022 (v17.10+) with the Windows application development workload applied (see [Get started with WinUI](../get-started/start-here.md) for additional configuration details). GitHub Copilot is included in Visual Studio 2022 v17.10 and later by default.
2222
- An active subscription to [GitHub Copilot](https://github.com/features/copilot/plans) associated with the GitHub account that you sign in to Visual Studio with.
23-
- Familiarity with C# and WinUI 3 / Windows App SDK.
24-
25-
## Installation
26-
27-
1. In Visual Studio, select **Extensions** > **Manage Extensions**.
28-
2. Search for "GitHub Copilot" and click `Download`. Optionally, you can also install the [GitHub Copilot Chat Extension](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat) to enable Copilot's interface.
29-
3. Restart Visual Studio.
30-
4. Click `Modify` when prompted to install the extension.
31-
23+
- Familiarity with C#, WinUI, and Windows App SDK.
3224

3325
## Use GitHub Copilot
3426

3527
### Autocomplete your code snippets
3628

37-
The GitHub Copilot extension provides real-time code suggestions and completions based on the code you write. The most straightforward way to use Copilot is to start typing code in the editor, and Copilot will try to autocomplete your code snippet. You can then accept or dismiss the suggestions:
29+
GitHub Copilot in Visual Studio provides real-time code suggestions and completions based on the code you write. The most straightforward way to use Copilot is to start typing code in the editor, and Copilot will try to autocomplete your code snippet. You can then accept or dismiss the suggestions:
3830

3931
<!-- todo: animated gifs as an optimization -->
4032

41-
:::image type="content" source="images/github-copilot-winui-vs/1-basic-autocomplete.png" alt-text="Screenshot that shows the code completion capabilities of the GitHub Copilot extension (basic autocomplete).":::
33+
:::image type="content" source="images/github-copilot-winui-vs/1-basic-autocomplete.png" alt-text="Screenshot that shows the code completion capabilities of GitHub Copilot (basic autocomplete).":::
4234

43-
### Generate multiple autocomplete suggestions
35+
> [!TIP]
36+
> If you don't see the GitHub Copilot suggestions, you can enable different aspects of the feature in Visual Studio's options under `Tools` -> `Options` -> `GitHub` -> `Copilot`.
4437
45-
Select `Edit` -> `Copilot suggestions` -> `Open Copilot`. A window will open with a list of suggestions based on the latest cursor position:
38+
### Ask Copilot for suggestions
4639

47-
:::image type="content" source="images/github-copilot-winui-vs/2-generate-multiple-autocomplete-suggestions.png" alt-text="Screenshot that shows the code completion capabilities of the GitHub Copilot extension (multiple autocomplete).":::
40+
Right-click in the code editor and select `Ask Copilot`. A prompt window will open where you can chat inline with Copilot to get a list of suggestions based on the current cursor position and your prompt:
41+
42+
:::image type="content" source="images/github-copilot-winui-vs/2-generate-multiple-suggestions.png" alt-text="Screenshot that shows the inline prompting capabilities of GitHub Copilot.":::
4843

4944
### Prompt Copilot with plain-language comments
5045

5146
Although Copilot is used primarily for code completion, you can also use natural language comments to guide Copilot in generating specific code snippets. For example, you can use comments to request a specific feature or functionality:
5247

53-
:::image type="content" source="images/github-copilot-winui-vs/3-prompt-copilot-with-inline-comment.png" alt-text="Screenshot that shows the code completion capabilities of the GitHub Copilot extension (prompting).":::
48+
:::image type="content" source="images/github-copilot-winui-vs/3-prompt-copilot-with-inline-comment.png" alt-text="Screenshot that shows the code completion capabilities of GitHub Copilot (prompting).":::
5449

5550
### Use temporary comments to add code from other files to Copilot's context
5651

5752
If you're working on a code-behind file and want Copilot to incorporate context from the associated XAML file, you can use temporary comments to include this additional code within Copilot's context. Here's an example of how you can specify the XAML code first, and then have Copilot generate the corresponding C# code:
5853

59-
:::image type="content" source="images/github-copilot-winui-vs/4-add-context-temporary-comments.png" alt-text="Screenshot that shows the code completion capabilities of the GitHub Copilot extension (context expansion).":::
54+
:::image type="content" source="images/github-copilot-winui-vs/4-add-context-temporary-comments.png" alt-text="Screenshot that shows the code completion capabilities of GitHub Copilot (context expansion).":::
6055

6156
### Ask Copilot to explain how something works with inline comments
6257

63-
You can use inline comments to ask Copilot to explain how a specific piece of code works. This is similar to using the Copilot Chat Extension, except your prompt is typed directly into the code editor:
58+
You can use inline comments to ask Copilot to explain how a specific piece of code works. This is similar to using the inline Ask Copilot feature or the Copilot Chat window, except your prompt is typed directly into the code editor:
6459

65-
:::image type="content" source="images/github-copilot-winui-vs/5-ask-copilot-inline-explanation.png" alt-text="Screenshot that shows the code completion capabilities of the GitHub Copilot extension (explain).":::
60+
:::image type="content" source="images/github-copilot-winui-vs/5-ask-copilot-inline-explanation.png" alt-text="Screenshot that shows the code completion capabilities of GitHub Copilot (explain).":::
6661

6762
### Use Copilot to test code standards
6863

6964
You can use Copilot to generate code that adheres to your project's coding standards, and to test any given snippet's adherence to those standards. Here's an example of how you can use inline comments to specify two conventions, and then have Copilot validate the code snippet against these conventions:
7065

71-
:::image type="content" source="images/github-copilot-winui-vs/6-enforce-code-standards.png" alt-text="Screenshot that shows the code completion capabilities of the GitHub Copilot extension (standards).":::
66+
:::image type="content" source="images/github-copilot-winui-vs/6-enforce-code-standards.png" alt-text="Screenshot that shows the code completion capabilities of GitHub Copilot (standards).":::
7267

7368
## Recap
7469

75-
In this how-to, we demonstrated how to use the GitHub Copilot extension to assist you with WinUI 3 / Windows App SDK desktop app development in Visual Studio. We covered how to:
70+
In this how-to, we demonstrated how to use GitHub Copilot in Visual Studio to assist you with WinUI 3 / Windows App SDK desktop app development. We covered how to:
7671

7772
- Autocomplete your code snippets.
78-
- Generate multiple autocomplete suggestions.
73+
- Generate autocomplete suggestions inline with Ask Copilot.
7974
- Prompt Copilot with plain-language comments.
8075
- Use temporary comments to add code from other files to Copilot's context.
8176
- Ask Copilot to explain how something works with inline comments.
8277
- Use Copilot to test and enforce code standards.
8378

84-
85-
## Related
79+
## Related content
8680

8781
- [Sample applications for Windows development](../get-started/samples.md)
8882
- [Windows developer FAQ](../get-started/windows-developer-faq.yml)
89-
- [Windows developer glossary](../get-started/windows-developer-glossary.md)
9083
- [Windows development best practices](../get-started/best-practices.md)
91-
- [How to target multiple platforms with your WinUI 3 app](uno-multiplatform.md)
38.6 KB
Loading

0 commit comments

Comments
 (0)