解決方法
型情報も入れましょうtypesync
で自動的に解決!
環境
Windows10
VSCode v1.54.3
node v14.16.0
補完の候補はVSCodeの設定で大きく変わります。
確認用のファイルを作る
test.js
constmessage="hello!"message.consthttp=require('http')http.constexpress=require('express')constapp=express();app.
動作確認
それぞれメソッドのところで補完キーを押してそれぞれのメソッドが候補として出てくるかどうか?
※「.」の後ろ(カーソルをアンダーバーの所に持っていく)で補完キーを押してみる。
※expressはインストール済みとする
message._
http._
app._
発端
大変優秀なVSCodeの拡張機能
「Visual Studio IntelliCode」
これさえインストールしておけば後は全部自動で補完してくれると思っていました・・・が補完候補を出してくれない場合もあったので調べてみました。
※Visual Studio IntelliCodeはVSCodeの拡張機能からインストールできます。
実際の調査手順
pnpm インストールpnpm install -g pnpm
※pnpmは小さなプログラムやプロジェクトを何個も作る場合、2度目からはインストールが早くなるnpmの代替パッケージマネージャです。
node入門者が小さなサンプルを沢山試す時に、ライブラリがローカルに保存してあるので何度もダウンロードをせず時間短縮になります。
プロジェクトの初期化
pnpm init
package.jsonが作られる
JavaScript標準のCoreライブラリの場合
constmessage="Hello!"message.
message.のところでは補完は効いています。
問題はここから
Node.jsの標準ライブラリの場合
比較してみる
consthttp=require('http')http.
http.のところで補完が効かない
理由
nodeの型情報がないから
解決方法
型情報をインストールする
pnpm install --save-dev @types/node
http.のところで補完が効くようになった
Node.jsの外部ライブラリの場合
例
Express.jsの場合
比較してみる
ライブラリをインストールpnpm install express
constexpress=require('express')constapp=express();app.
補完が効いてない、でもexpressの型情報はどこにあるの?
それに、他のライブラリも一つ一つ探さなきゃ駄目?
補完を自動で探してくれる便利ツール
pnpm install -g typesync
typesyncをインストール
typesyncはpackage.jsonをみて足りない型情報を自動で検索してインストールしてくれます。
(特にTypeScriptと合わせて使うと便利です。)
インストールpnpm install -g typesync
使い方
VSCodeのターミナルから実行します。typesync
※package.jsonの "scripts"に登録しておくと便利です。
それぞれのライブラリの手動インストールの方法(※非推奨 一つ一つ型情報を探す手間が面倒なので)
型情報を探してきてライブラリの型定義ファイルをインストールします。npm install --save-dev @types/express
おまけ 私のVSCodeの設定
// サジェスト機能
// 下記の3つは衝突する、どちらかの機能が効かなくなる
// カーソルに近い順に候補が並び替えされます。
// "editor.suggest.localityBonus": true,
// トリガー文字の入力時に候補が自動的に表示されるようにするかどうかを制御します。
"editor.suggestOnTriggerCharacters": true,
// Suggestionsの表示ディレイ
"editor.quickSuggestionsDelay": 50,
// ドキュメント内の単語に基づいて入力候補を計算するかどうか
"editor.wordBasedSuggestions": true,
//
// "top"//他の候補の上にスニペットを優先して表示
// "none"//スニペットの候補を表示しない
// "bottom"//スニペットの候補は一番下
// "inline"//ファイル内の関数名とかが優先される。(既定値)
// editor.suggest.localityBonusと衝突、無効にする。
"editor.snippetSuggestions": "inline",
//
// first 一番上の項目が常に選択されている
// recentlyUsed 以前に使用された項目が選択されている(デフォルト)
// recentlyUsedByPrefix 以前に選択した時のプレフィクスに基づいて使用された項目が選択されている
// recentlyUsedByPrefixだとインテリセンスの候補が下に下がってしまう。
// 例えば過去にcoと打ってconsoleを選択し、
// conと打ってconstを選択したことがある場合、
// coまで打つとconsoleがデフォルト選択され、
// さらにnを打つとconstがデフォルト選択される。
"editor.suggestSelection": "first",
// サジェスト一覧の初期表示項目設定
"vsintellicode.modify.editor.suggestSelection": "choseToUpdateConfiguration",
//
// 入力中に補完候補をだすかどうか
// 以下の設定でコメントの中でもどこでも
// 補完候補を出せるようになる
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
// スニペットのタブストップ中にも入力候補を補完します。
"editor.suggest.snippetsPreventQuickSuggestions": false,