Skip to content

Commit c47c35e

Browse files
Added more content
1 parent a85b969 commit c47c35e

20 files changed

+155
-41
lines changed

docs/_layouts/default.html

+25-26
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,10 @@
77

88
<title>{{ page.title }} | {{ site.title }}</title>
99
<meta name="description" content="{{ page.description }}" />
10-
<base href="/" />
11-
<link rel="stylesheet" href="assets/css/style.css" />
12-
<link rel=apple-touch-icon href="assets/img/icon-180x180.png" />
13-
<link rel=icon type=image/png sizes=32x32 href="assets/img/icon-32x32.png" />
14-
<link rel=icon type=image/png sizes=16x16 href="assets/img/icon-16x16.png" />
10+
<link rel="stylesheet" href="/assets/css/style.css" />
11+
<link rel=apple-touch-icon href="/assets/img/icon-180x180.png" />
12+
<link rel=icon type=image/png sizes=32x32 href="/assets/img/icon-32x32.png" />
13+
<link rel=icon type=image/png sizes=16x16 href="/assets/img/icon-16x16.png" />
1514
<link rel="canonical" href="{{ site.url }}{{ site.baseurl }}{{ page.url }}" />
1615
<meta property="og:type" content="website" />
1716
<meta property="og:site_name" content="{{ site.title }}" />
@@ -31,39 +30,39 @@ <h1>{{ page.title }}</h1>
3130
<label for="hamburger">&#9776;</label>
3231
<input type="checkbox" id="hamburger" />
3332
<ul>
34-
<li><a href="./" tabindex="0">Home</a></li>
33+
<li><a href="/" tabindex="0">Home</a></li>
3534
<li class="parent">
36-
<a href="getting-started/" aria-haspopup="menu">Getting started</a>
35+
<a href="/getting-started/" aria-haspopup="menu">Getting started</a>
3736
<ul>
38-
<li><a href="getting-started/get-the-tools.html">Get the tools</a></li>
39-
<li><a href="getting-started/your-first-extension.html">Your first extension</a></li>
40-
<li><a href="getting-started/extension-anatomy.html">Extension anatomy</a></li>
41-
<li><a href="getting-started/vocabulary.html">Vocabulary</a></li>
37+
<li><a href="/getting-started/get-the-tools.html">Get the tools</a></li>
38+
<li><a href="/getting-started/your-first-extension.html">Your first extension</a></li>
39+
<li><a href="/getting-started/extension-anatomy.html">Extension anatomy</a></li>
40+
<li><a href="/getting-started/vocabulary.html">Vocabulary</a></li>
4241
</ul>
4342
</li>
4443
<li class="parent">
45-
<a href="walkthroughs/" aria-haspopup="menu">Walkthroughs</a>
44+
<a href="/walkthroughs/" aria-haspopup="menu">Walkthroughs</a>
4645
<ul>
47-
<li><a href="walkthroughs/menus-buttons-commands.html">Menus &amp; commands</a></li>
48-
<li><a href="walkthroughs/build-custom-tool-windows.html">Tool windows</a></li>
49-
<li><a href="walkthroughs/theming.html">Theming</a></li>
50-
<li><a href="walkthroughs/interact-with-editor.html">The editor</a></li>
51-
<li><a href="walkthroughs/settings-and-options.html">Settings &amp; options</a></li>
52-
<li><a href="walkthroughs/notifications.html">Notifications</a></li>
53-
<li><a href="walkthroughs/displaying-errors.html">Displaying errors</a></li>
54-
<li><a href="walkthroughs/showing-progress.html">Showing progress</a></li>
46+
<li><a href="/walkthroughs/menus-buttons-commands.html">Menus &amp; commands</a></li>
47+
<li><a href="/walkthroughs/build-custom-tool-windows.html">Tool windows</a></li>
48+
<li><a href="/walkthroughs/theming.html">Theming</a></li>
49+
<li><a href="/walkthroughs/interact-with-editor.html">The editor</a></li>
50+
<li><a href="/walkthroughs/settings-and-options.html">Settings &amp; options</a></li>
51+
<li><a href="/walkthroughs/notifications.html">Notifications</a></li>
52+
<li><a href="/walkthroughs/displaying-errors.html">Displaying errors</a></li>
53+
<li><a href="/walkthroughs/showing-progress.html">Showing progress</a></li>
5554
</ul>
5655
</li>
5756
<li class="parent">
58-
<a href="publish/" aria-haspopup="menu">Publishing</a>
57+
<a href="/publish/" aria-haspopup="menu">Publishing</a>
5958
<ul>
60-
<li><a href="publish/checklist.html">Checklist</a></li>
61-
<li><a href="publish/create-extension-pack.html">Extension packs</a></li>
62-
<li><a href="publish/marketplace.html">Marketplace</a></li>
63-
<li><a href="publish/private-galleries.html">Private galleries</a></li>
59+
<li><a href="/publish/checklist.html">Checklist</a></li>
60+
<li><a href="/publish/create-extension-pack.html">Extension packs</a></li>
61+
<li><a href="/publish/marketplace.html">Marketplace</a></li>
62+
<li><a href="/publish/private-galleries.html">Private galleries</a></li>
6463
</ul>
6564
</li>
66-
<li><a href="api.html">API</a></li>
65+
<li><a href="/api.html">API</a></li>
6766
</ul>
6867
</nav>
6968
<article>

