web-dev-qa-db-ja.com

AngularJS intellisenseがVisual Studio 2015で機能しない

これによると post intellisenseは新しいVS 2015でも動作するはずですが、これまでのところangularオブジェクトに対してのみインテリセンスを取得し、依存関係やカスタムに対してはインテリセンスを取得しませんモジュール。

image

私がやったことは次のとおりです。

  1. C:\Program Files (x86)\Microsoft Visual Studio 14.0\JavaScript\Referencesでグローバルjavascriptリファレンスにangular.intellisense.jsを追加しました
  2. VS2015を再起動しました。その後、$ httpオブジェクトでインテリセンスを使用しようとすると、感嘆符が表示されました。

また、ファイルをangle.jsと同じ場所に追加しましたが、まだ機能しませんでした。この場合の質問は、ファイルをどこに配置すればよいですか？ angular私のangular.jsのみを含むパブリックフォルダ、または私のdev angular bowerからダウンロードされたすべてのファイルがあるフォルダ。

Implicit（Web）参照グループのtools/options/text editor/javascriptr/intellisense/referenceメニューにも直接追加してみましたが、まだ機能しませんでした。

私のプロジェクトでは、srcフォルダー内に次のフォルダー構造があります。

  • wwwroot
    • アプリ（my angular site stuff）] ..____。]
      • コントローラー
      • サービス
      • 景色
    • lib（js依存関係、各ライブラリの.min.jsファイルのみ）
      • angular
      • 角ルート
      • ....
    • _references.js（Visual Studioのjs参照ファイル。アプリおよびlibフォルダー内のファイルへの参照が含まれます）
  • ライブラリー（bowerがダウンロードした完全なライブラリーを含む）
    • angular
    • 角ルート
    • ...

追記として、/ scriptsフォルダーがないため、/scripts/_references.jsファイル

。

angularjsintellisensevisual-studio-2015
40
edua_glz

これは、Visual Studio 2015 RTM Webプロジェクトでは機能していませんでしたが、問題を解決しました。

このプロジェクトはVisual Studioで作成されたものではなく、__references.js_ファイルはどこにもありません。だから、これはどんな状況でも機能すると思います。

VS UIから他のすべてのインテリセンスリソースを削除して、それが修正されたことを確認しました。

  1. https://www.angularjs.org に移動し、ダウンロードダイアログボックスを開きます。

Download AngularJS Dialog Box

  1. 非圧縮CDN URLをコピーします。今日はたまたま https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js
  2. Visual Studio 2015 RTMで、_Tools, Options, Text Editor, Javascript, Intellisense, References_に移動します。適切な参照グループを選択します。ほとんどのWebプロジェクトでは、これはImplicit (Web)です。下部のテキストボックスにURLを貼り付けて、 Add ボタン。まだダイアログボックスを閉じないでください。 enter image description here
  3. _Text Editor, Javascript, Intellisense, General_の下で、_Download remote references_のチェックボックスがオンになっていることを確認します。
  4. クリック OK ボタン。
  5. （オプション）angular作成するプロバイダー（angularフレームワークの一部ではない）のインテリセンスが必要な場合は、ルートに__references.js_を追加します。 Scriptsフォルダーを作成する必要はありません。右クリックして[自動同期]を選択し、[更新]を選択します。ビルドプロセスで作成されたjsファイルを削除します。インテリセンスを使用すると、プロジェクトからこれらすべての参照をロードする必要があるため、インテリセンスを初めて使用するときは、最大5〜10秒の遅延に備えてください。
  6. ネイティブインテリセンスに干渉する場合は、javascriptのResharperでインテリセンスを無効にする必要があります。
  7. Visual Studioを再起動します。これを行うまで機能しません。また、このインスタンス以外の他のすべてのインスタンスを最初に閉じることについては妄想的であるため、これらの設定は「固定」されます。したがって、このインスタンスを再起動する前にそれを行うことをお勧めします。
33
toddmo

@Balthasarが指摘したように（そして、Resharperを使用している場合）、Visual Studioからインテリセンスを有効にする必要があります：

Resharper->オプション->環境->インテリセンス->一般、「カスタムインテリセンス」を選択し、Javascriptの場合はVisual Studioを選択できます。または、「Visual Studio」ステートメント補完を使用できます（2番目のオプション）

