Visual Studio Code に Node.js と Express の インテリセンス を 追加 する

0 件のコメント

Visual Studio Code で Node.js アプリケーション開発 を行う際、やはり インテリセンス が使いたいものです。 …が、標準だと インテリセンス が入っていません。

この記事では Visual Studio Code に Node.js および Express の インテリセンス 機能を追加して インテリセンス を 有効化 させる方法をまとめます。


目次


Visual Studio Code の インテリセンス

Visual Studio Code では TypeScript 向けの型定義ファイル (例えば node.d.ts ) を使ってインテリセンスを実現しているようです。 なので、 d.ts ファイル (DefinitelyTyped) を必要に応じてインストールすることで Node.js, Express に限らず さまざまな インテリセンスを実現できます。

この 型定義ファイルを管理するツールに 「Typings」 と呼ばれるツールがあり、 npm を利用してインストールすることができます。 「Typings」はいわゆる 「DefinitelyTyped の パッケージ管理ツール」 になります。

以下の手順では Typings をインストールして、 Node.js と Express の型定義ファイルを導入しています。

インストール 手順

まず前提として「すでに Node.js / npm がインストール済みである」ものとします。 まだ Node.js / npm を インストール していなければ こちら を参考にインストールしてください。

  1. typings を インストール
    npm install typings --global
    
  2. プロジェクトディレクトリ へ 移動(以下は C:\workspace\testproject へ移動する例)
    cd C:\workspace\testproject
    
  3. Node.js および Express の 定義ファイル を インストール
    typings install dt~node --global --save
    typings install dt~express dt~serve-static dt~express-serve-static-core --save
    

Typings がインストールする先は カレントディレクトリ になるので、プロジェクトルートディレクトリへ移動しておく必要があります。 --global と指定しながらも カレントディレクトリ 配下 に typings フォルダ が作成され、その下にすべて保存されます。 なので、インテリセンス有効化したいプロジェクトのルートディレクトリへ移動してから上記操作をする必要があります。

インテリセンス の 動作確認

Visual Studio Code を再起動して適当な JavaScript ファイルを作成してみます。 以下の図のように 入力途中 または . を入力した際プルダウンが出ていれば正常動作しています。

参考記事

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね!」または 「Twitter の フォロー」 お願いします!!