AngularJS 智能感知不适用于 Visual Studio 2015

Question

根据这个post intellisense 也应该在新的 VS 2015 上工作，但到目前为止，我只为角度对象而不是依赖项或我的自定义模块获得智能感知。

这就是我所做的：

1. 将 angular.intellisense.js 添加到 C:\Program Files (x86)\Microsoft Visual Studio 14.0\JavaScript\References 的全局 javascript 引用中
2. 重启VS2015 然后什么也没有，每当我尝试在 $http 对象上使用智能感知时，它只会显示感叹号。

我也将该文件添加到与我的 angular.js 相同的位置，但它仍然无法正常工作。在这种情况下，我的问题是，我应该将文件放在哪里？在只有我的 angular.js 的 angular 公共文件夹上，或者在我从 bower 下载的所有文件所在的 dev angular 文件夹上。

我还尝试将其直接添加到隐式（Web）参考组上的工具/选项/文本编辑器/javascriptr/intellisense/reference 菜单中，但它仍然不起作用。

在我的项目中，src 文件夹中有以下文件夹结构：

• wwwroot
  • 应用程序（我的角度网站的东西）
    • 控制器
    • 服务
    • 观看次数
  • lib（js依赖，只有每个库的.min.js文件）
    • 角度
    • 角度路线
    • ....
  • _references.js（visual studio js 引用文件，包含对app和lib文件夹内文件的引用）
• 库（包含 Bower 下载的完整库）
  • 角度
  • 角度路线
  • ...

附带说明，我没有 /scripts 文件夹，因此没有 /scripts/_references.js 文件

.

Answer 1

以上都不适合我。我的是 Visual Studio 2017 - 专业版

但我在这里使用我的解决方案让它工作了 -->

1. 您必须通过封闭的/// <reference path="yourpath"/> 引用源代码，即使源代码位于您编写代码的文件夹中。
2. 不要使用缩小的来源。您的所有来源都必须未缩小。
3. 如果您将路径 stmts 存储在 _reference.js 文件中，请确保该文件与您的代码文件所在的目录相同。

虽然我可以将引用 stmt 放在我的代码文件中，但我选择使用单独的文件“_reference.js”来存储它。

你可以把它和你的代码放在一起：

/// <reference path="../_assets/JS-Main/angular-1.3.13.js" />

