解決方法
型情報も入れましょう
typesyncで自動的に解決！
環境
Windows10
VSCode v1.54.3
node v14.16.0
補完の候補はVSCodeの設定で大きく変わります。
VSCode拡張機能
IntelliCode v1.2.30
Microsoft
36,366,063 (91)
AI-assisted development
補完を便利にします。
IntelliCode - Visual Studio Marketplace
確認用のファイルを作る
test.js
test.js
const message = "hello!"
message.
const http = require('http')
http.
const express = require('express')
const app = express();
app.
動作確認
それぞれメソッドのところで補完キーを押してそれぞれのメソッドが候補として出てくるかどうか？
※「.」の後ろ（カーソルをアンダーバーの所に持っていく）で補完キーを押してみる。
※expressはインストール済みとする
message._
http._
app._
発端
大変優秀なVSCodeの拡張機能
「Visual Studio IntelliCode」
これさえインストールしておけば後は全部自動で補完してくれると思っていました・・・が補完候補を出してくれない場合もあったので調べてみました。
※Visual Studio IntelliCodeはVSCodeの拡張機能からインストールできます。
実際の調査手順
pnpm インストール
npm install -g pnpm
※pnpmは小さなプログラムやプロジェクトを何個も作る場合、2度目からはインストールが早くなるnpmの代替パッケージマネージャです。
node入門者が小さなサンプルを沢山試す時に、ライブラリがローカルに保存してあるので何度もダウンロードをせず時間短縮になります。
プロジェクトの初期化
pnpm init
package.jsonが作られる
JavaScript標準のCoreライブラリの場合
Coreライブラリなので問題なく補完候補が出ています。
test01.js
const message = "Hello!"
message.
message.のところでは補完は効いています。
問題はここから
Node.jsの標準ライブラリの場合
比較してみる
補完が効いてない状態
補完が効いている状態
test02.js
const http = require('http')
http.
http.のところで補完が効かない
理由
nodeの型情報がないから
解決方法
型情報をインストールする
pnpm install --save-dev @types/node
http.のところで補完が効くようになった
Node.jsの外部ライブラリの場合
例
Express.jsの場合
比較してみる
補完が効いてない状態
補完が効いている状態
ライブラリをインストール
pnpm install express
test03.js
const express = require('express')
const app = 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,
settings.json (2021年5月13日)
{
//
// 基本 ノーマルは フォントサイズ16
"window.zoomLevel": 0.3,
// フォントサイズの設定より上でエラーが出ると文字が小さくなる
"editor.fontSize": 20,
// ターミナル文字サイズ
"terminal.integrated.fontSize": 15,
// デバッグコンソール文字サイズ
"debug.console.fontSize": 15,
// 文字の上下左右の幅
"editor.letterSpacing": -0.3,
"editor.lineHeight": 24,
// tailwindCSS
"tailwindCSS.rootFontSize": 20,
// ctrl+マウスホイールでの文字サイズ変更
"editor.mouseWheelZoom": true,
"editor.tabSize": 2,
//
// システム
// 新バージョンの非表示
"vsicons.dontShowNewVersionMessage": true,
// 起動時に何を起動させるか
"workbench.startupEditor": "newUntitledFile",
// ファイルのアイコン
"workbench.iconTheme": "vscode-icons",
// 最後を閉じたときVSCodeも閉じる
"window.closeWhenEmpty": false,
// デフォルトの改行コード
"files.eol": "\n",
// メニューを表示 全画面で消える
"window.menuBarVisibility": "classic",
// 左のactivityBarを表示する。
"workbench.activityBar.visible": true,
// 画面上部にファイルごとにファイルタブで表示する。
"workbench.editor.showTabs": true,
// 削除時にゴミ箱を使うかどうかを聞く
"explorer.confirmDelete": false,
// ドラッグアンドドロップでファイル移動時に確認
"explorer.confirmDragAndDrop": false,
// テレメトリを無効にする 自分のデータをMicrosoftに送信する
"telemetry.enableTelemetry": false,
// ファイルタブ
// ファイルタブの多段表示
"workbench.editor.wrapTabs": true,
// エラーファイルにはファイルタブに色をつける
"workbench.editor.decorations.colors": true,
// ファイルタブを装飾 状態を知らせる
"workbench.editor.decorations.badges": true,
"workbench.colorCustomizations": {
// アクティブなタブの背景の色を変える
"tab.activeBackground": "#831a5b"
},
//
// 整形 eslint prettier Formatting Toggle
//
// 拡張機能
// Formatting Toggle
// ペースト時に整形
// "editor.formatOnPaste": true,
//保存時に全体が自動整形される
// 入力時にカッコなどが自動整形
"editor.formatOnType": true,
"formattingToggle.affects": ["formatOnSave"],
// ※イベント時に整形
"editor.codeActionsOnSave": {
// import文をセーブ時に自動ソート
// 未使用のインポートを削除
// "source.organizeImports": true
"source.fixAll.eslint": true
},
// 有効にすると ESLint が Formatter 扱いになるのでfalseにする。
"eslint.format.enable": false,
"editor.formatOnSave": true,
// フォーマットをprettierで実行
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 解決時に使うパッケージマネージャ
"eslint.packageManager": "yarn",
// 自動save
"files.autoSave": "afterDelay",
// files.autoSaveのafterDelay設定値（デフォルトは1000）
"files.autoSaveDelay": 1000,
//
// エディタ画面設定
// ファイルの末尾は改行で終わらせる
"files.insertFinalNewline": true,
// 行番号の表示
"editor.lineNumbers": "on",
// 行番号が強調表示される
"editor.renderLineHighlight": "all",
// 右端で折り返すかどうか
"editor.wordWrap": "on",
// タイトルバーにファイルのフルパスを表示する
"window.title": "${activeEditorShort} / ${rootName}",
// "window.title": "${dirty}${activeEditorShort} / ${rootName}",
// "window.title": "${activeEditorMedium}${separator}${rootName}",
// "window.title": "${activeEditorShort}", //ファイル名
// "window.title": "${activeEditorMedium}", //相対パス+ファイル名
// "window.title": "${activeEditorLong}", //フルパス
// "window.title": "${folderName}", //フォルダ名
// "window.title": "${folderPath}",//フォルダパス
// "window.title": "${rootName}", //ワークスペース名
// "window.title": "${rootPath}", //ワークスペースフルパス
// "window.title": "${appName}", //Visual Studio Code
// "window.title": "${dirty}", // 未保存時に表示
// "window.title": "${separator}",//セパレーター
// 保存時に行末のホワイトスペースを削除
"files.": true,
// ドキュメントと型情報のヒントを表示
"editor.parameterHints.enabled": true,
// マルチカーソルを有効にする
"editor.multiCursorModifier": "ctrlCmd",
// カーソル行とエディタ上下端との間にキープする行数を指定
"editor.cursorSurroundingLines": 4,
// ガイドラインの可視化 行番号とエディタ画面の間の線
"editor.renderIndentGuides": true,
// 右側にルーラー（文字数を見る目印の線）を引く
"editor.rulers": [80],
// 制御文字を表示する
"editor.renderControlCharacters": true,
// コメント色変更
"editor.tokenColorCustomizations": {
"comments": "#ffffff"
},
// ファイルを保存するときに末尾のスペースを削除
// prettierで代用
// "files.trimTrailingWhitespace": true,
//
// カーソル
// カーソルを点滅させる
"editor.cursorBlinking": "blink",
// カーソルをスムースに点滅させる
"editor.cursorSmoothCaretAnimation": true,
// カーソルの形状
"editor.cursorStyle": "block",
// ミニマップの大きさ 1-3
"editor.minimap.scale": 2,
// ミニマップの文字を表示 falseでブロック表示
"editor.minimap.renderCharacters": false,
// ミニマップ表示領域をハイライト
"editor.minimap.showSlider": "always",
// 編集機能
// javascript 自動でimport出来るものは自動化する。
"javascript.suggest.autoImports": true,
// javascript編集時に同時にパスなどを変更
"javascript.updateImportsOnFileMove.enabled": "always",
// typescript 自動でimport出来るものは自動化する。
"typescript.suggest.autoImports": true,
// typescript編集時に同時にパスなどを変更
"typescript.updateImportsOnFileMove.enabled": "always",
// スタイル チェックを警告として報告
"typescript.reportStyleChecksAsWarnings": true,
//
// サジェスト機能
// 下記の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,
//
// git
// Git リポジトリを同期する前に確認する
"git.confirmSync": false,
// 差分を横に並べて表示ではなく行内に表示する
"diffEditor.renderSideBySide": true,
// 自動フェッチが有効かどうか
// "git.autofetch": false,
// "git.enableSmartCommit": true,
// ステージされた変更がない場合はすべての変更をコミットします。
"git.enableSmartCommit": true,
//
// ターミナル
// ターミナルのカーソルを点滅させる
"terminal.integrated.cursorBlinking": true,
// ターミナルの文字列選択で自動コピー
"terminal.integrated.copyOnSelection": true,
// ターミナルのレンダリング方法
"terminal.integrated.rendererType": "auto",
// PowerShellのパス
// "terminal.integrated.shell.windows": "C:\\Program Files\\PowerShell\\7\\pwsh.exe",
//
// 拡張機能 code-runner
// code-runnerの表示をターミナルに変更
"code-runner.runInTerminal": true,
// code-runnerのコマンドをエディタ上での右クリックで表示しない
"code-runner.showRunCommandInEditorContextMenu": false,
// code-runnerのコマンドをエクスプローラー上での右クリックで表示しない
"code-runner.showRunCommandInExplorerContextMenu": false,
"code-runner.executorMap": {
"typescript": "npx ts-node $fullFileName",
"javascript": "node",
"scala": "scala"
// "cpp": "cd $dir && g++ -Wall -std=c++11 \"$fileName\" -o \"$fileNameWithoutExt.out\" && $dir\"$fileNameWithoutExt.out\"",
// "cpp": "cd $dir && g++ -std=c++11 -Wall -pedantic \"$fileName\" -o \"$fileNameWithoutExt.out\" && $dir\"$fileNameWithoutExt.out\"",
// https://qiita.com/janus_wel/items/07140fcd1127b568087d
// -std=c++11 対象ソースが C++11 準拠としてコンパイルする
// -Wall 基本的な警告オプションを on にする
// -pedantic ISO C/C++ に存在しない文法を警告する
},
// code-runner実行時にターミナルを一旦クリア
"code-runner.clearPreviousOutput": true,
//
// 拡張機能 power mode
// 文字入力をすると弾けるアニメーション機能
"powermode.enabled": true,
// "powermode.customCss": {
// "filter": "invert(100%)"
// },
// 入力中に全体を左右に揺さぶる
"powermode.enableShake": false,
//コンボカウンターをステータスバーに表示
"powermode.enableStatusBarComboCounter": false,
//コンボタイマーをステータスバーに表示
"powermode.enableStatusBarComboTimer": false,
//
// 検索(Quick Open含む)から除外するファイルを指定。
// エクスプローラーには表示される
// http://qiita.com/shimoju/items/f64a0a7f0baa9cfafd4b
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/bundle": true,
"**/composer": true,
"**/tmp": true,
"**/.tmp": true,
"**/.next": true
},
// エクスプローラーから除外するファイルとフォルダ
// files.excludeはエクスプローラーからも検索からも除外され、
// 完全にないものとして扱われる
"files.exclude": {
"**/.git": true,
"**/CVS": true,
"**/*.exe": true,
"**/*.o": true,
"**/*.out": true,
"**/*.obj": true,
"**/*.ilk": true,
"**/*.pdb": true,
"**/*.tlog": true,
"**/*.idb": true,
"**/*.dll": true
// "**/bin": true
// "**.vs": true
//
//
// ここから下は自動設定での書き込み
// 自動設定時にコメントも消されるのでここに注記
},
"[typescriptreact]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"settingsSync.ignoredExtensions": ["msjsdiag.debugger-for-edge"],
"liveServer.settings.donotShowInfoMsg": true,
"editor.minimap.enabled": false
}