teratail
回答率
85.30%
質問するログイン新規登録
トップに関する質問VS Codeでjqueryのインテリセンスを使いたい ← 解決済み

編集履歴

質問編集履歴

6

解決しました

2019/03/25 05:15

投稿

ZZ-TOP
ZZ-TOP

スコア36

title CHANGED
@@ -1,1 +1,1 @@
1
- VS Codeでjquery.d.tsを設定する時にreferenceディレクティブの設定がわからない
1
+ VS Codeでjqueryのインテリセンスを使いたい ← 解決済み
body CHANGED
@@ -1,91 +1,147 @@
1
- Visual Studio Codeを使っています。
1
+ Visual Studio Codeで使っています。
2
2
 
3
- jQueryを勉強するようになったので、
4
- jQueryのインテリセンスを使いたいと思っています。
3
+ jQueryのインテリセンスを使いたいと思っており、
4
+ 「jquery.d.ts」の設定方法について
5
+ こちらで質問させて頂きました。
5
6
 
6
- ネットで自分なりに探してみたところ
7
- 以下の記事があり参考に設定してみました。
7
+ ですが自己解決したので全文を書き直して、
8
+ 質問を閉じておきます。
8
9
 
9
- 記事が古いこともあり記事内のダウンロード先がリンク切れだったり
10
- 私の知識不足もあり、最後にjquery.d.tsを設定する時に
11
- ~~新規ファイルを
12
- 作成するだけなのですが、それが出来ません。~~
10
+ ・閲覧して頂いた方、ありがとうございます。
11
+ ・お世話になっているフォロワーのみなさんありがとうございます。
13
12
 
14
- 最後にreferenceディレクティブという設定があるのですが、
15
- この設定だけがわかりません。
13
+ ---
16
14
 
17
- ですが自分なりに調べて以下のところまでやってみました。
15
+ Visual Studio CodeでjQueryのインテリセンスを使えるようにするための作業～設定。
18
16
 
19
- この続きの操作のでjquery.d.tsを設定してもOKですし、
20
- jQueryのインテリセンスが使えれば他のプラグインでも
21
- 構わないと思っています。どちらでもOKです。
22
17
 
23
- Visual Studio CodeでjQueryのインテリセンスを利用するための
18
+ 1)「JQuery.d.ts」をダウンロードする
24
- 設定方法を教えて下さい。
25
19
 
20
+ 2)ダウンロードした「JQuery.d.ts」をテスト用のファイルと同じフォルダーに入れる。
21
+
22
+ 3)テスト用のファイルに「JQuery.d.ts」を呼び出すためのパスを直接記載する。
23
+
24
+ 詳細は以下の通りです。
25
+
26
+ 実際の作業
26
27
  ---
27
- ここまでやってみました。
28
28
 
29
- 【参考記事】
30
- Visual Studio CodeでjQueryのコードを書いてみる。
29
+ **1)「JQuery.d.ts」をダウンロードする**
31
- https://www.ka-net.org/blog/?p=5572
32
- [Visual Studio CodeでjQueryのコードを書いてみる。](https://www.ka-net.org/blog/?p=5572)
33
30
 
34
- こちらで操作で来たのは以下のところまでです。
31
+ DefinitelyTyped
32
+ [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)
33
+ https://github.com/DefinitelyTyped/DefinitelyTyped
35
34
 
35
+ から「clone or download」で全部ダウンロードする
36
- 1.ソースファイルを入れる適当なフォルダ(ここでは sample フォルダ)を作成します。
36
+ ![イメージ説明](c6790b857047de9d4b3e3a3fb10b7e5c.jpeg)
37
37
 
38
- 2.「DefinitelyTyped」からjQuery用の型定義ファイル「jquery.d.ts」をダウンロードし、
38
+ ※必要なファイル(インテリセンス用)は「JQuery.d.ts」だけですが、
39
- 1.で作成したフォルダ内に保存(ここでは sample -> typings -> jquery -> jquery.d.ts)します。
39
+ ディレクトリが深いのでダウンロードページで「JQuery.d.ts」の場所がわかりません。
40
40
  ↓
41
+ ここでは全部ダウンロードしてダウンロードしてから
41
- 「DefinitelyTyped」
42
+ 「JQuery.d.ts」を見つけています。
42
- [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)
43
- https://github.com/DefinitelyTyped/DefinitelyTyped
43
+ ※展開すると200MB前後あります。非常に大きなフォルダー(ライブラリ)です。
44
44
 
45
- の「clone or download」からダウンロード
45
+ ---
46
- ※とりあえずダウンロードフォルダーにダウンロードしました。
47
46
 
48
- ダウンロド後はCドライブに「DefinitelyTyped-master」とフォルダーを作成し
47
+ **2)ダウンロードした「JQuery.d.ts」をテスト用のファイルと同じフォルダーに入れる。**
49
- こちらで展開しました。
50
48
 