var app = angular.module('app', ['ui.grid', 'ui.bootstrap']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {

或者您可以将此行输入到您的 _reference.js 文件中

/// <reference path="../_assets/JS-Main/angular-1.3.13.js" />

完成以上所有操作后，您应该能够看到角度智能感知。

您可以为其他人的智能感知（如 jQuery、Anytime、_underscore 等）做同样的事情......只需继续将路径语句添加到 _reference.js 文件中，您还可以将该 _reference.js 文件复制到其他网站，如果他们具有相同的目录结构。祝你好运！

Answer 2

这对我在 Web 项目的 Visual Studio 2015 RTM 中不起作用，但我解决了问题。

此项目不是使用 Visual Studio 创建的，并且在任何地方都没有 _references.js 文件。所以我认为这在任何情况下都有效。

我从 VS UI 中删除了所有其他智能感知资源，以确保我所做的就是修复它。

1. 转到https://www.angularjs.org 并拉出下载对话框。

1. 复制未压缩的 CDN 网址。今天恰好是https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js
2. 在 Visual Studio 2015 RTM 中，转到 Tools, Options, Text Editor, Javascript, Intellisense, References。选择合适的参考组；对于大多数网络项目，这是Implicit (Web)。将 url 粘贴到底部文本框中，然后单击 Add 按钮。不要关闭对话框。
3. 在Text Editor, Javascript, Intellisense, General 下，确保选中Download remote references 复选框。
4. 单击确定按钮。
5. （可选）如果您想为您创建的角度提供程序（不是角度框架的一部分）提供智能感知，请将_references.js 添加到项目的根目录。不要费心制作Scripts 文件夹。右键单击它并选择自动同步，然后选择更新。进入它并删除由构建过程创建的所有 js 文件。如果你不这样做，它们可能会太大，以至于会破坏智能感知。首次使用智能感知时，请准备好约 5-10 秒的延迟，因为它必须从您的项目中加载所有这些引用。
6. 如果 Resharper for javascript 干扰了原生智能感知，您可能需要禁用智能感知。
7. 重新启动 Visual Studio。除非您这样做，否则它不会起作用。另外，我很想先关闭除此实例之外的所有其他实例，因此这些设置“坚持”。因此，我建议您在重新启动此实例之前执行此操作。

Answer 3

Visual Studio intellisense for AngularJS 非常感性（一种很好的说法，它很可能是开发不佳）。

因此，即使 _references.js 文件对所有内容都进行了很好的配置，并且您获得了其他库（如 jQUERY）的智能感知，但您很可能不会获得 AngularJS 的智能感知。

例如，在 VS 2015 社区中，以下指令不会显示 $http 角度对象的智能感知，尽管代码一切正常：

在下图中，我向模块添加了一个空数组（这意味着该模块将被创建，如果存在另一个同名的模块，它将被覆盖），智能感知开始工作：

这是一个sn-p代码供你自己测试（尝试在此处添加空数组）：

(function () {
    'use strict';

    angular
        .module('intellisence.sucks.directives')
        .directive('footer', footer);

    footer.$inject = ['$http'];

    function footer($http) {

        $http.
        var directive = {
            link: link,
            restrict: 'EA'
        };
        return directive;

        function link(scope, element, attrs) {
        }
    }

})();

---

PS：如果您在解决方案资源管理器中单击项目上的任何文件夹并按 Ctrl+Alt+A 添加新项目，您会收到添加 AngularJs 指令的建议，如果您这样做了它，该指令将像我刚刚向您展示的那样，在模块声明中没有空数组，因此智能无法使用它。它不适用于 Microsoft 提供给用户的示例...仅适用于模块创建，您的第一个文件，并且从现在起不再适用。

Answer 4

正如@Balthasar 指出的那样（如果您使用的是 Resharper），您需要从 Visual Studio 启用智能感知才能使其工作：

Resharper -> 选项 -> 环境 -> 智能感知 -> 常规，选择“自定义智能感知”，对于 Javascript，您可以选择 Visual Studio。或者，您可以使用“Visual Studio”语句完成（第二个选项）

Answer 5

我刚刚意识到 _reference.js 文件使用的自动顺序（首先是我的文件，然后是框架的文件）阻止了 intellinsense 处理不是 app.js 文件的其他文件

这就是我的 _references.js 现在的样子：

/// <autosync enabled="false" />
/// <reference path="angular.js" />
/// <reference path="angular-resource.js" />
/// <reference path="angular-ui-router.min.js" />
/// <reference path="jquery-2.1.4.js" />
/// <reference path="materialize/materialize.js" />
/// <reference path="../App/App.js" />
/// <reference path="../App/Controllers/productsController.js" />
/// <reference path="../App/Controllers/productsEditController.js" />
/// <reference path="../App/Controllers/valuesController.js" />
/// <reference path="../common/common.services.js" />
/// <reference path="../common/productsResource.js" />
/// <reference path="../common/valuesResource.js" />

Answer 6

只需在项目根目录下名为“Scripts”（命名约定）的文件夹中创建一个 _references.js 文件。用你必要的 javascript 文件更新它，你应该能够得到智能感知。这是一个关于为什么需要这样的东西的链接：http://madskristensen.net/post/the-story-behind-_referencesjs

Answer 7

我有同样的问题。当我添加角度时，VS 2015 (RTM) 修改了我的 _references.js；基本上它删除了我在文件中的一些行。当我在我的 _references.js 中添加对 angula 的引用时，如下所示

/// <reference path="lib/angular/angular.js" />

我在 VS 2015 中获得了 Angular 1.4.3 的智能感知！

Answer 8

我遇到了类似的问题，结果发现 Resharper 阻止了我在 _references.js 文件中设置的所有不错的 JavaScript 智能感知。

Answer 9

我对 RTM 有这个问题 ..除了角度对象和 hello world 复杂性 senario（$http 和所有自定义对象都不起作用）.. 遵循 _references 设置。我唯一的怀疑是我从 RC 升级到 RTM（没有全新安装）在 Git [link]github.com/jmbledsoe/angularjs-visualstudio-intellisense/issues/... ..抓取 VHD Win 10 图像并去d/l 完成后试试看 :( –

更新

好吧，这里有一点帮助就是答案...... Intellisense 引擎永远不会看到名为“sportsStore”的模块正在创建，因为它是在脚本块的 app.html 文件中创建的：

<script>
  angular.module("sportsStore", ["customFilters","cart"]);
</script>

VS Intellisense 引擎正在“执行”您项目中的代码，以了解如何完成代码。它使用 _references.js 文件作为起点，并按顺序执行该文件中的每个引用。由于 VS Intellisense 从不执行创建名为“sportsStore”的 AngularJS 模块的代码行，因此它不知道如何进行代码补全。

将上面的 JavaScript 代码移动到它自己的 JS 文件中（我们称之为“app.js”），并在 _references.js 中包含对它的引用。确保“app.js”引用紧跟在“angular.js”引用之后，因为您需要它在其他脚本文件配置它之前创建模块。 :D

Answer 10

我遇到了这个问题。

Visual Studio IDE 将扫描 HTML 文件中引用的任何 js 文件，并在必要时使用它们（用于智能感知等）。

我的问题是我使用 CDN/http:// 地址引用 Angularjs，因此 Visual Studio 没有关于 Angular 的任何信息。

尝试直接下载 angularjs js 文件并将其包含在您的项目中并在您的 index.html 中引用，重新构建（以防万一）并重试，希望它可以工作。

希望我能帮上忙。

Answer 11

按照本文为 VS 添加更全面的智能感知。

http://blogs.msdn.com/b/visualstudio/archive/2015/02/05/using-angularjs-in-visual-studio-2013.aspx

下载angular.intellisense.js 文件并将其放在 Program Files (x86)\Microsoft Visual Studio 12.0\JavaScript\References 文件夹中