nodebrewユーザーがTypeScriptの最新版をWebStormで使う方法


@clockmaker氏のQiita記事「TypeScriptの最新版をWebStorm (IntelliJ IDEA)で使うときの設定方法」において、WebStormでTypeScriptの最新版を使う方法が紹介されていました。Node.jsのバージョン管理ツール「nodebrew」のユーザー向けのパスの通し方は少々異なるのでまとめました。

nodebrew導入時のnpmモジュールのインストール場所

プロジェクト毎にNode.jsのバージョンを切り替えたい時など、Node.jsのバージョン管理に便利なnodebrew。使い方は @sinmetal氏 の記事「node.jsのversionを管理するためにnodebrewを利用する - Qiita」にわかりやすくまとまっています。記事で紹介されているように、下記コマンドでグローバル環境にインストールされているnpmモジュールを、カレントバージョンにも適用できます。

$ nodebrew migrate-package v(現在使用中のNode.jsのバージョン)

macOSの場合、TypeScript等の各npmモジュールへは下記パスでアクセスできます。

/Users/(ユーザー名)/.nodebrew/current/lib/node_modules/

TypeScriptも上記フォルダにあるので、WebStormではここにパスを通します。

WebStormの設定

WebStormではデフォルトでTypeScriptのコンパイラーが内蔵されています。そのコンパイラーを切り替え、最新版のTypeScriptを使うように設定します。

[WebStorm]→[Preferences]→[Languages & Frameworks]→[TypeScript]を選択し、TypeScriptの設定画面を開きます。[Enable TypeSCript Compiler]にチェックを入れ、TypeScriptのコードが自動でコンパイルされるようにしておきます。

[Compiler version]の箇所で、[Edit]を選択し、コンパイラーの設定画面から[Custom directory]にチェックを入れ、下記のパスを指定します。

/Users/ユーザー名/.nodebrew/current/lib/node_modules/typescript/lib

[OK]を押して設定画面に戻り、[apply]を押すと設定終了です。これでNodebrewユーザーも、最新版のTypeScriptがWebStormで使えます。