Visual Studio 2013 AngularJS 智能感知支持答案

【问题标题】：Visual Studio 2013 AngularJS intellisense supportVisual Studio 2013 AngularJS 智能感知支持
【发布时间】：2013-10-31 14:43:00
【问题描述】：

我认为 VS 2013 应该支持 angularjs 属性智能感知？由于某种原因，它在最新版本的 Microsoft Visual Studio Ultimate 2013 版本 12.0.21005.1 上对我不起作用

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

我是否在某处缺少 xsd 引用？

【问题讨论】：

使用data-ng-* - 从技术上讲，ng-* 不是一个有效的属性。
是的，这是我以前在Visual Studio 2012中做的，我只是觉得VS 2013应该支持这个？
我也有点困惑，现在在一个有角度的网站上工作，但它不能自动完成或做任何宣传的功能。

标签： angularjs visual-studio-2013

【解决方案1】：

我遇到了同样的问题，我做了以下事情，它有所帮助。

如果您使用的是 ReSharper，则可以添加一个扩展程序，该扩展程序将为您提供 Intellisense，并且不会发出警告。

VS 中的顶部菜单>Resharper>扩展管理器>搜索 AngularJS 这将添加 Angular js 智能感知。

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

使用 Resharper 8.2.1

【讨论】：

在 VS 2012 中，您的意思是 Tools>Extension and Updates > online > Search AngularJS 并选择 resharper？
同一个菜单。您需要 resharper 的菜单而不是顶部菜单中的 Resharper
我使用的是 ReSharper 8.2，但在 VS>Resharper>Extension Manager 下没有 ReSharper Gallery。由于这是在 8.2 中安装插件的唯一方法，所以我不知所措。我通过转到 VS>Resharper>Options...>Environment>Extension Manager 恢复了 ReSharper Gallery。我添加了一个名为“My ReSharper Gallery”的新扩展源，指向resharper-plugins.jetbrains.com/api/v2 我在 JetBrain 的网站或任何文档中都找不到该服务的地址。我只是通过转到resharper-plugins.jetbrains.com/packages 并查看网络流量才知道的。
我刚刚用图片编辑了我的回复。这就是你得到的？
这是否也会为 JS 代码提供智能感知，还是只有 HTML？

【解决方案2】：

我知道这已经过时了，但它仍然发生在我身上。要为 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。这应该可以解决问题。

【讨论】：

如果有人不使用 resharper - 这应该是一个解决方案 ;)
这是正确答案，不需要第三方工具。问题是 VS2013 确实包含 Angular 支持，但仅适用于 .html 页面。这个答案添加了对 .aspx 页面的相同支持。
对于没有像 ng-cloak 这样的值的指令，您可以添加属性 vs:standalone="true" : <xsd:attribute name="ng-cloak" vs:category="Angular" vs:standalone="true" />
确认这也适用于 Visual Studio 2015。
这在 VS2015 中对我不起作用。 ng-attributes 的值在 .html 中看起来很棒，但在 .aspx 中突出显示为普通文本

【解决方案3】：

我安装了http://vswebessentials.com/

创建了一个名为 _reference.js 有内容

/// <autosync enabled="true" />
/// <reference path="angular.js" />
/// <reference path="underscore.js" />

我是从The Story Behind _references.js了解到的

【讨论】：

【解决方案4】：

如果您使用的是 ReSharper，请尝试关闭 ReSharper IntelliSense for HTML。

ReSharper > 选项 > IntelliSense > 常规 > 有限 ReSharper IntelliSense

注意事项：

这不会在 ASP.NET 文件中提供 AngularJS 智能感知
更改设置后需要在 VS 中重新打开 HTML 文件
ReSharper 的当前版本是 8.2

【讨论】：

【解决方案5】：

您也可以从 VS 2013 中的包管理器控制台运行它：Install-Package AngularJS.Intellisense。

【讨论】：

可能是正确的答案。这是一个链接nuget.org/packages/AngularJS.Intellisense

【解决方案6】：

尝试在选项中打勾Text Editor\HTML\General\Auto list members。

【讨论】：

自动列表成员已经默认检查 HTML 和 HTML（网络表单）。此外，它与智能感知无关。
对我来说就是这样！检查 HTML 的自动列表成员选项（默认未选中）。

【解决方案7】：

我知道这篇文章已经过时了，这个问题专门针对 VS 2013，但是如果您仍在运行 VS 2010 并且想要应用 puargs 解决方案，您可以在 C:\Program 找到该文件文件 (x86)\Microsoft Visual Studio 10.0\Common7\Packages\schemas\html\html_5.xsd。

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

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

另请注意，puargs 和 Mads 列表在 ng-view 上都缺少一个属性，该属性会导致“属性名称后跟等号 (=)”警告。完整的元素是：<xsd:attribute name="ng-view" vs:category="Angular" <strong>vs:standalone="true"</strong>/>。

【讨论】：

【解决方案8】：

Visual Studio 2013 Update 4 删除了验证，但它不包括 IntelliSense for AngularJS。

支持自定义元素、聚合物元素和属性

我们不再为自定义元素验证未知属性将有许多不同框架中的定制标签。所以会有不再是未知元素下的曲线。

——Announcing new Web Features in Visual Studio 2013 Update 4 RC

下载Visual Studio 2013 Update 4。

验证仅在 HTML 编辑器中被删除，而不是 HTML（Web 表单）编辑器。这意味着，默认情况下，.html 文件不会有自定义元素验证，但 .aspx 页面会有。如果像我一样，您认为这没有道理，请投票支持custom elements in .aspx files。

【讨论】：

我安装了 VS 2013 Pro Update 4，并且波浪线仍然在 html 文件中的 AngularJS 引导标记下。

【解决方案9】：

遇到同样的问题。如果你像我一样在 VS 2013 上安装了 ReSharper，你可以通过安装 AngularJS 插件（由 JetBrains 提供）来获得 instellisense。

操作方法如下：

VS2013 > ReSharper > 管理扩展。
使用 Nuget 在线搜索“AngularJS”，然后点击“安装”。

以上内容应该可以满足您的需求。如果您需要图片指南，这里是链接 - http://jeeshenlee.com/2014/07/12/how-to-get-angularjs-intellisense-support-on-resharper/

【讨论】：

【解决方案10】：

我没有尝试过 vs2013，但可以工作。使用 vs2012。 http://madskristensen.net/post/angularjs-intellisense-in-visual-studio-2012

【讨论】：

【解决方案11】：

我刚刚为 HTML 页面禁用了 resharper intellisense 并在 VS2013 上恢复了 angular intellisense

【讨论】：

【解决方案12】：

你也可以去掉警告：

http://madskristensen.net/post/angularjs-intellisense-in-visual-studio-2012

【讨论】：