Category Archives: VSIX

Visual Studio 2017 Extension development tutorial part 6: Follow a span of code with TrackingSpan

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
Part 4: Show a popup Window
Part 5: Highlight code in Editor

During the tutorial we are going to build a VS extensions called CodyDocs and place it on GitHub. Each tutorial part is a standalone tutorial on a specific topic and can be viewed individually. CodyDocs will save code documentation (code comments) in a separate file and the extension will allow to view and edit the documentation in the editor itself.

Part 6: Follow a span of code with TrackingSpan

In this tutorial we’re going to learn how to follow (track) code range (aka Span) in Visual Studio’s code editor. By tracking code span, I mean being able to follow the location of a specific code span, while the user edits the document.

For example, in our case, say we added documentation to a certain method MyMethod, which was in row 20 and column 1-12. This documentation was serialized to a file. Now, the user added some code and MyMethod is no longer in row 20. It’s now in row 30.

We’ll see how to “mark” the initial code span in row 20 and find out the new location when the document changes.

Continue reading

Visual Studio 2017 Extension development tutorial part 5: Highlight code in Editor

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
Part 4: Show a popup Window
part 6: Follow a span of code with TrackingSpan

During the tutorial we are going to build a VS extensions called CodyDocs and place it on GitHub. Each tutorial part is a standalone tutorial on a specific topic and can be viewed individually. CodyDocs will save code documentation in a separate file and the extension will allow to view and edit the documentation in the editor itself.

Part 5: Highlight code in Editor

In this tutorial we’re going to learn how to highlight code in Visual Studio’s code editor. This includes highlighting text by changing Background color, changing Foreground color and adding border.

If you followed the rest of the series, in the previous tutorial we allowed the user to select text and add documentation for the selection. The documentation was then serialized to a file. In this part, we will show how to highlight all the text spans that have had documentation added to them.

Continue reading

Visual Studio 2017 Extension development tutorial, Part 4: Show a popup Window

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
Part 5: Highlight code in Editor
part 6: Follow a span of code with TrackingSpan

During the tutorial we are going to build a VS extensions called CodyDocs and place it on GitHub. Each tutorial part is a standalone tutorial on a specific topic and can be viewed individually. CodyDocs will save code documentation in a separate file and the extension will allow to view and edit the documentation in the editor itself.

Part 4: Show a popup Window

In the previous part we created a Command that appears in the code editor’s context menu.

Let’s place our logic to run on our command’s callback:

ShowAddDocumentationWindow is the only line relevant to this part of the tutorial.

To show our own custom popup window, Microsoft recommends using DialogWindow, which is what we will do. This is a WPF window which allows you to act as a modal dialog. Which means the popup blocks the rest of Visual Studio UI until closed.

Continue reading

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

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.

Continue reading

Visual Studio 2017 Extension development tutorial, Part 2: Add Menu Item

The previous blog post introduced the wonderful world of Visual Studio extensions.

Let’s start and do some coding. During the tutorial we are going to build a VS extensions called CodyDocs and place it on GitHub.

CodyDocs will save code documentation in a separate file and the extension will allow to view and edit the documentation in the editor itself.

In the first part, we’ll start with a simple “Hello World” program. We’ll create an extensions with a Menu item that does something. I’ll make things a bit more interesting and make the menu item act as a checkbox.

Starting the project

A great way to start any feature is to add a button to disable it. So first order of business: Add a checkable menu item to Enable and Disable the feature our extension performs.

First, we’ll create a new project with File -> New Project -> VSIX project and call it CodyDocs.

Now to be able to enable and disable the feature, we need the ability to store a bool value that stores our setting.

Continue reading

Visual Studio 2017 Extension development tutorial, Part 1

Ever used Resharper, CodeMaid, WebEssentials, OzCode or CodeRush?

Those are pretty incredible tools, right?

Ever thought about developing an extensions for yourself and your team? Maybe a little something that edits the very difficult configuration files your company invented?
Or how about an extensions that automatically performs a localization merge?

There are a lot of advantages to in-house VS extensions and some big companies even have a dedicated team to work on in-house VS extensions. Extensions development is a very useful skill to have in your toolbox.

Working on OzCode, an awesome extension that helps debugging, I discovered a new world of knowledge. I’m going to write a series of blog posts introducing the wonderful world of VS extensibility.

So what can a VS extension do?

If you used Resharper or any other mentioned extension, you know the extension can do almost anything. Here are some examples:

  • Add commands to VS Menu.
  • Analyze code files with Roslyn.
  • Change code files and projects.

Continue reading