enter image description here

21
HaRoLD

私はちょうど_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" />
8
Fernando Asulay

同様の問題があり、Resharperが_references.jsファイルで設定したすべてのNice JavaScriptインテリセンスをブロックしていることがわかりました。

5
Balthasar

AngularJS向けのVisual Studioインテリセンスは非常に感傷的です（開発が不十分である可能性が高いと言えます）。

そのため、すべてが_references.jsファイルで適切に構成されていて、jQUERYのような他のライブラリのインテリセンスを取得しても、AngularJSのインテリセンスを取得することはほとんどないでしょう。

たとえば、VS 2015コミュニティでは、以下のディレクティブは$ http angularオブジェクトのインテリセンスを表示しませんが、すべてがコードで正常に機能します：

enter image description here

次の画像では、空の配列をモジュールに追加し（モジュールが作成され、同じ名前の別のモジュールが存在する場合は上書きされることを意味します）、インテリセンスが機能し始めます：

enter image description here

以下に、自分でテストするためのコードの抜粋を示します（ここに空の配列を試して追加します）。

(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を追加する提案が表示されます。ディレクティブ、およびそれを行うと、モジュール宣言に空の配列がないため、ディレクティブは先ほど示したようなものになるため、インテリジェンスは機能しません。マイクロソフトがユーザーに提供する例では機能しません...最初のファイルであるモジュール作成でのみ機能し、今後は機能しません。

enter image description here

3
Lombas

同じ問題がありました。角度を追加すると、VS 2015（RTM）が_references.jsを変更しました。基本的に、ファイル内の私の行の一部を削除しました。以下のように_references.jsにangulaの参照を追加したとき

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

VS 2015でAngular 1.4.3のインテリセンスを入手しました！

1
Deep

私はこの問題をRTM ..apart from angular object and hello world complex senario（$ httpおよびすべてのカスタムオブジェクトが動作しない）..私の唯一の疑いは、RCからRTM（新規インストールなし）にアップグレードしたため、Gitで問題が発生した[link] github.com/jmbledsoe/angularjs-visualstudio-intellisense/issues /…..VHD Win 10イメージを取得し、d/lが終了したらそれを試してみる:( –

my _reference file with angular added sitting in wwwroot

error with missing intellisense for $http and any other of my custom objects

[〜＃〜] update [〜＃〜]

ここで少し助けを借りると、答えは...です。Intellisenseエンジンは、スクリプトブロックのapp.htmlファイルに作成されているため、「sportsStore」という名前のモジュールが作成されていることを確認できません。

<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

0
HoopSnake

この問題がありました。

Visual Studio IDEは、HTMLファイルで参照されているjsファイルをスキャンし、必要に応じて使用します（インテリセンスなど）。

私の問題は、CDN/http：//アドレスを使用してAngularjsを参照していたため、Visual Studioには角度に関する情報がありませんでした。

Anglejs jsファイルを直接ダウンロードして、プロジェクトに含めてindex.htmlに参照し、再構築して（念のため）、もう一度試してみてください、うまくいけばうまくいきます。

お役に立てば幸いです。

0
Imran

この記事に従って、より包括的なインテリセンスを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フォルダーに配置します

0
WarrenDodsworth

プロジェクトのルートにある 'Scripts'（命名規則）という名前のフォルダーに_references.jsファイルを作成するだけです。必要なjavascriptファイルで更新すると、インテリセンスを取得できるはずです。ここに、そのようなことが必要な理由に関するリンクがあります： http://madskristensen.net/post/the-story-behind-_referencesjs

0
Newbie

私にとっては上記の仕事のどれでもない。 Mine is Visual Studio 2017-Professional

しかし、私はここで自分のソリューションを使用してそれを動作させました->

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

_reference.js at the same dir as your .js files

上記のすべてを完了すると、angular intellisenseが表示されるはずです。

JQuery、Anytime、_underscoreなど、他のインテリセンスでも同じことができます。パスステートメントを_reference.jsファイルに追加し続けるだけでなく、同じ_reference.jsファイルを他のWebサイトにコピーすることもできます。 dir構造体。幸運を！

0
Jenna Leaf