docs/assets/css/style.scss

+6-2
Original file line numberDiff line numberDiff line change
@@ -76,9 +76,7 @@ img {
7676

7777
pre {
7878
background: rgba(180, 180, 180, .1);
79-
color: var(--foreground);
8079
border: 1px solid var(--border-color);
81-
border-left: 3px solid dodgerblue;
8280
overflow: auto;
8381
padding: 1em 1.5em;
8482
margin: -1em 0 2em 0;
@@ -120,6 +118,12 @@ p > code {
120118
font-size: .9em;
121119
}
122120

121+
blockquote {
122+
padding: .3em 1em;
123+
border: 1px solid var(--border-color);
124+
border-left: 3px solid dodgerblue;
125+
}
126+
123127
header h1 {
124128
padding: .2em 0 0 0;
125129
}
20.3 KB
Loading

docs/assets/img/icon-16x16.png

3 Bytes
Loading

docs/assets/img/icon-180x180.png

29 Bytes
Loading

docs/assets/img/icon-32x32.png

6 Bytes
Loading
8.28 KB
Loading
-237 Bytes
Loading

docs/assets/img/messagebox.png

-36 Bytes
Loading
43.2 KB
Loading

docs/assets/img/new-project-files.png

8.41 KB
Loading
-1.31 KB
Loading

docs/assets/img/statusbar.png

-6 Bytes
Loading

docs/assets/img/vs-installer.png

-3.61 KB
Loading
15.2 KB
Loading
14.9 KB
Loading

docs/getting-started/index.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@ There goal of the getting started guide is to give you a basic understanding of
88

99
## Get the tools
1010

11-
The journey starts by [installing the right tools](getting-started/get-the-tools.html) into Visual Studio.
11+
The journey starts by [installing the right tools](get-the-tools.html) into Visual Studio.
1212

1313
## Your first extension
1414

15-
Next, we're going to [write a simple extension](getting-started/your-first-extension.html) as a starting point for future customizations.
15+
Next, we're going to [write a simple extension](your-first-extension.html) as a starting point for future customizations.
1616

1717
## Extension anatomy
1818

19-
It's now time to go over all the [moving parts of an extension](getting-started/extension-anatomy.html). This give you a broader understanding of the extensibility model.
19+
It's now time to go over all the [moving parts of an extension](extension-anatomy.html). This give you a broader understanding of the extensibility model.
2020

2121
## Vocabulary
2222

23-
To take full advantage of this cookbook and Visual Studio extensibility in general, you must [know all the names and words](getting-started/vocabulary.html) for things. That's setting you up for future success.
23+
To take full advantage of this cookbook and Visual Studio extensibility in general, you must [know all the names and words](vocabulary.html) for things. That's setting you up for future success.

docs/getting-started/your-first-extension.md

+115-4
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,123 @@ date: 2021-5-24
66

77
Before we start writing our first Visual Studio extension (it's easy, I promise!), make sure you've got the [tools needed](get-the-tools.md).
88

9+
A Visual Studio extension is written using the .NET Framework and C#.
10+
If you're already a .NET developer, you will find that writing extensions is similar to writing most other .NET programs and libraries.
11+
12+
The extension we'll be writing today adds a command that inserts a new guid into the text editor when executed. It's simple, useful, and provides a good introduction to the various aspects of extension development.
13+
914
## Create the project
15+
There are several project templates to choose from, so we want to make sure we make the right choice. The templates we use in this cookbook, all have the moniker **(Community)** in the name.
16+
17+
This time, we'll select the **VSIX Project w/Command (Community)** template, as shown in the screenshot below.
18+
19+
![New Project Dialog](../assets/img/new-project-dialog.png)
20+
21+
After selecting the project template, we need to give our project a name. Call it **InsertGuid**.
22+
23+
![Configure your new project](../assets/img/configure-new-project.png)
24+
25+
After hitting the *Create* button, you should end up with a basic VSIX Project looking like this:
26+
27+
![New project files](../assets/img/new-project-files.png)
28+
29+
## Overview of the files
30+
Let's go over the most important files.
31+
32+
**InsertGuidPackage.cs** is what we refer to as the Package class. It's `InitializeAsync(...)` method is called by Visual Studio too initialize your extension. It's from here you add event listeners and registers commands, tool windows, settings and other things.
33+
34+
**source.extension.vsixmanifest** is the manifest file for your extension. It contains meta data such as title and description, but also information about what the extension contains.
35+
36+
**VSCommandTable.vsct** is an XML file where commands and keybindings are declaratively defined, so they can be registered with Visual Studio.
37+
38+
**Commands/MyCommand.cs** is the command handler for the command defined in the *VSCommandTable.vsct* file. It controls what happens when the command is executed - aka. the button is clicked.
39+
40+
## Modifying the command
41+
First, we want to make sure our command has the right name, icon, and position within the Visual Studio menu system.
42+
43+
Open the *VSCommandTable.vsct* file and find a `<Group>` and a `<Button>`. Notice how the button specifies the group as being its parent and the group's parent is the built-in VSMainMenu/Tools menu.
44+
45+
For our extension, we want the *Insert GUID* command button to be under the *Edit* main menu, so we are going to re-parent the group to match.
46+
47+
```xml
48+
<Group guid="InsertGuid" id="MyMenuGroup" priority="0x0600">
49+
<Parent guid="VSMainMenu" id="Edit"/>
50+
</Group>
51+
```
52+
53+
You get full IntelliSense for the placements to make it easy to find the right spot.
54+
55+
![VSCT parent IntelliSense](../_site/assets/img/vsct-parent-intellisense.png)
56+
57+
The `<Button>` needs updating as well. We'll give it a new icon, update the button text and it's canonical name.
58+
59+
```xml
60+
<Button guid="InsertGuid" id="MyCommand" priority="0x0100" type="Button">
61+
<Parent guid="InsertGuid" id="MyMenuGroup" />
62+
<Icon guid="ImageCatalogGuid" id="PasteAppend" />
63+
<CommandFlag>IconIsMoniker</CommandFlag>
64+
<Strings>
65+
<ButtonText>Insert GUID</ButtonText>
66+
<LocCanonicalName>.Edit.InsertGuid</LocCanonicalName>
67+
</Strings>
68+
</Button>
69+
```
70+
71+
We can use the thousands of icons available within Visual Studio's vast image library and even get a preview in IntelliSense:
72+
73+
![VSCT icon IntelliSense](../assets/img/vsct-icon-intellisense.png)
74+
75+
Now, we've updated the name, icon, and location of our command and it's time to write some code to insert the GUID into the text editor.
76+
77+
Open the */Commands/MyCommand.cs* file and modify it to insert a new guid when executed:
78+
79+
```csharp
80+
using System;
81+
using Community.VisualStudio.Toolkit;
82+
using EnvDTE;
83+
using Microsoft.VisualStudio.Shell;
84+
using Task = System.Threading.Tasks.Task;
85+
86+
namespace InsertGuid
87+
{
88+
[Command(PackageIds.MyCommand)]
89+
internal sealed class MyCommand : BaseCommand<MyCommand>
90+
{
91+
protected override async Task ExecuteAsync(OleMenuCmdEventArgs e)
92+
{
93+
await ThreadHelper.JoinableTaskFactory.SwitchToMainThreadAsync();
94+
TextDocument doc = await VS.Editor.GetActiveTextDocumentAsync();
95+
96+
doc?.Selection.Insert(Guid.NewGuid().ToString());
97+
}
98+
}
99+
}
100+
```
101+
102+
We're using the `VS` object to get the active document, and then inserts the guid in the selection. There is always a selection in the editor even if it is zero length.
103+
104+
The first draft of our extension is now complete and it is time to test it.
105+
106+
## Running and debugging
107+
Running your extension is as easy as running any other .NET project. Simply hit *F5* to run with the debugger attached or *Ctrl+F5* for running without.
108+
109+
Doing so will start the Experimental Instance of Visual Studio with your extension installed. The Experimental Instance is your regular version Visual Studio, but with separate settings and extensions installed. It helps keep things separate.
110+
111+
When the Experimental Instance starts up, you should see the Insert GUID command in the Edit main menu.
112+
113+
![Insert GUID command](../assets/img/insert-guid-command.png)
114+
115+
Open any text based file and execute the command to insert a new guid. That's it!
116+
117+
## Summary
118+
You've now created your first extension that adds a command button to the main menu and interacts with the text editor when executed.
10119

11-
TBD
120+
Congratulations!!
12121

13-
## Debugging the extension
122+
You can find the code for this extension in the [samples repository](https://github.com/VsixCommunity/Samples).
14123

15-
TBD
124+
## Continue your learning journey
16125

17-
Now that you've got a starting point for your first extension, it's time to learn about the [anatomy of extensions](extension-anatomy.md).
126+
* [Anatomy of extensions](extension-anatomy.md)
127+
* [Menus & Commands](../walkthroughs/menus-buttons-commands.html)
128+
* [Best practices checklist](../publish/checklist.html)

docs/publish/index.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ date: 2021-5-25
77
This section helps you getting your extension ready to share with your team or the whole world of Visual Studio users.
88

99
## Check the checklist
10-
Make sure to check out [the checklist](publish/checklist.html) to ensure your extension follows best practices before you share it with anyone.
10+
Make sure to check out [the checklist](checklist.html) to ensure your extension follows best practices before you share it with anyone.
1111

1212
## Publish to the Marketplace
13-
Share your fantastic extension with the world, but publishing it to the [Marketplace](publish/marketplace.html).
13+
Share your fantastic extension with the world, but publishing it to the [Marketplace](marketplace.html).
1414

1515
## Publish on a private galleries
16-
You can also [host your own gallery](publish/private-galleries.html) of extensions either internally in your organization or in public on any web host.
16+
You can also [host your own gallery](private-galleries.html) of extensions either internally in your organization or in public on any web host.

run-site.cmd

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
dotnet tool install --global dotnet-serve
22

33
cd docs
4-
start cmd /k dotnet-serve -o -d _site
5-
jekyll b -w
4+
start cmd /k jekyll b -w
5+
dotnet-serve -o -d _site

0 commit comments

Comments
 (0)