49
+ ・ダウンロードしたファイルのファイル名は「DefinitelyTyped-master.zip」になっている。
50
+ ※「DefinitelyTyped-master.zip」はZIPファイルなので任意の場所で展開する。
51
- 「jQuery用の型定義ファイル「jquery.d.ts」をダウンロードし」
51
+ ※画像ではCドライブ上に「DefinitelyTyped-master」を作成しています。
52
- というところがわかりませんでした。
53
52
 
54
- ですが先にダウンロードした。
55
- 「DefinitelyTyped-master」の中に「jquery.d.ts」
53
+ **展開すると「DefinitelyTyped-master>types>jquery>JQuery.d.ts」
56
- があったので続きの操作を以下の通り行いました。
54
+ の中に「JQuery.d.ts」がある。**
57
55
 
58
- 場所は
59
- 「DefinitelyTyped-master>types>jquery>JQuery.d.ts」
56
+ ![イメージ説明](cdc918063a92117871f8531d39bab679.jpeg)
60
- でした。
61
57
 
62
- 3.Visual Studio Codeを起動し、「Open Folder」から、1.で作成したフォルダを開きます。
58
+ ※必要なのは**「JQuery.d.ts」だけなので、「JQuery.d.ts」をコピーして、
59
+ テスト用のファイルと同じフォルダーに入れる。**
63
60
 
61
+ ![![イメージ説明](c72a32fbcec55667de58a4260e82befa.jpeg)
64
62
 
65
- 4.フォルダ名の横にある「New File」ボタンをクリックして、新規ファイルを作成します。
66
- ↓
67
- まで同様に操作できました。画像の通りです。
63
+ ※同じフォルダーの中にあれば良いいです。
68
- ![イメージ説明](a2d2bf5b55f45399d21a85ae6f1e6682.jpeg)
64
+ ※画像ではテスト用のファイルは「test-01.html」です。
69
65
 
70
- ~~わからないのはここからで、「新規ファイル」をクリックすると「システムエラーが発生しました」。
71
- というメッセージが表示されて、新規ファイルの作成ができません。
72
- ~~
66
+ ---
73
- ↑　新規ファイルは出来るようになりました。
74
67
 
75
- ですが最後の5番の操作が何を意味しているのかわかりません。
68
+ **3)テスト用のファイルに「jquery.d.ts」を呼び出すためのパスを直接記載する。**
76
- ※ページ上での記載は以下の通りです。
77
69
 
78
- 5.referenceディレクティブ(/// <reference path=”…” />)を使って、2.で保存した「jquery.d.ts」ファイルを参照すると、jQueryのコードでもインテリセンスが効くようになります。
79
70
 
71
+ ・「test-01.html」を開いてヘッダー部分に
80
- ↑　この説明の「referenceディレクティブ」が画面上のどこにあって、
72
+ **<reference path="JQuery.d.ts">**を記載する
81
- どういう操作をするのか理解できません。
82
73
 
83
- こんな感じです。
74
+ **※相対パスを通しているだけです。**
75
+ ・今回は同じフォルダーにあるのでパスの値が「"JQuery.d.ts"」になっています。
84
76
 
85
- すいませんが、Visual Studio Codeに詳しい方、説明の上手な方、
86
- Visual Studio CodedでjQueryのインテリセンスを利用するための設定方法を教えて下さい。
77
+ ![イメージ説明](df9d301035c7f9c7cb8b2d167f9aaed2.jpeg)
87
- よろしくお願いします。
88
78
 
79
+ ※**Visual Studio Codeでは**エラーが出てしまうので「///～/」を入力してエラーを打ち消す
80
+ ※「<reference path="JQuery.d.ts"/>」か
81
+ 　「///<reference path="JQuery.d.ts"/>」に書き換える
82
+ ※**</head>のエラーが消える**
83
+
84
+ ![イメージ説明](6dc0de24ef951e158fe4acf9bcd2ae81.jpeg)
85
+
86
+ ※**【参考】他のエディタでは「///～/」は必要ない**。
87
+ ※以下の画像はSublime Text3だが「///～/」なしでもエラーは出ない。
88
+
89
+ ![イメージ説明](366a8d871480c14784d59e9e27995688.jpeg)
90
+
91
+ ---
92
+
93
+ 動作確認
94
+ ※こちらの画面では「<reference path="JQuery.d.ts"/>」になっていますが動作しています。
95
+
96
+ ![イメージ説明](7455667d32c94d3dcc81744510cda39a.jpeg)
97
+
98
+ 動作環境
89
99
  Visual Studio Codeのバージョンは
90
100
  バージョン: 1.32.3
91
- OSはWindows7(64bit)です。
101
+ OSはWindows7(64bit)です。
102
+
103
+ ---
104
+
105
+ 最後に～参考情報
106
+
107
+ ※今回は動作チェックだけなので同じフォルダに「JQuery.d.ts」を入れています。
108
+ ↓
109
+ 毎回「JQuery.d.ts」をコピーするのは、面倒なので
110
+ 動作確認後は任意のフォルダーに「JQuery.d.ts」を移動して
111
+ 「<reference path="～/JQuery.d.ts"/>」のパスの方を書き換えて下さい。
112
+ ・スニペットに登録する、etc.
113
+
114
+ ※他のエディタでは「///～/」は不要です。
115
+ Visual Studio Codeでもコードには問題ありません。
116
+ VS Codeのデバッガーに引っかかるので「///～/」で打ち消しているだけです。
117
+
118
+ ※間違えて「//」コメントオフにならないように注意して下さい。
119
+
120
+ ※ネット上の記事(特にブログ記事)を参考にする時は特殊文字を
121
+ 全角文字で表記しているページがたくさんあります。気を付けて下さい。
122
+
123
+ 例)
124
+ 「<reference path="～/JQuery.d.ts"/>」
125
+ ↓
126
+ 「<reference path=”～/JQuery.d.ts”/>」
127
+
128
+ ※下は「"」半角ダブルクォテーションが全角ダブルクォテーション「”」になっています。
129
+ そのままコピー＆ペーストして使うとエラーになるのでコピー＆ペーストできません。
130
+ ・上は出来ます。
131
+
132
+ こちらのページでは全部半角表示されていると思いますが
133
+ 一応、コード上で貼りつけておきます。
134
+ ※全部コピー＆ペーストして使えます。
135
+
136
+ ```JavaScript
137
+ <reference path="JQuery.d.ts">
138
+ <reference path="JQuery.d.ts"/>
139
+ //<reference path="JQuery.d.ts"/>
140
+ ```
141
+
142
+ こんな感じです。以下は参考情報です。
143
+
144
+ 参照サイト
145
+ [Visual Studio の JavaScript インテリセンス (Intellisense)](https://netweblog.wordpress.com/2013/07/04/visual-studio-javascript-intellisense/)
146
+
147
+ [Visual Studio CodeでjQueryのコードを書いてみる。](https://www.ka-net.org/blog/?p=5572)

5

新規ファイルについての記述の修正

2019/03/25 05:14

投稿

ZZ-TOP
ZZ-TOP

スコア36

title CHANGED
File without changes
body CHANGED
@@ -7,9 +7,13 @@
7
7
  以下の記事があり参考に設定してみました。
8
8
 
9
9
  記事が古いこともあり記事内のダウンロード先がリンク切れだったり
10
- 私の知識不足もあり、最後にjquery.d.tsを設定する時に新規ファイルを
10
+ 私の知識不足もあり、最後にjquery.d.tsを設定する時に
11
+ ~~新規ファイルを
11
- 作成するだけなのですが、それが出来ません。
12
+ 作成するだけなのですが、それが出来ません。~~
12
13
 
14
+ 最後にreferenceディレクティブという設定があるのですが、
15
+ この設定だけがわかりません。
16
+
13
17
  ですが自分なりに調べて以下のところまでやってみました。
14
18
 
15
19
  この続きの操作のでjquery.d.tsを設定してもOKですし、

4

新規ファイルが作成できるようになりました

2019/03/24 01:40

投稿

ZZ-TOP
ZZ-TOP

スコア36

title CHANGED
@@ -1,1 +1,1 @@
1
- VS Codeでjquery.d.tsを設定する時に新規ファイルが作成できない
1
+ VS Codeでjquery.d.tsを設定する時にreferenceディレクティブの設定がわからない
body CHANGED
@@ -63,18 +63,25 @@
63
63
  まで同様に操作できました。画像の通りです。
64
64
  ![イメージ説明](a2d2bf5b55f45399d21a85ae6f1e6682.jpeg)
65
65
 
66
- わからないのはここからで、「新規ファイル」をクリックすると「システムエラーが発生しました」。
66
+ ~~わからないのはここからで、「新規ファイル」をクリックすると「システムエラーが発生しました」。
67
67
  というメッセージが表示されて、新規ファイルの作成ができません。
68
+ ~~
69
+ ↑　新規ファイルは出来るようになりました。
68
70
 
69
- それと最後の5番の操作が何を意味しているのかわかりません。
71
+ ですが最後の5番の操作が何を意味しているのかわかりません。
70
72
  ※ページ上での記載は以下の通りです。
71
73
 
72
74
  5.referenceディレクティブ(/// <reference path=”…” />)を使って、2.で保存した「jquery.d.ts」ファイルを参照すると、jQueryのコードでもインテリセンスが効くようになります。
73
75
 
76
+ ↑　この説明の「referenceディレクティブ」が画面上のどこにあって、
77
+ どういう操作をするのか理解できません。
78
+
74
79
  こんな感じです。
75
80
 
76
81
  すいませんが、Visual Studio Codeに詳しい方、説明の上手な方、
77
82
  Visual Studio CodedでjQueryのインテリセンスを利用するための設定方法を教えて下さい。
78
83
  よろしくお願いします。
79
84
 
85
+ Visual Studio Codeのバージョンは
86
+ バージョン: 1.32.3
80
87
  OSはWindows7(64bit)です。

3

jquery.d.tsを設定するところまでOK

2019/03/23 17:43

投稿

ZZ-TOP
ZZ-TOP

スコア36

title CHANGED
@@ -1,1 +1,1 @@
1
- Visual Studio CodedでjQueryのインテリセンスを使いたい
1
+ VS Codeでjquery.d.tsを設定する時に新規ファイルが作成できない
body CHANGED
@@ -1,17 +1,23 @@
1
1
  Visual Studio Codeを使っています。
2
2
 
3
3
  jQueryを勉強するようになったので、
4
- Queryのインテリセンスを使いたいと思っています。
4
+ jQueryのインテリセンスを使いたいと思っています。
5
5
 
6
- ネットで自分なりに探してみたのですが
6
+ ネットで自分なりに探してみたところ
7
- 参考になった記事がリンク切れだったり
8
- 私の知識不足でよくわかりません。
7
+ 以下の記事があり参考に設定してみました。
9
8
 
9
+ 記事が古いこともあり記事内のダウンロード先がリンク切れだったり
10
+ 私の知識不足もあり、最後にjquery.d.tsを設定する時に新規ファイルを
11
+ 作成するだけなのですが、それが出来ません。
12
+
10
13
  ですが自分なりに調べて以下のところまでやってみました。
11
14
 
12
- この続きの操作でもOKですし、他の方法でも使えるようになればOKです。
15
+ この続きの操作のでjquery.d.tsを設定してもOKですし、
16
+ jQueryのインテリセンスが使えれば他のプラグインでも
17
+ 構わないと思っています。どちらでもOKです。
18
+
13
19
  Visual Studio CodeでjQueryのインテリセンスを利用するための
14
- プラグインの設定方法を教えて下さい。
20
+ 設定方法を教えて下さい。
15
21
 
16
22
  ---
17
23
  ここまでやってみました。
@@ -63,12 +69,12 @@
63
69
  それと最後の5番の操作が何を意味しているのかわかりません。
64
70
  ※ページ上での記載は以下の通りです。
65
71
 
66
- こういう症状です。
72
+ 5.referenceディレクティブ(/// <reference path=”…” />)を使って、2.で保存した「jquery.d.ts」ファイルを参照すると、jQueryのコードでもインテリセンスが効くようになります。
67
73
 
74
+ こんな感じです。
75
+
68
- すいませんが、Visual Studio Codedに詳しい方、説明の上手な方、
76
+ すいませんが、Visual Studio Codeに詳しい方、説明の上手な方、
69
77
  Visual Studio CodedでjQueryのインテリセンスを利用するための設定方法を教えて下さい。
70
78
  よろしくお願いします。
71
79
 
72
- OSはWindows7(64bit)です。
80
+ OSはWindows7(64bit)です。
73
-
74
- 5.referenceディレクティブ(/// <reference path=”…” />)を使って、2.で保存した「jquery.d.ts」ファイルを参照すると、jQueryのコードでもインテリセンスが効くようになります。

2

OSを追加しました

2019/03/23 14:52

投稿

ZZ-TOP
ZZ-TOP

スコア36

title CHANGED
File without changes
body CHANGED
@@ -69,4 +69,6 @@
69
69
  Visual Studio CodedでjQueryのインテリセンスを利用するための設定方法を教えて下さい。
70
70
  よろしくお願いします。
71
71
 
72
+ OSはWindows7(64bit)です。
73
+
72
74
  5.referenceディレクティブ(/// <reference path=”…” />)を使って、2.で保存した「jquery.d.ts」ファイルを参照すると、jQueryのコードでもインテリセンスが効くようになります。

1

タグにJavaScript、HTML、CSSを追加しました

2019/03/22 18:13

投稿

ZZ-TOP
ZZ-TOP

スコア36

title CHANGED
File without changes
body CHANGED
File without changes