logo标签列表

Visual Studio 2013 支持 AngularJS 智能感知功能

angularjsvisual-studio-2013
52

我认为VS 2013应该支持AngularJS属性智能感知，但是在最新版本的 Microsoft Visual Studio Ultimate 2013 version 12.0.21005.1 上却无法正常工作。

出现以下验证警告：
属性“ng-app”不是元素“html”的有效属性。
属性“ng-view”不是元素“div”的有效属性。

我是否漏掉了xsd引用？

9
请使用 data-ng-* - 从技术上讲，ng-* 不是一个有效的属性。 - tymeJV
是的，这是我在Visual Studio 2012中使用的方法，我只是认为VS 2013应该支持这个功能？ - Henry O
我也有点困惑，现在在做一个Angular网站，但它无法自动完成或执行任何被宣传的功能。 - Roger Far
12个回答
65

我曾经也遇到过同样的问题，并采取了以下措施，帮助我解决了问题。

如果您正在使用ReSharper，您可以添加一个扩展程序，将为您提供Intellisense，并不会引发警告。

在VS中的顶部菜单栏> Resharper> Extension Manager> 搜索AngularJS，这将添加AngularJS Intellisense。

------- 编辑 -------

使用Resharper 8.2.1 Resharper 菜单

输入图像描述

1
在VS 2012中，您是指工具>扩展和更新>在线>搜索AngularJS并选择resharper吗？ - Per G
这是同样的菜单。你需要Resharper的菜单而不是VS的菜单。在顶部菜单中，选择Resharper。 - OmerBTW
2
我使用的是ReSharper 8.2版本，但在VS>Resharper>Extension Manager下找不到ReSharper Gallery。由于这是在8.2中安装插件的唯一方法，所以我感到很困惑。我通过进入VS>Resharper>Options...>Environment>Extension Manager来恢复了ReSharper Gallery。我添加了一个名为“My ReSharper Gallery”的新扩展源，指向https://resharper-plugins.jetbrains.com/api/v2。我无法在JetBrain的网站或任何文档中找到该服务的地址。我只能通过访问https://resharper-plugins.jetbrains.com/packages并查看网络流量来解决问题。 - Dude0001
我刚刚编辑了我的回复并添加了图片。你看到了吗？ - OmerBTW
这会为JS代码提供智能感知吗，还是只有HTML？ - Jim Aho
它也会提供JS自动完成。 - OmerBTW
20

我知道这篇文章有些老，但我仍然遇到了同样的问题。要解决VS 2013的问题，请按照以下步骤进行：

1）打开文件C：\Program Files（x86）\Microsoft Visual Studio 12.0\Common7\Packages\schemas\html\commonHTML5Types.xsd

2）找到文件中以这一行开头的区域：<xsd:attribute name="translate">。向下滚动约7行，找到相应的结束标签：</xsd:attribute>

3）将以下代码行粘贴到</xsd:attributeGroup>结束标签之前：

<xsd:attribute name="ng-app" vs:category="Angular" />
<xsd:attribute name="ng-bind-html" vs:category="Angular" />
<xsd:attribute name="ng-bind-html-unsafe" vs:category="Angular" />
<xsd:attribute name="ng-bind-template" vs:category="Angular" />
<xsd:attribute name="ng-checked" vs:category="Angular" />
<xsd:attribute name="ng-class" vs:category="Angular" />
<xsd:attribute name="ng-class-even" vs:category="Angular" />
<xsd:attribute name="ng-class-odd" vs:category="Angular" />
<xsd:attribute name="ng-click" vs:category="Angular" />
<xsd:attribute name="ng-cloak" vs:category="Angular" />
<xsd:attribute name="ng-controller" vs:category="Angular" />
<xsd:attribute name="ng-csp" vs:category="Angular" />
<xsd:attribute name="ng-dblclick" vs:category="Angular" />
<xsd:attribute name="ng-disabled" vs:category="Angular" />
<xsd:attribute name="ng-form" vs:category="Angular" />
<xsd:attribute name="ng-hide" vs:category="Angular" />
<xsd:attribute name="ng-href" vs:category="Angular" />
<xsd:attribute name="ng-include" vs:category="Angular" />
<xsd:attribute name="ng-init" vs:category="Angular" />
<xsd:attribute name="ng-list" vs:category="Angular" />
<xsd:attribute name="ng-model" vs:category="Angular" />
<xsd:attribute name="ng-mousedown" vs:category="Angular" />
<xsd:attribute name="ng-mouseenter" vs:category="Angular" />
<xsd:attribute name="ng-mouseleave" vs:category="Angular" />
<xsd:attribute name="ng-mousemove" vs:category="Angular" />
<xsd:attribute name="ng-mouseover" vs:category="Angular" />
<xsd:attribute name="ng-mouseup" vs:category="Angular" />
<xsd:attribute name="ng-multiple" vs:category="Angular" />
<xsd:attribute name="ng-non-bindable" vs:category="Angular" />
<xsd:attribute name="ng-readonly" vs:category="Angular" />
<xsd:attribute name="ng-repeat" vs:category="Angular" />
<xsd:attribute name="ng-selected" vs:category="Angular" />
<xsd:attribute name="ng-show" vs:category="Angular" />
<xsd:attribute name="ng-src" vs:category="Angular" />
<xsd:attribute name="ng-style" vs:category="Angular" />
<xsd:attribute name="ng-switch" vs:category="Angular" />
<xsd:attribute name="ng-transclude" vs:category="Angular" />
<xsd:attribute name="ng-view" vs:category="Angular" />

