如何让 VS Code 的 Intellisense 与 AngularJS 的注入服务一起工作？

Question

所以我正在尝试获取 Visual Studio 代码来为我的 AngularJs（不是 Angular）提供智能感知应用程序的服务。我设法获得了 angular 的标准类型（现在当我输入 "angular." 时，它会提示模块等内容）。这行得通而且很棒，但是我找不到让它与我的服务（或工厂）一起工作的方法。我知道，对于 IDE 来说，通过依赖注入等来计算代码并不容易

但是当我的控制器和它使用的服务都在同一个 JS 文件中时，它似乎工作正常！我遇到的唯一问题是我的应用程序太大，无法全部放在一个 JS 文件中，一旦我将代码拆分到多个文件中，它就会失败。

请注意，我已尝试使用 "triple-slash directive" (/// ) 但没有帮助。我一整天都在努力解决这个问题，非常感谢任何帮助。

代码示例：

var app = angular.module('app', []);

app.controller('ctrl', ['$scope', 'test',
    function ($scope, test) {

        $scope.test = test.word; //TRY TYPING 'test.' --> want to have intellisense suggest 'word'

}]);
//PUT THE BELOW IN ANOTHER FILE AND INTELLISENSE DOES NOT SHOW 'word'
app.service('test', [function(){
    /**
     * @type {string}
     */
    this.word = "balls";
    /**
     * @function
     * @param {string} variable
     */
    this.getLower = function (variable) {
        return variable.toLowerCase();
    }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="ctrl">
    <p class="lead">{{test}}</p>
  </div>
</div>

Answer 1

您提到尝试使用三斜线指令，但不清楚（至少从您的代码片段来看）您是否真的在使用 TypeScript。如果您不使用后者，那么如果您想要改进跨文件的 IntelliSense，则需要使用后者。

VS Code 为您提供您在 type definitions provided for AngularJS.

中看到的有限 IntelliSense

简而言之，您需要：

配置您的项目以使用 TypeScript（即设置 tsconfig.json）
安装 AngularJS 类型定义（即 npm i --save-dev @types/angular）
以利用类型定义 (Todd Motto's guide provides some good guidance about this)

下面是这种风格的一个非常简短的例子：

// Service.ts
export default class Service {
    constructor() {}
    log(message: string) {
        console.log(message);
    }
}

// Controller.ts
import ng from 'angular';
import Service from './Service';

export default class Controller implements ng.IController {
    static $inject: string[] = ['Service'];
    constructor(private service: Service) {}
    $onInit() {
        this.service.log('Hello, world!');
    }
}

// App.ts
import angular from 'angular';
import Controller from './Controller';
import Service from './Service';

export const angular
    .module('app', [])
    .service('Service', Service)
    .controller('Controller', Controller)
    .name;

如果你尝试上面的方法，你应该能够在 Controller.ts.

的 Service 内部的 log 调用中获得 IntelliSense

如何让 VS Code 的 Intellisense 与 AngularJS 的注入服务一起工作？

How to get VS Code's Intellisense to work with AngularJS's injected services?

javascript

intellisense

angularjs

visual-studio-code