WebStorm の Node.js 開発環境を構築する

TypeScript も使いたかったので Node.js 開発環境として WebStorm を使おうとしたのだけれど、色々はまった。

ちゃんと外部ライブラリが require できて、補完等の IDE の恩恵も受けられるようにするためにはデフォルトのままではダメで、色んな場所で色んな設定が必要だった。JetBrains本家の資料でも記述がばらけていて整理されてなさげだったのでここにまとめておく。

サーバが起動しなかったり、そんなメソッドねーよとか怒られる場合は、たいてい 2-2〜2-4 の設定が外れてることが多いのでことあるごとにチェックしませう。

## 1. NVM で Node.js をインストール

[NVM の GitHub ページ](https://github.com/creationix/nvm)を参考にインストール。

```bash
$ curl https://raw.githubusercontent.com/creationix/nvm/v0.18.0/install.sh | bash
$ source ~/.nvm/nvm.sh
$ nvm install stable
```

`.bashrc` や `.zshrc` に以下の記述を追加。

```bash
NVM_HOME=${HOME}/.nvm
if [ -e "${NVM_HOME}" ]; then
  source ${NVM_HOME}/nvm.sh
  nvm use stable
fi 
```

なお、以降の作業のため

```bash
$ echo $NODE_PATH
$ which node
```
で環境変数 `$NODE_PATH` の値と、node コマンドのパスを取得しておく。

その上で、毎回 NVM で新しい Node をインストールするたびに設定をひとつひとつ変更するのは面倒なので、シンボリックリンクを作成しておき、パスの設定はそちらを使う。

```bash
$ cd ~/.nvm
$ ln -s v0.10.33 current
```
- $NODE_PATH = `/Users/me/.nvm/v0.10.33/lib/node_modules` → `/Users/me/.nvm/current/lib/node_modules`
- node = `/Users/me/.nvm/v0.10.33/bin/node` → `/Users/me/.nvm/current/bin/node`


## 2. WebStorm のインストールと設定

### 2-1. インストール

[JetBrains の WebStrom のページ](https://www.jetbrains.com/webstorm/)からファイルをダウンロードしてインストール。
起動時に Java がないとインストールしろと言われるので、ダイアログの`More Info...`ボタンで開くページから Java をダウンロードしてインストールしておく。

### 2-2. Node と NPM の設定

`WebStorm > Preferences... > Languages & Frameworks > Node.js and NPM` を開く。

1. `Node interpreter:` に何も入っていなければ、NVM でインストールした node コマンドのパス（ex. `/Users/me/.nvm/current/bin/node`）を入力。
2. `Sources of Node.js Core Modules` が「:warning: Sources are not configured.」となっていたら、`Configure...`ボタンを押下して開くダイアログからインターネット経由でソースをダウンロードする。

### 2-3. JavaScript ライブラリの設定

`WebStorm > Preferences... > Languages & Frameworks > JavaScript > Libraries` を開く。

- `Node.js vx.xx.xx Core Modules` と `Node.js Globals` をチェックして Enabled にする。

![Screen Shot 2014-11-18 at 11.00.43.png](https://qiita-image-store.s3.amazonaws.com/0/3742/464ee589-fff6-2490-894c-ac99be551055.png)

- `Add...` から New Libraryダイアログを開き、`+ > Attach Directories...` から $NODE_PATH の値のディレクトリ（ex. `/Users/me/.nvm/current/lib/node_modules`）を指定、`Visibility:` を `Global` にして、node_modules としてライブラリを追加する。

![Screen Shot 2014-11-18 at 12.19.44.png](https://qiita-image-store.s3.amazonaws.com/0/3742/773c828f-1d2a-e1c3-8c08-de87441bec98.png)


### 2-4. 環境変数の設定

`Run > Edit Configurations... > Defaults > Node.js` を開く。

- `Environment variables:` で `NODE_PATH` に取得しておいた値（ex. `/Users/me/.nvm/current/lib/node_modules`）を設定する。

![Screen Shot 2014-11-18 at 11.55.15.png](https://qiita-image-store.s3.amazonaws.com/0/3742/8dc800b8-8ae2-79e6-483c-f8484bb0886c.png)


## 3. WebStorm のカスタマイズ（個人的趣味）

### 3-1. エディタのキー操作を Vim 風に

- `WebStorm > Preferences... > Plugins > Browse repositories...` から IdeaVim プラグインをインストール。（※ WebStorm の再起動が必要）

### 3-2. 好きなエディタのテーマをインポート

1. [IDEA Color Thems](http://www.ideacolorthemes.org/themes/) のサイトから、好きなテーマの JARファイルをダウンロード。
2. `File > Import Settings...` からそのファイルを読み込む。（※ WebStorm の再起動が必要）
3. `WebStorm > Preferences... > Editor > Colors & Fonts > Scheme name` から、適用したいテーマを選ぶ。

### 3-3. カーソルの点滅を止める、現在行の色を変更しない

- `WebStorm > Preferences... > Editor > General > Appearance` の `Caret blinking (ms)` のチェックを外す。
- `WebStorm > Preferences... > Editor > Colors & Fonts > General > Caret row` の `Background` のチェックを外す。


## 4. NPMパッケージのインストール方法

コマンドラインからインストールしたほうが手っ取り早いかも。

1. `WebStorm > Preferences... > Languages & Frameworks > Node.js and NPM` の `Packages` で「+」ボタンを押下
2. パッケージを検索して選択
3. `Options` をチェック、`-g` を入力
4. `Install Package`ボタンでインストール

　

【参考ページ】

- [Getting Started with Node.js in WebStorm | JetBrains WebStorm Blog](http://blog.jetbrains.com/webstorm/2014/01/getting-started-with-node-js-in-webstorm/)
- [How WebStorm Works: Completion for JavaScript Libraries | JetBrains WebStorm Blog](http://blog.jetbrains.com/webstorm/2014/07/how-webstorm-works-completion-for-javascript-libraries/)
- [Installing and Removing External Software Using Node Package Manager - WebStorm 9.0.0 Web Help](https://www.jetbrains.com/webstorm/webhelp/installing-and-removing-external-software-using-node-package-manager.html)