VS Extension to manipulate HTML / CSS

Question

I am looking to enhance my programming experience and I believe I can do that by creating a Visual Studio (2012) extension. I have started to dig into the documentation on MSDN, but it's dense and I am working through it.

I had a few questions:

1. Is an extension the correct approach for the scenario described below?
2. If so, any idea which namespace I should start digging into?
3. Any sage wisdom/links RE: "pitfalls" or "gotcha"?

The Setup I have a block of HTML and it has some inline CSS on certain elements. I'd like to right-click on the element and apply the inline code to a new or existing stylesheet (CSS).

The Code

<div>
    <div class="ui-bar-d ui-bar"  >
        <span class="WBHeaderDetail" style="margin-left: 5px; margin-right: 5px;">
            Name: <em class="WBHeaderDetailValue" style="text-decoration: underline;">@ViewBag.JobName</em>
        </span>
        <span class="WBHeaderDetail" style="margin-left: 5px; margin-right: 5px;">
            Status: <em class="WBHeaderDetailValue" style="text-decoration: underline;">@ViewBag.Status</em>
        </span>
        <a data-role="button" data-theme="b" data-icon="check" data-inline="true" data-mini="true" >Save</a>       
    </div>
</div>

Arguably, the operation that extension would expose could grab a reference to a given element and inspect for inline CSS (style tag), remove it from the element, and then append that CSS to a new or existing stylesheet in the project/solution. Whether or not the element already has a value for the 'class' attribute could impact the vendor selected for this project.

UPDATE

Saw this on: http://www.asp.net/vnext/overview/aspnet/whats-new

Smart Tasks

In Design view, complex properties of server controls often have associated dialog boxes and wizards to make it easy to set them. For example, you can use a special dialog box to add a data source to a Repeater control or add columns to a GridView control.

However, this type of UI help for complex properties has not been available in Source view. Therefore, Visual Studio 11 introduces Smart Tasks for Source view. Smart Tasks are context-aware shortcuts for commonly used features in the C# and Visual Basic editors.

For ASP.NET Web Forms controls, Smart Tasks appear on server tags as a small glyph when the insertion point is inside the element:

Can I get my code into that dialog?

THANKS!

Answer 1

I made a small VS extension last year for class that turned out pretty well. It had to do with sorting, formatting and re-organizing C++ code files. It's a little different than what you want to do, but I can suggest that you take a look at CodeMaid. It has a surprising number of features, and since it's open source, the source code really helped me out when I was working on my extension.

Unfortunately, you're working with HTML and Visual Studio only provides the code model (basic AST) for C# and a small bit of C++. You're unlikely to get any help from visual studio with HTML editing.

So I would do 2 things. First, look at these tutorials. They'll help you create the base for your extension and get you familiar with the API. (You'll likely have to look for others to augment your knowledge, as MS tutorials aren't the greatest.) Second, polish up on your regular expressions. The best way to complete what you want is probably to parse the file yourself and locate all instances of inline style tags. Then add a right-click menu item and locate the appropriate tag when you need to.

But again, I would start with the basic tutorials. The VS extension API is a bit odd, so you'll probably want to get used to it by doing simple stuff first.

Good luck, you'll need it. :p

EDIT: I know this doesn't answer your question directly, just offering a bit of advice.

Answer 2

Yes a VSIX is the way to go.

You can take a look at some of the code from Web Essentials. Web essentials does something similar to what you want to do.

The following is a link to the CSS sorter on github: https://github.com/madskristensen/CssSorter

And this one is a link to the HTML ZenCoding feature: https://github.com/madskristensen/zencoding

Since both of them involve dealing with HTML, CSS you could get a lot of information looking at the code. The only difference with your project is that you're actually targeting both at the same time and are looking into accessing multiple files. Unofrtunately, for HTML and CSS I don't know wether there's a built-in parser available.

There are a few packages availble on NuGet though, so you could try these out: ExCSS Stylesheet Parser: http://nuget.org/packages/ExCSS/ HtmlAgilityPack: http://nuget.org/packages/HtmlAgilityPack/

I haven't worked with these packages directly, but I guess you'll have to try them out and see if it fits.

As for the smarttasks: this is normally a part of the control designer and I don't think it's appropriate for what you want to do. I would just add your extension to the context menu