Visual StudioでJavaScript(2)jQueryでもインテリセンスを有効にする

前の関連記事：Visual StudioでJavaScript(1)JavaScriptでもインテリセンスが有効

Visual Studio Express 2013 for WebでjQueryのインテリセンスを有効にする方法が紹介されていましたのでやってみます。

インテリセンスをjQueryでも使えるようにjQueryパッケージを導入する

穀風: Visual Studio 2012 で jQuery 開発環境を構築

そもそもこのページを読んでVisual StudioでJavaScriptを使ってみようと思い立ったのでした。


ソリューションエクスプローラーのパッケージ名で右クリック→NuGetパッケージの管理。


オンライン→すべてを選択してしばらくするとjQueryライブラリがでてくるのでこれをインストールします。


ソリューションエクスプローラーでみるとプロジェクトの中にScriptsフォルダがありその中をみるとjquery-2.0.3.intellisense.jsが見えますね。

jQuery1.10.2のNuGetパッケージに入れ換える

このブログでは1.10.2を使っているのでインテリセンスのバージョンも揃えたいと思います。

まずはｊQuery2.0.3をアンインストールします。

ソリューションエクスプローラーのパッケージ名で右クリック→NuGetパッケージの管理。


「インストール済みのパッケージ」を選択するとjQueryのパッケージのところにアンイストールボタンがあるのでこれをクリックしてアンイストールします。

このNuGetパッケージ管理画面の右側にでてくるｊQueryパッケージの説明のなかの「識別:ｊQeury」のところをクリックするとNuGetギャラリーへ飛べます。


NuGet Gallery | jQuery 2.0.3

ここに飛びます。下のほうにあるVersion HistoryをみるとjQuery1.10.2のパッケージへのリンクがあります。

NuGet Gallery | jQuery 1.10.2

Package Manager Consoleからインストールせよ、と書いてあります。

Visual Studio 2013のメニューのツール→ライブラリ　パッケージマネージャー→パッケージマネージャーコンソール。

この長ったらしい名称たちは何とかならないのだろうか、、、


すると画面下にパッケージマネージャーコンソールが出現しプロンプトが現れます。


このプロンプトで「Install-Package jQuery -Version 1.10.2 」と入力してEnter。


ソリューションエクスプローラーで確認します。


ちゃんと1.10.2が入っていますね。

_references.jsファイルの設定が必要

このままではまだこのプロジェクトではjQueryのインテリセンスは動きません。


ソリューションエクスプローラーのプロジェクトのScriptsフォルダの中の_references.jsファイルにjquery-1.10.2.jsへのパスを設定しないといけません。

プロジェクトを作成時に「Empty」を選択したので_references.jsを作るところからはじめます。

Scriptsフォルダを右クリック→追加→JavaScriptファイル。


項目名を_references.jsにします。


すると_references.jsの編集画面になりますので、以下を入力して保存します。

/// <reference path="jquery-1.10.2.js" />


これで設定終了です。


入力候補だけでなく解説も表示されます。

プロジェクトごとに設定が必要なの？→テンプレートをEmpty以外にすればよい

新規プロジェクトを作成するときにテンプレートを「Empty」にすると毎回上記の設定が必要になります。


Empty以外を選択するとScriptsフォルダにjqeuryのファイルもコピーされ_references.jsも自動で設定されます。

しかし他にもたくさんファイルがくっついてきます。

参考にしたサイト

穀風: Visual Studio 2012 で jQuery 開発環境を構築
インテリセンスをjQueryで有効にする方法が紹介されています。

NuGet Gallery | jQuery 2.0.3
NuGetギャラリーのjQueryのページ。