VSCodeでJavaScript/Node.jsのコードを補完する
VSCodeでJavaScriptを書く時、ちゃんと候補表示＆補完してくれるようにした話です。
やり方については情報が錯綜しています。私が調べた感じだと「tsdを使う」→「tsdが非推奨になりtypingsが推奨」→「typingsより便利なnpm install @types/が使えるようになった」という流れっぽいです。
ここではnpm install @types/とtypingsを使う方法を紹介します。まずはnpm install @types/を試して、だめだったらtypingsを試して下さい。
JavaScript標準のCoreライブラリの場合
候補表示＆補完できる
JavaScript標準のCoreライブラリはなにもしなくても候補表示＆補完ができます。
下の例ではmessageがString型なことを理解してStringクラスのメソッドを候補として表示しています。
Node.jsの標準ライブラリの場合
候補表示＆補完されない
Node.jsの標準ライブラリのAPIはデフォルトでは補完されません。
下の例ではhttpライブラリを読み込もうとしていますが、まずrequireが補完されません。
下の例ではhttpライブラリを読み込みましたがhttpライブラリのメソッドが候補として表示されていません。
この状態でコーディングするのは初学者には厳しいです。補完できるようにしましょう。
型定義ファイルの取得
npm install @typesを使う方式を紹介します。もしうまくいかない場合は後述するtypingsの方法を試して下さい。
npm install @types/＜ライブラリ名＞でそのライブラリの型定義ファイルを取得できます。VSCodeはその型定義ファイルを参照してコードを補完してくれます。
早速、Node.jsの型定義ファイルを取得しましょう。
npm install --save-dev @types/node
型定義ファイルは最終成果物の動作には不要なものなので--save-devオプションでローカルに開発用モジュールとしていれています。
これでnode_moduleディレクトリに型定義ファイルが入りました。これだけでOKです。
動作確認
requireが候補として表示されるようになりました。
httpライブラリのメソッドが表示されるようになりました。
Node.jsの外部ライブラリ（Express.js）の場合
候補表示＆補完されない
Express.jsを例に話を進めます。まずはExpress.jsをインストールします。
npm install express
Express.jsを読み込んで使おうとしましたがExpress.jsのメソッドが候補に表示されません。ここではgetが表示されることを期待していました。
型定義ファイルの取得
Node.jsのときと同じ方法でExpress.jsの型定義ファイルを取得します。
npm install --save-dev @types/express
動作確認
候補が表示されるようになりました。
簡単ですね。
typingsを使った例
typingsを使って型定義ファイルを取得することもできます。もしnpm install @typesでだめだった場合はこちらを試してみてください。
Node.jsの標準ライブラリを例にとって話を進めます。
typingsをインストール
typingsがまだインストールされていない場合はインストールします。
npm install -g typings
globalでよいと思います。
型定義ファイルの取得
以下のコマンドでNode.jsの型定義ファイルを取得します。
typings install dt~node --global --save
取得した型定義ファイルはtypingsというディレクトリに配置されます。
VSCodeを設定
この方法ではVSCodeを設定する必要があります。
プロジェクトフォルダの最上位階層にjsconfig.jsonというファイルを作成し、以下の内容をコピペします。
{
"compilerOptions": {
"target": "es6",
"module": "commonjs"
}
}
動作確認
補完できるようになりました。
感想
補完できるようになりました。
JavaScriptを敬遠していた理由の一つが補完が弱いことでしたがこれで学習のハードルが一つ下がりました。
