VSCodeからWebStormに乗り換えた
この記事は suusan2go Advent Calendar 2019 - Adventar の10日目の記事です。
最近のサーバーサイドの開発ではほぼJetBrainsのIDE (RubyならRubyMine、GoならGoLand、PythonならPyCharm、サーバーサイドじゃないけどFlutterならAndroid Studio)を使うようになったものの、フロントエンドだけは別でVueやTypeScriptのサポートの厚さからVSCodeを使い続けていました。しかし、一つだけショートカットの違うエディタを使うと結構生産性が落ちるのと、リファクタリングの機能はJetBrains製IDEの方にかなり軍配があがるので、関わっているプロジェクトのコードのリファクタリングを考えるタイミングで乗り換えることにした話です。
WebStormに乗り換えるにあたっての設定
自分はフロントエンドだけかけばいいときはWebStormを立ち上げてますが、PHPStormでもRubyMineでもJS書く環境は同じようにサポートされています。このセクションのタイトルも便宜上WebStormになってますが、以下の設定などはWebStormじゃなくてもほぼ同じです。
ESLint設定
ESLintはIDEに組み込みで入っています。プロジェクトにESLintが設定されていれば特になにもしなくてもいい感じに設定されるはずです。
Prettier設定
Prettierはプラグインとして提供されています(WebStormならデフォルトで組み込み)。ただこのプラグイン単体では、 Format on Save は提供されていないのでFileWatchersと組み合わせることになります。
FileWatchersもプラグインとして提供されており(WebStormならデフォルトで組み込み)、これとPrettierのプラグインを組み合わせることで Format on Save が実現できます。こうかくと結構面倒そうに感じるんですけど、実際にはFileWatchersの追加からprettierを選んで対象のテンプレートを選択するだけなので楽ちんです。
注意としてデフォルトではScopeが Project Fiels になっていますが、Recently Changed Files か Current File にしておくと良いでしょう(ビルドしたJSとかを全部フォーマットにしにいって重くなることがある)。
Vueサポート
これが一番心配だったんですけどちゃんとVueプラグインが提供されています。最初にpublishされたの Feb 03, 2017 だから結構前からあったのか知らなかった……
VSCode向けのプラグインであるVeturがかなり高機能だったので心配してましたが、ほとんどストレスなく開発ができています。 github.com
乗り換えてみての感想
直近Vueを書くときにつかっていたので、Vueでの感想が中心です。
補完とジャンプが強い
VSCodeでもコード補完とジャンプは出来てましたが、WebStormの場合のほうがやはり強力で型で引けない場合にも候補を出してくれるのはかなり強いです。VSCodeと比べても、Vueのシングルファイルコンポーネント <template> 内の補完が快適で驚きました。
VSCodeの場合、data() 内の最初のキーまでしか補完してくれなかったんですけど(自分の環境だけ？)、オブジェクトの中身についてもちゃんと補完を出してくれています。
またコンポーネントのpropsについてもちゃんと補完が効いています(これはVSCodeも同じ)。
リファクタリングがやりやすい
リファクタリングがめちゃめちゃやりやすくなりました。Vueのコンポーネントファイルの中にベタで書いていた関数を外部ファイルに移す、1ファイルにまとめて書きすぎた関数を別ファイル分割するみたいなことが簡単に実現できるので、ファイルの整理が捗るようになりました。もちろんちゃんとそれらを呼び出していたファイルでもimportパスの変更などは自動で追随してくれます。
computed の関数名をリファクタリング機能で変更するとテンプレート内にもちゃんと反映されますし*1、VSCodeで触っていたときよりもリファクタリングの面倒さが格段に少なくなりました。
複数のショートカットキーを覚えなくてよくなった
これはめちゃくちゃ個人にしか当てはまらない感想ですが、VSCodeとJetBrains系IDEを行き来していたときによく脳内でショートカットキーがコンフリクト起こしていたのがなくなったのは地味に大きかったです。特に直近はVSCodeを触る機会がフロントエンド触るときだけに限定されたこともあって、久しぶりにVSCode側を触るときに基本的なショートカットキーが思い出せなくてググったりしていたので……
良くなかった点
いいところばっかりだとステマっぽいので微妙なところも書いておくと、やはり立ち上がりがVSCodeに比べると遅いです。ちょっと何かを編集するみたいな用途に立ち上げるのは向いてないです。自分は今までもそういうちょっとした変更ではVimを使っていたので特に困ってないですが。
あとは最新のAPIに対応していない場合もあるようで、Vue内の v-slot:hogehoge のシンタックスハイライトがうまくいっていませんでした。また自分は試してませんが、レビュー を見ると、Vue Composition APIにまだ対応してないようです。 https://plugins.jetbrains.com/plugin/9442-vue-js/reviews#review=35618
まとめ
これでアプリケーションコードを書くものは全てJetBrains製品となりました。フロントエンド書くならVSCodeでしょ！と特に試しもせずに思っていましたが、有償のIDEだけあってJetBrains製品もなかなか良いです。
*1:残念ながら完璧ではないですが……
