VisualStudio中的HTML角度智能感知 [英] Html angular intellisense in visualstudio

问题描述

我想知道如何在Visual Studio 2013 Update 3中获取html页面上的角度的智能感知

I am wondering how to get intellisense for angular on html pages in visual studio 2013 update 3

我可以使用_references.js获得js页面的智能感知.但是，我希望能够在html中引用控制器和属性，以便更快地进行编码.

I can get intellisense for the js pages using the _references.js. However i would like to to be able to reference controllers and properties in the html for quicker coding.

如果我有

ng-controller=""

我希望它能够引用我创建的所有控制器.

I would like it to be able to references all the controllers i have created.

也在ng-repeat中.如果我已经创建

Also in a ng-repeat. If i have created

ng-repeat="foo in vm.foos"

我希望intellisense能够选择foo的所有属性以供使用

I would like intellisense to then be able to pick up all the properties for foo to use

{{foo.fooProperty}}

这可能吗?

我确实有Web Essentials 2013 Update 3，但是我没有此功能.我正在考虑迁移到Webstorm IDE，因为它内置了所有功能，但希望在Visual Studio中使用它

I do have web essentials 2013 update 3, but i do not get this functionality. I am thinking of moving to the webstorm IDE because it has it all built in but would prefer to have it in visual studio

推荐答案

2016年2月16日更新，添加了注释和属性类型示例

Updated 2/16/2016 with added comments and attribute type examples

这是对Visual Studio自身内部文件的黑客攻击，因此在升级Visual Studio时要小心.

This is a hack into Visual Studio's own internal files, so beware when upgrading Visual Studios.

通过编辑html.xsd文件，您可以添加自定义指令，指令属性，甚至指令属性值选项.

By editing the html.xsd file, you can add custom directives, directive attributes, and even directive attribute value options.

将此位置复制并粘贴到Windows资源管理器位置栏中:

Copy and paste this location in your Windows Explorer location bar:

Visual Studio 2013的位置

C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\CommonExtensions\Microsoft\Web\Schemas\1033\HTML

Visual Studio 2015的位置

C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\Schemas\1033\HTML

制作html.xsd文件的副本并备份到新位置.

Make a copy of the html.xsd file and backup to a new location.

在大约103开始的那一行寻找:

Look for the line at around 103 that begins:

<xsd:group name="flowContent">
    <xsd:choice>
        <!-- Add references to your Custom Elements here-->
        <xsd:element ref="my-simple-directive" /> 
        <xsd:element ref="my-complex-directive" /> 
        <xsd:element ref="a" />
        <xsd:element ref="abbr" />
        <xsd:element ref="acronym" />
        ...

然后在结束标记之前，为每个指令添加元素定义.

Then further down, before the closing tag, add the element definitions for each of your directives.

<!-- A basic custom element-->
<xsd:element name="my-simple-directive" vs:description="108">
  <xsd:complexType>
    <xsd:choice>
      <xsd:group ref="flowContent" />
      <xsd:group ref="phrasingContent" />
    </xsd:choice>
    <xsd:attributeGroup ref="commonAttributeGroup" />
  </xsd:complexType>
</xsd:element>

<!-- Define a few attribute types that we 
want to use in our fancy element example.  -->

<!-- Create a type to enumerate values of an attribute -->
<xsd:simpleType name="scopeValues">
   <xsd:restriction base="xsd:string">
     <xsd:enumeration value="these items" />
     <xsd:enumeration value="show up in scope option" />
     <xsd:enumeration value="dropdown in visual studio" />
   </xsd:restriction>
</xsd:simpleType>

<!-- Define allowed icons for an icon attribute -->
<xsd:simpleType name="myIcons">
   <xsd:restriction base="xsd:NMTOKEN">
    <xsd:enumeration value="pause" />
    <xsd:enumeration value="play" />
    <xsd:enumeration value="rewind" />
  </xsd:restriction>
</xsd:simpleType>

<!-- Define attribute groups to keep your code dry -->
<xsd:attributeGroup name="iUseTheseScopeValuesALot">
 <xsd:attribute name="isBusy" type="xsd:boolean" />
 <xsd:attribute name="icon" type="myIcons" />
 <xsd:attribute name="isDisabled" type="xsd:boolean" 
    vs:icon="myIcon.png" />
</xsd:attributeGroup>

<!-- An element with custom attributes-->
<xsd:element name="my-complex-directive" vs:description="108"  vs:icon="my16x16pxIcon.png">
    <xsd:complexType>
        <xsd:choice>
            <xsd:group ref="flowContent" />
            <xsd:group ref="phrasingContent" />
        </xsd:choice>

        <!-- The attribute group references common attributes
        like "id" "class", etc. for our custom element -->
        <xsd:attributeGroup ref="commonAttributeGroup" />

        <!-- I can even define my own custom attribute group -->
        <xsd:attributeGroup ref="iUseTheseScopeValuesALot" />

        <!-- Define more properties on scope -->
        <xsd:attribute name="directive-scope" />

        <!-- Hint that the scope value must be a boolean -->
        <xsd:attribute name="isDisabled" type="xsd:boolean" />

        <!-- You can even define your own often-used attribute types -->
        <xsd:attribute name="icon" type="myIcons" vs:icon="icomoon.png" />

       <!-- Or just define them inline -->
        <xsd:attribute name="myDropdown1" vs:multivalue="true">
            <xsd:simpleType>
                <xsd:restriction base="xsd:string">
                    <xsd:enumeration value="these items" />
                    <xsd:enumeration value="show up in scope option" />
                    <xsd:enumeration value="dropdown in visual studio" />
                </xsd:restriction>
            </xsd:simpleType>
        </xsd:attribute>

    <!-- This enumerates the same value options as the attribute
    myDropdown1, but we've just pointed it to a reference -->
    <xsd:attribute name="myDropdown2" type="scopeValues" />

    </xsd:complexType>
</xsd:element>

作为顶部的樱桃，您可以在每个属性或元素中添加vs:icon ="myCustomIcon.png"以在下拉菜单中获得自己的图标，然后将该16x16px PNG放置在1033 \ HTML中文件夹(与更新的html.xsd相同的文件夹).

As a cherry-on-top, you can add a vs:icon="myCustomIcon.png" to each attribute or element to get your own icon in the dropdown, you would then place this 16x16px PNG in the 1033\HTML folder (the same folder as your updated html.xsd).

我发现我经常不得不重新启动Visual Studio两次才能使用它们.并确保在复制新文件或将新文件保存到Program Files目录中时提供管理员权限.如果您没有收到管理员警告，则说明您已禁用它们，或者某些不正确的操作.在我的设置中，我发现我无法直接保存到1033 \ HTML文件夹，在保存到"Program Files"文件夹之外的文件夹后，我不得不将文件拖到该文件夹​​中.

I found I often had to restart Visual Studio twice to get these to take. And make sure you provide administrator rights when you copy new files or save new files into the Program Files directory. If you don't get an administrator warning, either you've disabled them, or something's not quite right. In my setup I found I wasn't able to save directly to the 1033\HTML folder, I had to drag the files into the folder after saving in a folder outside the "Program Files" folder.

这篇关于VisualStudio中的HTML角度智能感知的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！