VS扩展来操纵HTML / CSS

时间:2013-04-02 02:26:22

标签: javascript html visual-studio-2010 visual-studio visual-studio-2012

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

我有几个问题:

  1. 扩展是所描述方案的正确方法 下面?
  2. 如果是这样,任何想法我应该开始深入研究哪个命名空间?
  3. 任何圣人智慧/链接RE:“陷阱”或“陷阱”?
  4. 设置 我有一个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附加到项目中的新的或现有的样式表/解。元素是否已具有“类”属性的值可能会影响为此项目选择的供应商。

    更新

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

    智能任务

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

    但是,源视图中尚未提供此类复杂属性的UI帮助。因此,Visual Studio 11为源视图引入了智能任务。智能任务是C#和Visual Basic编辑器中常用功能的上下文感知快捷方式。

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

    enter image description here

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

    谢谢!

2 个答案:

答案 0 :(得分:3)

我去年做了一个很小的VS扩展课程,结果非常好。它与排序,格式化和重新组织C ++代码文件有关。它与你想做的有点不同,但我建议你看看CodeMaid。它具有惊人数量的功能,并且由于它是开源的,源代码在我处理扩展时真的帮助了我。

不幸的是,您正在使用HTML和Visual Studio只提供C#的代码模型(基本AST)和一小部分C ++。您不太可能通过HTML编辑从visual studio获得任何帮助。

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

但是,我将从基本教程开始。 VS扩展API有点奇怪,所以你可能想通过先做简单的事情来习惯它。

祝你好运,你需要它。 :P

编辑:我知道这并没有直接回答你的问题,只是提出一些建议。

答案 1 :(得分:3)

是的,VSIX是可行的方法。

您可以查看Web Essentials中的一些代码。 Web要素与您想要做的事情类似。

以下是github上的CSS分类器的链接: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:这通常是控制设计师的一部分,我认为它不适合你想做的事情。我只想将你的扩展添加到上下文菜单