Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 9016

VSCodeでnodeメソッドの補完が効いてない問題 (デフォルトの設定のままでは補完候補が出ない)

$
0
0

解決方法

型情報も入れましょう
typesyncで自動的に解決!

環境

Windows10
VSCode v1.54.3
node v14.16.0
補完の候補はVSCodeの設定で大きく変わります。

確認用のファイルを作る

test.js

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ライブラリの場合

Coreライブラリなので問題なく補完候補が出ています。
1-no.PNG

test01.js
constmessage="Hello!"message.

message.のところでは補完は効いています。

問題はここから

Node.jsの標準ライブラリの場合

比較してみる

補完が効いてない状態
2-no.PNG
補完が効いている状態
2-ok.PNG

test02.js
consthttp=require('http')http.

http.のところで補完が効かない

理由
nodeの型情報がないから

解決方法
型情報をインストールする

pnpm install --save-dev @types/node

http.のところで補完が効くようになった

Node.jsの外部ライブラリの場合


Express.jsの場合

比較してみる

補完が効いてない状態
3-no.PNG
補完が効いている状態
3-ok.PNG

ライブラリをインストール
pnpm install express

test03.js
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の設定

settings.json(サジェスト設定部分のみ)
  // サジェスト機能
  // 下記の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,


Viewing all articles
Browse latest Browse all 9016

Trending Articles