保存文件并重新打开VS2013。这应该会解决问题。

1
如果有人不使用 ReSharper - 这应该是一个解决方案 ;) - Lightning3
2
这是正确的答案，不需要第三方工具。问题在于VS2013包括Angular支持，但仅适用于.html页面。此答案为.aspx页面添加了相同的支持。 - LJ Wilson
对于像 ng-cloak 这样没有值的指令，您可以添加属性 vs:standalone="true"： <xsd:attribute name="ng-cloak" vs:category="Angular" vs:standalone="true" /> - GôTô
已确认此方法同样适用于Visual Studio 2015。 - jaycer
在VS2015中，这对我没有起作用。ng属性的值在.html中看起来很好，但在.aspx中被标记为普通文本。 - Arg0n
17
9
如果您正在使用ReSharper，请尝试关闭ReSharper IntelliSense for HTML。
ReSharper > Options > IntelliSense > General > Limited ReSharper IntelliSense 注意： - 这不会在ASP.NET文件中提供AngularJS智能感知 - 在更改设置后，您需要重新打开VS中的HTML文件 - 当前版本的ReSharper是8.2
9

您也可以直接在VS 2013的软件包管理器控制台中运行以下命令：Install-Package AngularJS.Intellisense。

1
可能是正确的答案。这里有一个链接 https://www.nuget.org/packages/AngularJS.Intellisense/ - S Meaden
5

尝试在选项中勾选 文本编辑器\HTML\通用\自动列出成员。

自动列出成员对于HTML和HTML（Web Forms）已经默认选中。此外，它与智能感知无关。 - Henry O
对我来说，那就是这样了！勾选HTML的“自动列出成员”选项（默认未勾选）。 - Ismael
2
Visual Studio 2013 Update 4取消了验证，但是它不包括AngularJS的智能感知。
支持自定义元素、polymer元素和属性
我们不再为自定义元素的未知属性进行验证，因为不同框架中会有许多自定义标签。因此，未知元素下将不再出现波浪线。
- 在Visual Studio 2013 Update 4 RC中宣布新的Web功能 下载Visual Studio 2013 Update 4。
验证仅在HTML编辑器中被移除，而不是HTML（Web表单）编辑器。这意味着，默认情况下，.html文件将不具有自定义元素验证，但.aspx页面将具有此功能。如果您和我一样认为这没有意义，请通过投票支持在.aspx文件中使用自定义元素来表达您的支持。
我已经安装了VS 2013 Pro Update 4，但在HTML文件中的AngularJS引导<alert>标签下仍然存在波浪线。 - GDB
2

我知道这篇文章很旧，而且问题特别涉及到VS 2013，但是如果你仍在运行VS 2010，并想要应用puargs的解决方案，你可以在C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\Packages\schemas\html\html_5.xsd找到该文件。

你需要将puargs的代码添加到<xsd:attributeGroup name="commonHTML5coreAttributeGroup">部分中。

Mads Kristensen还讨论了[将此解决方案应用于VS 2012]1，并在第2步提供了2012年commonHTML5Types.xsd的更新版本的链接。

还要注意，puargs和Mads的列出的ng-view属性缺少一个导致“属性名称必须后跟等号（=）符”警告的属性。完整的元素为：<xsd:attribute name="ng-view" vs:category="Angular" vs:standalone="true"/>。

1
遇到了同样的问题。如果你和我一样在VS 2013上安装了Resharper，你可以通过安装由JetBrains提供的AngularJS插件来获得instellisense。
以下是具体步骤：
1. 打开VS2013 > Resharper > 管理扩展。 2. 使用Nuget在线搜索“AngularJS”，然后点击“安装”。
上述步骤应该可以满足你的需求。如果你需要图像指南，请访问此链接 - http://jeeshenlee.com/2014/07/12/how-to-get-angularjs-intellisense-support-on-resharper/。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接