javascript - 操作 HTML/CSS 的 VS 扩展

Question

我希望增强我的编程经验，我相信我可以通过创建 Visual Studio (2012) 扩展来实现。我已经开始深入研究 MSDN 上的文档，但它很密集，我正在研究它。

我有几个问题:

1. 扩展是否是描述场景的正确方法 以下？
2. 如果是这样，知道我应该开始挖掘哪个命名空间吗？
3. 任何明智的智慧/链接 RE:“陷阱”或“陷阱”？

设置 我有一个 HTML block ，它在某些元素上有一些内联 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 附加到项目中新的或现有的样式表/解决方案。该元素是否已经具有“类”属性的值可能会影响为此项目选择的 vendor 。

更新

看到这个:http://www.asp.net/vnext/overview/aspnet/whats-new

智能任务

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

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

对于 ASP.NET Web 窗体控件，当插入点位于元素内部时，智能任务在服务器标记上显示为一个小字形:

我可以将我的代码放入该对话框吗？

谢谢!

Answer 1

我去年为类(class)做了一个小的 VS 扩展，结果非常好。它与排序、格式化和重新组织 C++ 代码文件有关。这与您想做的有点不同，但我建议您看一下 CodeMaid .它具有数量惊人的功能，而且由于它是开源的，因此在我开发扩展程序时，源代码确实帮助了我。

不幸的是，您使用的是 HTML，而 Visual Studio 仅为 C# 和少量 C++ 提供代码模型(基本 AST)。您不太可能从 Visual Studio 获得有关 HTML 编辑的任何帮助。

所以我会做两件事。首先看these教程。他们将帮助您为您的扩展创建基础并让您熟悉 API。 (您可能不得不寻找其他人来增加您的知识，因为 MS 教程不是最好的。)其次，完善您的正则表达式。完成你想要的最好的方法可能是自己解析文件并找到内联样式标签的所有实例。然后添加一个右键单击菜单项，并在需要时找到合适的标签。

但同样，我会从基础教程开始。 VS 扩展 API 有点奇怪，因此您可能希望通过先做一些简单的事情来习惯它。

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

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