WebStormでVue.jsの快適な開発環境をつくる

# *追記(2019-02-15)*
WebStorm, vue-cliのバージョンが上がり状況が変わったので加筆修正
（特にJest回り）

# 概要
WebStorm上でVue.jsアプリケーションの開発するにあたって、そのままだと使い勝手がイマイチなところがあったので色々設定を追加したりいじったりしたらだいぶ快適になったというお話。

なお、本記事で作成したプロジェクトはGitHubで公開しているので、参考になれば幸いである。

- [IsaoTakahashi/web-storm-setup](https://github.com/IsaoTakahashi/web-storm-setup)
    - *追記(2019-02-15) 最新のmasterは2019-02-15に検証した3.4.0のものになっている*

## なぜWebStormか
1. もともとIntelliJを使っていて、自分の手になじんでいる。
2. VSCodeと交互に使用感を試した結果、やっぱり自分にはJetBrains製品が一番だと思った。特に自分の中で重要視していた(ことが分かった)のは以下のような点。
    3. 補完機能の充実
    4. 定義ジャンプの使いやすさ
    5. Gutter Iconの便利さ
    5. [Searching Everywhere](https://www.jetbrains.com/help/idea/searching-everywhere.html) (プロジェクト内の全ファイル・クラス・アクション・設定を1つの入力窓で検索できる機能
6. 最近のWebStormのアップデートを見る限り、Vue.jsへのサポートが手厚くなってきている。
(vue-cliでのプロジェクト作成とか)

ただし、補完機能や定義ジャンプについてはいくらか設定が必要(本記事の主題)。

## 本記事執筆時の各種ツールのバージョン情報

### 初稿（2018-07-17）時の環境
- WebStorm : 2018.2 EAP
- Node.js : v10.6.0
- yarn : 1.7.0
- @vue/cli : 3.0.0-rc4
    - 2系まではvue-cliという名前だった

#### *追記(2019-02-15)*
上記は初稿（2018-07-17）時の環境で、今回は下記の環境で検証を行った。

- WebStorm : 2019.1 EAP
- Node.js : v11.10.0
- yarn : 1.12.3
- @vue/cli : 3.4.0
    
# WebStormのインストール
[公式サイト](https://www.jetbrains.com/webstorm/)、もしくは[JetBrains Toolbox](https://www.jetbrains.com/toolbox/app/)から。
[EAP版](https://www.jetbrains.com/webstorm/nextversion/)も提供されていて、こちらは現時点では無料&無期限&開発中の最新機能が利用可能。
(ただし安定版ではないので、何かが起きても自己責任)

## プラグインのインストール
ちなみに自分は、IntelliJ時代から使っているものも含めて、以下のプラグインを使用している。

### 機能拡張系
- [Autoscroll Save](https://plugins.jetbrains.com/plugin/7575-autoscroll-save) : ファイルを開いたときに、ファイルツリーの表示も追従してくれるAutoscroll機能の設定を保存してくれる。
- [CodeGlance](https://plugins.jetbrains.com/plugin/7275-codeglance) : エディタ右上にファイルのMiniMapを表示してくれる。
- [ESLint](https://plugins.jetbrains.com/plugin/7494-eslint) : その名の通りESLintのプラグイン。Warning出したりQuickFixを提示してくれたりする。
- [RegexpTester](https://plugins.jetbrains.com/plugin/2917-regexptester) : 気軽に正規表現の記述をテストできる。

### レイアウト系
- [Material Theme UI](https://plugins.jetbrains.com/plugin/8006-material-theme-ui) : マテリアルデザインのテーマ
- [Rainglow Color Schemes](https://plugins.jetbrains.com/plugin/10267-rainglow-color-schemes) : 大量のカラースキーマが1つのプラグインに入っている。個人的には、色分けが細かい方がコードの識別が楽になるので"Jewel"を使用している。
- [Rainbow Brackets](https://plugins.jetbrains.com/plugin/10080-rainbow-brackets) : 括弧(`()`や`{}`,`[]`)がネストしたとき、色分けして表示してくれる。json含め、多くのファイルフォーマットに対応している。上述のRainglow Color Schemesの"Jewel"と組み合わせると相当カラフルになる。

他にも便利なプラグインが多く揃っているので、色々試してみるのも良いと思う。
r.f. [既に最強なIntelliJ IDEAを更にパワーアップさせられる10個のプラグイン](https://qiita.com/konohiroaki/items/b9a810702d87a0b6bb53)

# プロジェクトの作成
(Node.jsやらyarnやらvue-cliのインストールに関しては、公式ドキュメントなどを参照)

## Vue.jsプロジェクトの作成
新規プロジェクトの作成画面で"Vue.js"を選択し、適宜Nodeや`@vue/cli`のpathを入力する。
<img width="779" alt="スクリーンショット 2018-07-14 10.59.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/72808/e371e0ea-81aa-49cd-5b80-5e506c24f899.png">

で"NEXT"を押す…とエラーが出る!
(`@vue/cli`がrc4に上がったばかりのころに試しているので、何らか問題がありそう)
ここは深入りせず、おとなしくCLI経由でプロジェクトを作成して、それをWebStormで開くことにする。

---

#### *追記(2019-02-15)*

2019.1 EAPではエラーは出ないものの、"Starting Vue CLI"とインジケータが表示されたまま先に進まないため、結局作れなかった。
~~__CLIでできるから別に動かなくてもいいよね__~~

---

構成はプロジェクトの性質ごとに異なるが、ここでは以下のような構成で作成することにする。
<img width="617" alt="スクリーンショット 2018-07-14 11.06.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/72808/5232b000-1feb-01c8-c666-9009ad52fb7c.png">

- Please pick a preset: `Manually select features`
- Check the features needed for your project: `Babel`, `Linter`, `Unit`
- Pick a linter / formatter config: `Prettier`
- Pick additional lint features: `Lint and fix on commit`
- Pick a unit testing solution: `Jest`
- Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? `In package.json`


## WebStorm上での確認
作成したプロジェクトをWebStormで開いて、`package.json`を見てみる。
<img width="462" alt="スクリーンショット 2018-07-14 11.24.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/72808/fdc77ef5-8758-c208-3e40-f263bb843c0f.png">

左側の緑色の:arrow_forward:アイコンが"Gutter Icon"で、ここから各種scriptを実行できる。
試しに`serve`を実行して、無事に起動することを確認。
![スクリーンショット 2018-07-14 13.09.49.png](https://qiita-image-store.s3.amazonaws.com/0/72808/152d82dd-d4a1-fe47-0ca5-1d3715a0a518.png)


## 補完機能と定義ジャンプのカスタマイズ
続いて、自動生成された`HelloWorld.spec.js`を例に、補完機能や定義ジャンプの細かい設定をしていく。
設定を追加する前は、このように見えているはず。

<img width="522" alt="spec.jst.png" src="https://qiita-image-store.s3.amazonaws.com/0/72808/e55daba8-bbb6-2cce-87ab-adae9d0751f3.png">

- テストコードの`describe()`や`it()`などのfunctionにWarningが出ており、補完が効かない。
- import文の`"@/components/HelloWorld.vue"`にWarningが出ており、`HelloWorld.vue`にジャンプできない。

### Unresolvedなキーワードの解決
少なくとも現時点でWebStormは`@vue/cli-plugin-unit-jest`が参照しているpackageをうまく認識できないため、specファイルの`describe()`などがUnresolvedになっており、Warningになる&補完も効かない。

#### 定義ファイルの追加
`Preference` > `Languages & Frameworks` > `JavaScript` > `Libraries`から、Jestの定義ファイルを追加する。
<img width="978" alt="スクリーンショット 2018-07-14 11.52.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/72808/3f4d9a4c-2a08-3569-8093-c2aaabc3e1af.png">
"DWONLOAD..."をクリックし、

<img width="482" alt="スクリーンショット 2018-07-14 11.51.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/72808/084f35a4-fcd1-aecb-1107-3c0ce2d50bfa.png">
"jest"を選択し、"DOWNLOAD AND INSTALL"。

これでJestの`index.d.ts`が取り込まれるので、補完と定義ファイルへのジャンプが可能になる。
<img width="743" alt="スクリーンショット 2018-07-14 11.56.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/72808/8680659d-c259-f520-44f4-a2b1e57d41d7.png">

#### *追記(2019-02-15)*
現バージョンでは最初から「@types/jest」が追加されているのだがチェックが外れているので、チェックを入れればOK。
![スクリーンショット 2019-02-15 19.57.15.png](https://qiita-image-store.s3.amazonaws.com/0/72808/c9828570-e6be-d6e9-bfd5-15a44798bb88.png)

#### packageの明示的な追加
もう一つの手段として、Jestのpackageを明示的にdevDependenciesに追加する方法がある。

```sh
$ yarn add --dev jest
```

すると、こうなる。

<img width="461" alt="スクリーンショット 2018-07-14 12.01.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/72808/df81ae99-df3a-abc9-40c3-a1f223d1810b.png">

この方法だと、テスト実行のGutter Iconも表示されるので快適・・・かと思いきや

<img width="550" alt="スクリーンショット 2018-07-14 12.03.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/72808/4eb0760a-8b57-3a3b-b10b-aa19692f59df.png">

正しくテストが実行されない:sweat:　
(Terminalから`yarn run jest --testNamePattern=HelloWorld.vue`を実行すれば正しく動く)

また、dependencyの追加が冗長になる&`@vue/cli-plugin-unit-jest`が使用しているバージョンとズレると予期しない挙動になる可能性があるので、Gutter Iconからのテスト実行含め、素直にWebStormのアップデートを待つほうが良いかもしれない。

#### *追記(2019-02-15)*
現バージョンではjestのdependencyを明示的に追加しなくてもGutter Iconが表示され、テストも正しく実行される。なのでこの方法は非推奨。
![スクリーンショット 2019-02-15 20.01.37.png](https://qiita-image-store.s3.amazonaws.com/0/72808/ec71adc8-55f4-0aad-e653-dddebf7d252d.png)
（テスト実行時のコマンドが`@vue/cli-service test:unit`となっており、@vue/cliのscriptが実行されるようになっている。）


## import文のWarning解決
WebStormは、デフォルトでは[babel-resolverなどによるimport文の省略記法をサポートしていない](https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000507190-Cannot-Resolve-Imports-when-using-babel-resolver)。
[機能追加の要望](https://youtrack.jetbrains.com/issue/WEB-28241)も出ているが、取り込まれる目処は立っていなさそう。

そこで、上記記事でも提示されているように、プロジェクト直下に設定用のjsファイル(名前は何でも良い)を置くことで解決する。

```js:import-resolver.js
/* eslint-disable no-undef */
// r.f. https://youtrack.jetbrains.com/issue/WEB-22717#focus=streamItem-27-1558931-0-0
System.config({
  paths: {
    "@/*": "src/*"
  }
});
```
そうすることで、Warningが消え、importしているpackageの定義にもジャンプできるようになる。
<img width="489" alt="スクリーンショット 2018-07-14 12.36.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/72808/3b11ffe2-4782-d094-8fc9-f8c3ad0238d6.png">

## ESLintやPrettierの活用
ESLint(上述のプラグイン)とPrettier(デフォルトでプラグインがインストールされている)を使うにあたって、特に特殊な設定をする必要はない。

### ESLintによるWarningとQuick Fix
ESLintで警告が出るコードを書いている場合、警告対象の部分にマウスオーバーすると、このようにツールチップが表示される。
<img width="450" alt="スクリーンショット 2018-07-14 12.50.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/72808/004b09b6-fc7b-0e61-7c92-2e0023736c54.png">

ここで`cmd`+`1`(または"Show Intention Action"を割り当てているショートカットキー)を押して表示されるツールチップから"ESLint: Fix current file"を実行することで、
<img width="618" alt="スクリーンショット 2018-07-14 12.52.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/72808/86d49777-67e6-f255-c143-aa21bab7b40f.png">

ESLintに沿った形でコードに修正することができる。
<img width="301" alt="スクリーンショット 2018-07-14 12.58.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/72808/171c497c-7e35-55ef-a07a-5e8fa985cb95.png">


### Prettierによる整形
"Reformat with Prettier"にデフォルトでショートカットキーが割り当てられているので、それを実行すればPrettierの設定に基づき整形をしてくれる。
<img width="474" alt="スクリーンショット 2018-07-14 12.44.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/72808/77425d62-2307-b855-5e36-79722f7382fc.png">
("Find Action"のポップアップ画面)

Prettierの設定によってはWebStorm標準の"Reformat Code"とコンフリクトするので、思い切って普段"Reformat Code"に割り当てているショートカットキー(筆者の場合だと`cmd`+`shift`+`F`)を上書きしてみるのも良いかもしれない。
(「うっかりReformatしちゃってESLintに怒られる」ということを防げる)

# 最後に
いくらか追加設定をすることで、WebStorm上でのVue.js(というかNode.js)プロジェクトの開発作業をすこぶる快適にすることができる。
個人的な所感ではあるが、JavaScriptでの開発にあまり慣れていない or 他のJetBrains製品を使ったことがある人には、VSCodeよりもWebStormの方がスムーズに開発を進められるのではないかと思う。