質問編集履歴

6

解決しました

2019/03/25 05:15

投稿

ZZ-TOP
ZZ-TOP

スコア36

test CHANGED
@@ -1 +1 @@
1
- VS Codeでjquery.d.ts設定する時にreferenceディレクティブの設定がわからな
1
+ VS Codeでjqueryのインテリセンス使たい ← 解決済み
test CHANGED
@@ -1,181 +1,293 @@
1
- Visual Studio Code使っています。
2
-
3
-
4
-
5
- jQueryを勉強するようになたので
6
-
7
- jQueryのインテリセンスを使たいと思っいます。
8
-
9
-
10
-
11
- ネットで自分なりに探してみたところ
12
-
13
- 以下の記事あり参考に設定してみました。
14
-
15
-
16
-
17
- 記事が古いこともあり記事内のダウンロード先がリンク切れだったり
18
-
19
- 私の知識不足もあり、最後にjquery.d.tsを設定る時に
20
-
21
- ~~新規ァイルを
22
-
23
- 作成するだけなのですが、それが出来ません。~~
24
-
25
-
26
-
27
- 最後にreferenceディレクティブという設定があるのですが、
28
-
29
- の設定だけがわかりません
30
-
31
-
32
-
33
- ですが自分なりに調べて以下のところまでやってみました。
34
-
35
-
36
-
37
- この続きの操作のでjquery.d.tsを設定してもOKですし、
38
-
39
- jQueryのインリセンが使えれば他プラグンでも
40
-
41
- 構わないと思っています。どちらでもOKです。
42
-
43
-
44
-
45
- Visual Studio CodeでjQueryのインテリセンスを利用するための
46
-
47
- 設定方法を教えてさい
48
-
49
-
50
-
51
- ---
52
-
53
- ここまでやってみました。
54
-
55
-
56
-
57
- 【参考記事】
58
-
59
- Visual Studio CodeでjQueryのコードを書いてみる。
60
-
61
- https://www.ka-net.org/blog/?p=5572
1
+ Visual Studio Code使っています。
2
+
3
+
4
+
5
+ jQueryのインテリセンス使いたいと思ており
6
+
7
+ jquery.d.ts」設定方法について
8
+
9
+ こちらで質問させて頂きました。
10
+
11
+
12
+
13
+ です自己解決たので全文を書き直し
14
+
15
+ 質問を閉じておきます。
16
+
17
+
18
+
19
+ ・閲覧して頂いた方、ありがとうございま
20
+
21
+ ・お世話になっているォロワーのみなさんありがとうございます。
22
+
23
+
24
+
25
+ ---
26
+
27
+
28
+
29
+ Visual Studio CodeでjQueryインテリセンスを使えるようにするための作業~設定。
30
+
31
+
32
+
33
+
34
+
35
+ 1)「JQuery.d.ts」をダウンロードする
36
+
37
+
38
+
39
+ 2)ダウンロードした「JQuery.d.ts」をテスト用ファルと同じフォルダーに入れる。
40
+
41
+
42
+
43
+ 3)テスト用のファイルに「JQuery.d.ts」を呼び出すためのパスを直接記載する。
44
+
45
+
46
+
47
+ 詳細は以の通りです
48
+
49
+
50
+
51
+ 実際の作業
52
+
53
+ ---
54
+
55
+
56
+
57
+ **1)「JQuery.d.ts」をダウンロードする**
58
+
59
+
60
+
61
+ DefinitelyTyped
62
+
63
+ [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)
64
+
65
+ https://github.com/DefinitelyTyped/DefinitelyTyped
66
+
67
+
68
+
69
+ から「clone or download」で全部ダウンロードする
70
+
71
+ ![イメージ説明](c6790b857047de9d4b3e3a3fb10b7e5c.jpeg)
72
+
73
+
74
+
75
+ ※必要なファイル(インテリセンス用)は「JQuery.d.ts」だけですが、
76
+
77
+ ディレクトリが深いのでダウンロードページで「JQuery.d.ts」の場所がわかりません。
78
+
79
+
80
+
81
+ ここでは全部ダウンロードしてダウンロードしてから
82
+
83
+ 「JQuery.d.ts」を見つけています。
84
+
85
+ ※展開すると200MB前後あります。非常に大きなフォルダー(ライブラリ)です。
86
+
87
+
88
+
89
+ ---
90
+
91
+
92
+
93
+ **2)ダウンロードした「JQuery.d.ts」をテスト用のファイルと同じフォルダーに入れる。**
94
+
95
+
96
+
97
+ ・ダウンロードしたファイルのファイル名は「DefinitelyTyped-master.zip」になっている。
98
+
99
+ ※「DefinitelyTyped-master.zip」はZIPファイルなので任意の場所で展開する。
100
+
101
+ ※画像ではCドライブ上に「DefinitelyTyped-master」を作成しています。
102
+
103
+
104
+
105
+ **展開すると「DefinitelyTyped-master>types>jquery>JQuery.d.ts」
106
+
107
+ の中に「JQuery.d.ts」がある。**
108
+
109
+
110
+
111
+ ![イメージ説明](cdc918063a92117871f8531d39bab679.jpeg)
112
+
113
+
114
+
115
+ ※必要なのは**「JQuery.d.ts」だけなので、「JQuery.d.ts」をコピーして、
116
+
117
+ テスト用のファイルと同じフォルダーに入れる。**
118
+
119
+
120
+
121
+ ![![イメージ説明](c72a32fbcec55667de58a4260e82befa.jpeg)
122
+
123
+
124
+
125
+ ※同じフォルダーの中にあれば良いいです。
126
+
127
+ ※画像ではテスト用のファイルは「test-01.html」です。
128
+
129
+
130
+
131
+ ---
132
+
133
+
134
+
135
+ **3)テスト用のファイルに「jquery.d.ts」を呼び出すためのパスを直接記載する。**
136
+
137
+
138
+
139
+
140
+
141
+ ・「test-01.html」を開いてヘッダー部分に
142
+
143
+ **<reference path="JQuery.d.ts">**を記載する
144
+
145
+
146
+
147
+ **※相対パスを通しているだけです。**
148
+
149
+ ・今回は同じフォルダーにあるのでパスの値が「"JQuery.d.ts"」になっています。
150
+
151
+
152
+
153
+ ![イメージ説明](df9d301035c7f9c7cb8b2d167f9aaed2.jpeg)
154
+
155
+
156
+
157
+ ※**Visual Studio Codeでは**エラーが出てしまうので「///~/」を入力してエラーを打ち消す
158
+
159
+ ※「<reference path="JQuery.d.ts"/>」か
160
+
161
+  「///<reference path="JQuery.d.ts"/>」に書き換える
162
+
163
+ ※**</head>のエラーが消える**
164
+
165
+
166
+
167
+ ![イメージ説明](6dc0de24ef951e158fe4acf9bcd2ae81.jpeg)
168
+
169
+
170
+
171
+ ※**【参考】他のエディタでは「///~/」は必要ない**。
172
+
173
+ ※以下の画像はSublime Text3だが「///~/」なしでもエラーは出ない。
174
+
175
+
176
+
177
+ ![イメージ説明](366a8d871480c14784d59e9e27995688.jpeg)
178
+
179
+
180
+
181
+ ---
182
+
183
+
184
+
185
+ 動作確認
186
+
187
+ ※こちらの画面では「<reference path="JQuery.d.ts"/>」になっていますが動作しています。
188
+
189
+
190
+
191
+ ![イメージ説明](7455667d32c94d3dcc81744510cda39a.jpeg)
192
+
193
+
194
+
195
+ 動作環境
196
+
197
+ Visual Studio Codeのバージョンは
198
+
199
+ バージョン: 1.32.3
200
+
201
+ OSはWindows7(64bit)です。
202
+
203
+
204
+
205
+ ---
206
+
207
+
208
+
209
+ 最後に~参考情報
210
+
211
+
212
+
213
+ ※今回は動作チェックだけなので同じフォルダに「JQuery.d.ts」を入れています。
214
+
215
+
216
+
217
+ 毎回「JQuery.d.ts」をコピーするのは、面倒なので
218
+
219
+ 動作確認後は任意のフォルダーに「JQuery.d.ts」を移動して
220
+
221
+ 「<reference path="~/JQuery.d.ts"/>」のパスの方を書き換えて下さい。
222
+
223
+ ・スニペットに登録する、etc.
224
+
225
+
226
+
227
+ ※他のエディタでは「///~/」は不要です。
228
+
229
+ Visual Studio Codeでもコードには問題ありません。
230
+
231
+ VS Codeのデバッガーに引っかかるので「///~/」で打ち消しているだけです。
232
+
233
+
234
+
235
+ ※間違えて「//」コメントオフにならないように注意して下さい。
236
+
237
+
238
+
239
+ ※ネット上の記事(特にブログ記事)を参考にする時は特殊文字を
240
+
241
+ 全角文字で表記しているページがたくさんあります。気を付けて下さい。
242
+
243
+
244
+
245
+ 例)
246
+
247
+ 「<reference path="~/JQuery.d.ts"/>」
248
+
249
+
250
+
251
+ 「<reference path=”~/JQuery.d.ts”/>」
252
+
253
+
254
+
255
+ ※下は「"」半角ダブルクォテーションが全角ダブルクォテーション「”」になっています。
256
+
257
+ そのままコピー&ペーストして使うとエラーになるのでコピー&ペーストできません。
258
+
259
+ ・上は出来ます。
260
+
261
+
262
+
263
+ こちらのページでは全部半角表示されていると思いますが
264
+
265
+ 一応、コード上で貼りつけておきます。
266
+
267
+ ※全部コピー&ペーストして使えます。
268
+
269
+
270
+
271
+ ```JavaScript
272
+
273
+ <reference path="JQuery.d.ts">
274
+
275
+ <reference path="JQuery.d.ts"/>
276
+
277
+ //<reference path="JQuery.d.ts"/>
278
+
279
+ ```
280
+
281
+
282
+
283
+ こんな感じです。以下は参考情報です。
284
+
285
+
286
+
287
+ 参照サイト
288
+
289
+ [Visual Studio の JavaScript インテリセンス (Intellisense)](https://netweblog.wordpress.com/2013/07/04/visual-studio-javascript-intellisense/)
290
+
291
+
62
292
 
63
293
  [Visual Studio CodeでjQueryのコードを書いてみる。](https://www.ka-net.org/blog/?p=5572)
64
-
65
-
66
-
67
- こちらで操作で来たのは以下のところまでです。
68
-
69
-
70
-
71
- 1.ソースファイルを入れる適当なフォルダ(ここでは sample フォルダ)を作成します。
72
-
73
-
74
-
75
- 2.「DefinitelyTyped」からjQuery用の型定義ファイル「jquery.d.ts」をダウンロードし、
76
-
77
- 1.で作成したフォルダ内に保存(ここでは sample -> typings -> jquery -> jquery.d.ts)します。
78
-
79
-
80
-
81
- 「DefinitelyTyped」
82
-
83
- [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)
84
-
85
- https://github.com/DefinitelyTyped/DefinitelyTyped
86
-
87
-
88
-
89
- の「clone or download」からダウンロード
90
-
91
- ※とりあえずダウンロードフォルダーにダウンロードしました。
92
-
93
-
94
-
95
- ダウンロド後はCドライブに「DefinitelyTyped-master」とフォルダーを作成し
96
-
97
- こちらで展開しました。
98
-
99
-
100
-
101
- 「jQuery用の型定義ファイル「jquery.d.ts」をダウンロードし」
102
-
103
- というところがわかりませんでした。
104
-
105
-
106
-
107
- ですが先にダウンロードした。
108
-
109
- 「DefinitelyTyped-master」の中に「jquery.d.ts」
110
-
111
- があったので続きの操作を以下の通り行いました。
112
-
113
-
114
-
115
- 場所は
116
-
117
- 「DefinitelyTyped-master>types>jquery>JQuery.d.ts」
118
-
119
- でした。
120
-
121
-
122
-
123
- 3.Visual Studio Codeを起動し、「Open Folder」から、1.で作成したフォルダを開きます。
124
-
125
-
126
-
127
-
128
-
129
- 4.フォルダ名の横にある「New File」ボタンをクリックして、新規ファイルを作成します。
130
-
131
-
132
-
133
- まで同様に操作できました。画像の通りです。
134
-
135
- ![イメージ説明](a2d2bf5b55f45399d21a85ae6f1e6682.jpeg)
136
-
137
-
138
-
139
- ~~わからないのはここからで、「新規ファイル」をクリックすると「システムエラーが発生しました」。
140
-
141
- というメッセージが表示されて、新規ファイルの作成ができません。
142
-
143
- ~~
144
-
145
- ↑ 新規ファイルは出来るようになりました。
146
-
147
-
148
-
149
- ですが最後の5番の操作が何を意味しているのかわかりません。
150
-
151
- ※ページ上での記載は以下の通りです。
152
-
153
-
154
-
155
- 5.referenceディレクティブ(/// <reference path=”…” />)を使って、2.で保存した「jquery.d.ts」ファイルを参照すると、jQueryのコードでもインテリセンスが効くようになります。
156
-
157
-
158
-
159
- ↑ この説明の「referenceディレクティブ」が画面上のどこにあって、
160
-
161
- どういう操作をするのか理解できません。
162
-
163
-
164
-
165
- こんな感じです。
166
-
167
-
168
-
169
- すいませんが、Visual Studio Codeに詳しい方、説明の上手な方、
170
-
171
- Visual Studio CodedでjQueryのインテリセンスを利用するための設定方法を教えて下さい。
172
-
173
- よろしくお願いします。
174
-
175
-
176
-
177
- Visual Studio Codeのバージョンは
178
-
179
- バージョン: 1.32.3
180
-
181
- OSはWindows7(64bit)です。

5

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

2019/03/25 05:14

投稿

ZZ-TOP
ZZ-TOP

スコア36

test CHANGED
File without changes
test CHANGED
@@ -16,9 +16,17 @@
16
16
 
17
17
  記事が古いこともあり記事内のダウンロード先がリンク切れだったり
18
18
 
19
- 私の知識不足もあり、最後にjquery.d.tsを設定する時に新規ファイルを
19
+ 私の知識不足もあり、最後にjquery.d.tsを設定する時に
20
20
 
21
+ ~~新規ファイルを
22
+
21
- 作成するだけなのですが、それが出来ません。
23
+ 作成するだけなのですが、それが出来ません。~~
24
+
25
+
26
+
27
+ 最後にreferenceディレクティブという設定があるのですが、
28
+
29
+ この設定だけがわかりません。
22
30
 
23
31
 
24
32
 

4

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

2019/03/24 01:40

投稿

ZZ-TOP
ZZ-TOP

スコア36

test CHANGED
@@ -1 +1 @@
1
- VS Codeでjquery.d.tsを設定する時に新規ファイル作成できない
1
+ VS Codeでjquery.d.tsを設定する時にreferenceディレクティブの設定わからない
test CHANGED
@@ -128,19 +128,29 @@
128
128
 
129
129
 
130
130
 
131
- わからないのはここからで、「新規ファイル」をクリックすると「システムエラーが発生しました」。
131
+ ~~わからないのはここからで、「新規ファイル」をクリックすると「システムエラーが発生しました」。
132
132
 
133
133
  というメッセージが表示されて、新規ファイルの作成ができません。
134
134
 
135
+ ~~
136
+
137
+ ↑ 新規ファイルは出来るようになりました。
135
138
 
136
139
 
140
+
137
- それと最後の5番の操作が何を意味しているのかわかりません。
141
+ ですが最後の5番の操作が何を意味しているのかわかりません。
138
142
 
139
143
  ※ページ上での記載は以下の通りです。
140
144
 
141
145
 
142
146
 
143
147
  5.referenceディレクティブ(/// <reference path=”…” />)を使って、2.で保存した「jquery.d.ts」ファイルを参照すると、jQueryのコードでもインテリセンスが効くようになります。
148
+
149
+
150
+
151
+ ↑ この説明の「referenceディレクティブ」が画面上のどこにあって、
152
+
153
+ どういう操作をするのか理解できません。
144
154
 
145
155
 
146
156
 
@@ -156,4 +166,8 @@
156
166
 
157
167
 
158
168
 
169
+ Visual Studio Codeのバージョンは
170
+
171
+ バージョン: 1.32.3
172
+
159
173
  OSはWindows7(64bit)です。

3

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

2019/03/23 17:43

投稿

ZZ-TOP
ZZ-TOP

スコア36

test CHANGED
@@ -1 +1 @@
1
- Visual Studio CodedでjQueryンテリセンスを使たい
1
+ VS Codeでjquery.d.tsを設定する時に新規ファルが作成できな
test CHANGED
@@ -4,15 +4,21 @@
4
4
 
5
5
  jQueryを勉強するようになったので、
6
6
 
7
- Queryのインテリセンスを使いたいと思っています。
7
+ jQueryのインテリセンスを使いたいと思っています。
8
8
 
9
9
 
10
10
 
11
- ネットで自分なりに探してみたのですが
11
+ ネットで自分なりに探してみたところ
12
12
 
13
- 参考になっ記事がリンク切れだったり
13
+ 以下の記事があり参考に設定してみまし
14
14
 
15
+
16
+
17
+ 記事が古いこともあり記事内のダウンロード先がリンク切れだったり
18
+
19
+ 私の知識不足もあり、最後にjquery.d.tsを設定する時に新規ファイルを
20
+
15
- 知識不足よくわかりません。
21
+ 作成するだけなのですが、それが出来ません。
16
22
 
17
23
 
18
24
 
@@ -20,11 +26,17 @@
20
26
 
21
27
 
22
28
 
23
- この続きの操作でもOKですし、他の方法でも使えるようになればOKです。
29
+ この続きの操作jquery.d.tsを設定してもOKですし、
30
+
31
+ jQueryのインテリセンスが使えれば他のプラグインでも
32
+
33
+ 構わないと思っています。どちらでもOKです。
34
+
35
+
24
36
 
25
37
  Visual Studio CodeでjQueryのインテリセンスを利用するための
26
38
 
27
- プラグインの設定方法を教えて下さい。
39
+ 設定方法を教えて下さい。
28
40
 
29
41
 
30
42
 
@@ -128,11 +140,15 @@
128
140
 
129
141
 
130
142
 
131
- こういう症状です。
143
+ 5.referenceディレクティブ(/// <reference path=”…” />)を使って、2.保存した「jquery.d.ts」ファイルを参照ると、jQueryのコードでもインテリセンスが効くようになります
132
144
 
133
145
 
134
146
 
147
+ こんな感じです。
148
+
149
+
150
+
135
- すいませんが、Visual Studio Codedに詳しい方、説明の上手な方、
151
+ すいませんが、Visual Studio Codeに詳しい方、説明の上手な方、
136
152
 
137
153
  Visual Studio CodedでjQueryのインテリセンスを利用するための設定方法を教えて下さい。
138
154
 
@@ -141,7 +157,3 @@
141
157
 
142
158
 
143
159
  OSはWindows7(64bit)です。
144
-
145
-
146
-
147
- 5.referenceディレクティブ(/// <reference path=”…” />)を使って、2.で保存した「jquery.d.ts」ファイルを参照すると、jQueryのコードでもインテリセンスが効くようになります。

2

OSを追加しました

2019/03/23 14:52

投稿

ZZ-TOP
ZZ-TOP

スコア36

test CHANGED
File without changes
test CHANGED
@@ -140,4 +140,8 @@
140
140
 
141
141
 
142
142
 
143
+ OSはWindows7(64bit)です。
144
+
145
+
146
+
143
147
  5.referenceディレクティブ(/// <reference path=”…” />)を使って、2.で保存した「jquery.d.ts」ファイルを参照すると、jQueryのコードでもインテリセンスが効くようになります。

1

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

2019/03/22 18:13

投稿

ZZ-TOP
ZZ-TOP

スコア36

test CHANGED
File without changes
test CHANGED
File without changes