Walkthrough: Getting Started with Editor Extensions

In an attempt to bring extension building to the masses, the editor team submitted a hands on lab for TechEd this year that walks you through creating a real-world extension. While one of the goals of the lab is to show you how to build extensions in general, the hope was to also disseminate some of the methodologies and concepts behind our new extensibility story.

Everyone has certainly seen the obligatory “Hello World” code for any new thing they try. I wanted the lab to be much more meaningful than that though, and instead provide you with a scenario that might be something you actually want to do. In this case, what you’re building is an extension that allows you to place walkthrough content directly inside of the editor in little chat-like bubbles.

Screenshot from the TechEd Hands-On Lab

All of the walkthrough steps you see here are actually parsed from an XML file, which means that this extension adds meta content to the editor window without any modification of the code file it is displaying. Moreover, there is also another kind of visual created here; a little block around the word “System,” which when hovered over will then display a tooltip with extra information. These two visuals are called “Adornments” in the editor world, and are nothing more than Windows Presentation Framework (WPF) elements associated to a grouping of text. Last but not least, the green bar across the top of the image above (that has a label with “Position:” on it) is called a margin. This is another WPF element, but this time it is snapped to the outside edge of the editor’s window.

So if you didn’t get a chance to make it to TechEd 2009, but would like to try out the lab, you’re in luck. It takes about an hour to complete (yes, you will be able to get all of that functionality done in an hour) and it takes the time to explain a bit about what you’re doing and why. I hope you find it useful, and look forward to the extensions you guys create!

Download Lab Files


Chris Granger
Program Manager | Visual Studio Platform

Comments (2)

  1. dritte says:

    look at poor C++ code formatting options and compare it to great C#. We need it in C++!!

    – add more syntax coloring options- VC shoud able to coloring preprocesor string (not only #define statement) #define _WINNT_51. able me to coloring methods when I use them in code (if method is declared in class declaration. Have You ever seen ex.Code Warrior ? It looks simple, but has option to coloring most C++ elements – its’ great.

  2. VSEditor says:

    dritte –

    Options for formatting code are provided by each language team, so some languages have a richer set of style choices than others.  As you mention, you’ll see a wide variety of customizations available under Tools->Options->Text Editor->C#->Formatting, but not nearly as many in the C/C++ node.  I agree that this is an area that could be improved, but it falls outside of the Editor team’s control, and I don’t believe the C/C++ team is planning significant changes in formatting options for VS 2010.  To make sure the VC team hears your feedback directly, I’d encourage you to file a suggestion here:  https://connect.microsoft.com/visualstudio.

    – Brittany