Visual Studio 2017 Extension development tutorial, Part 3: Add to context menu, Get selected code

VSIX / October 19, 2017

In part 2 of the tutorial we created a simple VS extension with a single Menu item.

The extension will eventually be able to add code documentation in a separate file (.cs.cdocs) and view
it in a nice Heads-Up display. The tutorial explains every step of the way to build such an extension.

For starters, we need the ability to select a piece of code and add documentation, which is what we’ll be
doing here.

We’re going to add a new Menu item to the code editor’s context menu. When invoked, the extension
will find the selected text and its Span (From where to where). Then, it’s just a matter of showing a nice
Popup window for the user to edit the documentation.

Tutorial Table of Contents:

Part 1: Introduction to VS extensibility

Part 2: Add Menu Item

Part 3: Add command to context menu and get selected code (You are here)

Part 4: Show a popup Window

Part 5: Highlight code in Editor

part 6: Follow a span of code with TrackingSpan

Part 7: Insert buttons between text characters with Adornments

Part 8: Add UI in the indicator margin with Glyphs

Adding to code editor’s context Menu

First, we need to add a new Command DocumentCodeSpanCommand, which will later be seen from the
context menu accessed. So let’s add a new Custom Command to our project.
In our package’s command table CodyDocsPackage.vsct we can see a bunch of stuff was added
automatically.

A new <Group> node called guidCodyDocsPackageCmdSet1

A new <Button> node with id=”cmdidDocumentCodeSpanCommand”

A new <Bitmap> which we need to delete since we don’t need an icon for this button.

A new symbol node:

<GuidSymbol value="{d5d8efc6-dc17-4229-9088-dddf76ac0ae4}"

name="guidCodyDocsPackageCmdSet1">

<IDSymbol value="4128" name="MyMenuGroup" />

<IDSymbol value="256" name="cmdidDocumentCodeSpanCommand" />

</GuidSymbol>

5. Another <GuidSymbol> node for the icon, which we will also delete.

Let’s rename MyMenuGroup to EditorContextMenuGroup for good order’s sake. We need to do this in 3
places: The new <Group> node added, in the new <Button> added and in the new <GuidSymbol> added.

Now we need to make several of changes to have our command show in the code editor’s context
menu: