视觉工作室中的Html角度智能感知

时间:2014-10-04 06:26:06

标签: angularjs visual-studio intellisense

我想知道如何在visual studio 2013 update 3中获取html页面上的角度智能感知

我可以使用_references.js获取js页面的intellisense。但是我希望能够在html中引用控制器和属性以便更快地编码。

所以,如果我有

ng-controller=""

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

同样在ng-repeat中。如果我已创建

ng-repeat="foo in vm.foos"

我想intellisense然后能够获取foo使用的所有属性

{{foo.fooProperty}}

这可能吗?

我确实有web essentials 2013更新3,但我没有获得此功能。我正在考虑迁移到webstorm IDE,因为它内置了所有内容但更愿意将它放在visual studio中

2 个答案:

答案 0 :(得分:2)

2016年2月16日更新,添加了评论和属性类型示例

这是对Visual Studio自身内部文件的攻击,因此在升级Visual Studios时要小心。

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

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

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文件的副本并备份到新位置。

在103左右开始寻找线路:

<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" />
        ...

然后在结束标记之前进一步向下添加每个指令的元素定义。

<!-- 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 =&#34; myCustomIcon.png&#34;为了在每个属性或元素中获取您自己的图标,您可以将此16x16px PNG放在1033 \ HTML文件夹中(与更新的html.xsd相同的文件夹)。

我发现我经常不得不重新启动Visual Studio两次以获取这些内容。并确保在复制新文件或将新文件保存到Program Files目录时提供管理员权限。如果您没有收到管理员警告,或者您已将其禁用,或者某些内容不太正确。在我的设置中,我发现我无法直接保存到1033 \ HTML文件夹,在将文件保存到&#34; Program Files&#34;之后的文件夹中时,我不得不将文件拖到文件夹中。文件夹中。

答案 1 :(得分:0)

尝试Resharper - 虽然它只支持一些AngularJS,但它做得非常好。 Here is a ReSharper blog regarding