vscodeのjs intellisenseからjqueryを除外する

なぜそんなことを

vscodeが(適切な設定になっていれば)@typesパッケージを自動的に取得してjsに補完を効かせてくれることは有名だと思うが、その際にハマったポイント。

Webdriver.ioを利用したコードをvscodeで書いていたのだが、"$"という名前を打つとWebdriver.ioの"$"ではなくjqueryの"$"が勝手にintellisenseされてしまった。

---

↓この"$"はjqueryのものなので使わないでほしい

↓ちなみに"$$"などは正しくWebdriver.ioのものをとってきている

解決策

vscodeのtype intellisense除外設定はjavascriptの場合jsconfig.jsonに書く。

{
  "compilerOptions": {
    "target": "es6",
    "baseUrl": "./src"
  },
  "exclude": ["node_modules"],
  "typeAcquisition": {
    "exclude": [/*ここに除外するものを書く*/],
  }
}

ただ、このexcludeにjqueryと書いたらいけるかというとそうはならない。

なぜなら、正確には@types/jqueryが指定されてインストールされているわけではなく、他の@typesパッケージが依存関係に@types/jqueryを指定しているため結果的に入ってしまっているから。(ややこしい)

では具体的にどのパッケージを除外すればいいかというと、それを確認するためにまず"@types/jquery"がどこにあるかを確認する必要がある。

確認の仕方は"$"を選択して右クリック→Go to Type Definition→ファイル名が書いてあるタブにマウスをhover。

筆者の場合は
C:\Users\{name}\AppData\Local\Microsoft\TypeScript\3.3
の下のnode_modulesにあった。

上記の場合
[略]\TypeScript\3.3
に行くとおなじみのpackage.jsonがあるので、そこで以下のコマンドを打つ。(npm必須)

C:\Users\{user}\AppData\Local\Microsoft\TypeScript\3.3> npm ls @types/jquery
C:\Users\{user}\AppData\Local\Microsoft\TypeScript\3.3
+-- @types/urijs@1.15.38
| `-- @types/jquery@3.3.29
`-- @types/velocity-animate@1.2.33
  `-- @types/jquery@3.3.29  deduped

この例でいうと@types/urijsと@types/velocity-animateが@types/jqueryを必要としているので結果的に@types/jqueryが入ってしまっているということがわかる。

そのためjsconfig.jsonには以下のように指定すれば良い。

{
  "compilerOptions": {
    "target": "es6",
    "baseUrl": "./src"
  },
  "exclude": ["node_modules"],
  "typeAcquisition": {
    "exclude": ["urijs", "velocity-animate"]
  }
}

その後vscodeを再起動する。

結果

うまいこと補完されるようになった。