VS Extension to manipulate HTML / CSS
html, javascript, visual-studio, visual-studio-2010, visual-studio-2012
Solution
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.
Problem
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: - Is an extension the correct approach for the scenario described below? - If so, any idea which namespace I should start digging into? - 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!