用于操作HTML/CSS的VS扩展程序

Question

我希望通过创建Visual Studio (2012)扩展来增强我的编程经验。我已经开始阅读MSDN文档，但是内容很密集，需要认真研究。

我有几个问题： 1. 对于下面描述的情况，扩展是否是正确的方法？ 2. 如果是，有任何想法应该从哪个命名空间开始研究？ 3. 任何关于“陷阱”或“注意事项”的智慧/链接？

设置： 我有一块HTML代码，并且某些元素具有内联CSS。我想右键单击元素并将内联代码应用于新的或现有样式表（CSS）。

代码：

<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>

可以说，扩展将公开一个操作，该操作可以获取对给定元素的引用并检查内联CSS（样式标签），从元素中删除它，然后将该CSS附加到项目/解决方案中的新样式表或现有样式表中。元素是否已经具有“class”属性值可能会影响为此项目选择的供应商。

更新

在设计视图中，服务器控件的复杂属性通常具有关联的对话框和向导，以使其易于设置。例如，您可以使用特殊的对话框向Repeater控件添加数据源或向GridView控件添加列。

但是，在源代码视图中，这种复杂属性的UI帮助是不可用的。因此，Visual Studio 11为源代码视图引入了智能任务。智能任务是C＃和Visual Basic编辑器中常用功能的上下文感知快捷方式。

对于ASP.NET Web Forms控件，在插入点位于元素内部时，智能任务将显示为服务器标记上的小标志：

我能把我的代码放进那个对话框里吗？

谢谢！

- Glenn Ferrie

---

插件/vsix：是的，这是正确的方法。至于指导，我通常会在 CodePlex 上搜索一个做类似事情的项目，然后浏览它的源代码 ;)。 - jessehouwing

请提供更多信息。请查看修改后的问题。 - Glenn Ferrie

我已经阅读了你的整个问题。但是因为我的英语不太好，我不明白为什么你不使用Web技术来完成所有这些工作。我相信你对所有这些都很了解。（'Jquery'在客户端方面非常有帮助。'JUI'是一个非常好的界面。'AJAX'是一种非常好的技术，可以执行服务器端代码和与服务器的交互等...）而且你知道所有的事情都正在以Web应用程序的形式转变。开源始终如一，随时随地可访问等。 - Sina R.

感谢大家的反馈，我将尝试这些建议。 - Glenn Ferrie

Answer 1

我去年为班级开发了一个小型的VS扩展程序，与排序、格式化和重新组织C++代码文件有关。虽然它与您想要做的有些不同，但我可以建议您查看CodeMaid。它有很多令人惊讶的特性，并且由于它是开源的，源代码在我制作扩展程序时真的帮了我很大忙。

不幸的是，您正在使用HTML，而Visual Studio只为C#和一小部分C++提供代码模型（基本AST）。您不太可能从Visual Studio获得有关HTML编辑的任何帮助。

所以我会做两件事。首先，查看这些教程。它们将帮助您创建扩展程序的基础，并使您熟悉API。（由于微软的教程并不是最好的，您可能需要寻找其他教程来增加知识。）其次，提高您的正则表达式技能。完成您想要的最好方法可能是自己解析文件并定位所有内联样式标记的实例。然后添加右键菜单项，在需要时定位适当的标记。

但是，我建议你从基础教程开始学习。VS扩展API有点奇怪，所以你可能需要先做一些简单的东西来适应它。

祝你好运，你会需要的。:p

编辑：我知道这并没有直接回答你的问题，只是提供了一些建议。

- GJK

Answer 2

是的，VSIX是正确的选择。

您可以查看Web Essentials中的一些代码。Web Essentials执行类似于您要执行的操作。

以下是CSS排序器的GitHub链接：https://github.com/madskristensen/CssSorter 这是一个HTML ZenCoding功能的链接：https://github.com/madskristensen/zencoding。

由于它们都涉及处理HTML和CSS，因此您可以通过查看代码获得很多信息。您的项目唯一的区别在于，您实际上同时针对两个，并且正在查看访问多个文件。不幸的是，对于HTML和CSS，我不知道是否有可用的内置解析器。

但是，NuGet中有一些可用的软件包，您可以尝试使用这些软件包：

ExCSS样式表解析器：http://nuget.org/packages/ExCSS/ HtmlAgilityPack：http://nuget.org/packages/HtmlAgilityPack/ 我没有直接使用过这些软件包，但我想您将不得不尝试并查看它是否适合您的需求。

至于smarttasks：这通常是控件设计器的一部分，我认为它不适合您要执行的操作。我建议将您的扩展名添加到上下文菜单中。

- Kenneth