概要
VSCodeの情報が溢れているのにIntelliJ IDE 系列のTypeScript+Reactの情報がなかったので試してみました。
IDEの違いやバージョンで小さな差異はあるかもしれないですが、大体こんな感じで出来ると思います。
必要なプラグイン
Prettier
File Watchers
設定
Preferences -> Tools -> File Wathers
「+」 アイコンからPrettierを選択します
以下のようにダイアログが出てくるので File Type -> TypeScriptにします。
同じ要領であと二つ追加します。
File Type -> TypeScript JSX
File Type -> JSON
この辺りは必要なものを適宜やっていきます。
プロジェクトの作成と実行
File -> New Project -> Static Web -> React APP
Reactアプリのシンプルなテンプレートを作ってくれます。
次にRun(npm start)で実行。
規定のブラウザが開いて下記のURLが立ち上がります。
http://localhost:3000/
Reactを使っている人なら同じみの画面が出てきます。
ファイルを書き換えて保存してみる
何か変更があるとFile Wathersが反応してPretterで整形してくれます。
試しに src/App.tsxを書き換えてみます。
Edit <code>src/App.tsx</code> and save to reload.
Edit <code>src/App.tsx</code> and save to reload.AAAA
末尾にAAAAと改行を二つ付け加えてファイルを保存します。
トランスパイルが終わると自動で整形して無駄な改行二つが無くなります。
ブラウザ画面では次のように出てきます。
末尾にAAAAが付きましたね。
トランスパイルはIDEのほうでソースに変更があれば自動で行われてブラウザに同期されて反映されます。
所謂、ホットリロードされます。
VSCodeと比べてのメリット
- PretterやESLintの設定を自動で よしなに してくれる。
- TypeScriptとReactに集中できる
VSCodeと比べてのデメリット
- Pretterの整形がちょっと遅い。VSCodeだと一瞬でおわっったのが0.5秒くらいかかります。 ただ、VSCodeの場合整形後にESLintのエラー波線が一瞬入るので気持ちの問題の気もします。
- PretterやESLint+webpackの知識が覚えられない。
- 多くの人がVSCodeを使って開発している（自分の観測範囲内で）
感想
設定関連のメリットがそのままデメリットに繋がりますね。
ただ、PretterやESLintの設定はバージョンアップで微妙に変わったりするので、この部分をクリアできるのは嬉しかったりします。
webpackは覚えた方が良いと推奨している方も多いので (自分の中の仮想の人間)TypeScriptとReactがそれなりに使えるようになったら、設定周りを勉強するというのもありかなと思います。
たぶん、PretterやESLintの設定ファイルをおけば自分で変更できると思うのですが調査してないです。
不便を感じるまでIntelliJ使ってみます。
最後にVSCodeじゃなくてIntelliJのIDEを選択したのは金を払っているから勿体無いなぁという動機です。