Vue, React開発時のPHPStorm, VSCode設定の話

マナリンク CTOの名人です。

以前マナリンクのフロントエンド開発環境をまとめました。

https://www.wantedly.com/companies/noschool/post_articles/310301

今日は続編として、フロントエンド開発時のIDE(PHPStorm, VSCode)の設定周りについて書いていきます。

PHPStorm

普段私はPHPStormを主に使っています。

あまりに便利なので年間1万円ほどを支払う価値は存分にあると思います。

Plugin

PHPStorm（というか、IntelliJ周辺）には多くのプラグインがありますが、その中でもフロントエンド周りのプラグインを紹介します。

Prettier

コードの整形ライブラリとして有名なPrettierですが、エディタにIntegrateすることで、保存時だったり、キーボードショートカット経由でフォーマットを実行できます。

保存時に走らせるとちょっとうるさいので、意識的にreformatを走らせたときだけ動くようにしています。

TailwindCSS

TailwindCSSはユーティリティファーストのCSSライブラリとして有名です。CSSのクラスが大量に用意されており、組み合わせるだけで常用に耐えるコーディングができます。

このプラグインを入れることで、タイピング中にTailwindのクラス名が保管されます。マナリンクではTailwindを使っていませんが、私が個人的に素振りする時によく使うので入れています。

Styled Components & Styled JSX

こちらはNext.js(Reactのフレームワーク)でlinariaを導入するにあたって利用しているプラグインです。

ショートカットなど

私が個人的にZennにまとめているので良かったらご覧ください。

https://zenn.dev/meijin/scraps/47424252eea7b8

イチオシのショートカットとしては

• Shift + F6でファイル名やクラス名を参照箇所とともに一括置換
• Alt + F7でそのクラスや関数を利用している箇所を一括で検索

がリファクタリングで非常に便利です。

細かいですが、Command + Dでカーソルの置いてある単語を全選択とか、矩形選択とか、Alt + 上下矢印で行の入れ替えとか覚えると細かい作業効率が上がります。

ちなみにフロントエンドではありませんが、PHPは文字列でクラス名を表記することがたまによくありますが、こういった一括置換機能を活用するにあたっては、できるだけクラスを直接利用するように書くほうが安全です。

Bad

Route::get('/user/{id}', 'App\Http\Controllers\Api\v1\User\UserController@getUser');

Good

Route::get('/user/{id}', App\Http\Controllers\Api\v1\User\UserController::class);

フロントエンドでは、jestでmockする際にモジュールのファイルパスを文字列で書かざるを得ないので、ここがリファクタ時にうっかりしがちですね。

テスト

テストの実行もシェルを使うこと無く画面上から実行できます。

以下画像の再生ボタンを押すことでテストができます。

@vue/composition-apiとの相性

VSCodeに一歩リードされていることでおなじみのcomposition-api対応ですが、最新版の2021.1にてかなり改善されてきています。

以下のようにpropsに対して型補完が効いています。

もちろんtemplate内でも補完が効きます。

ちょっと不安定でしたがここに来て安定感が抜群に増しています。

VSCode

とりあえずおすすめの拡張機能を雑にリストアップしておきます。

• Auto Close Tag
• Auth Import
• Auto Rename Tag
• Color Info
• Color Picker
• Duplicate Action
• ESLint
• Firebase
• indent-rainbow
• Jest Runner
• Markdown All in One
• npm
• Path Intellisense
• Prettier
• SCSS Everywhere
• Stylelint
• Tailwind CSS Intellisense
• TODO Highlight
• TypeScript God
• Vetur
• Vue 3 Snippets
• vuetify-vscode

VSCodeは割と多くの拡張機能を入れないと使い物にならないので、以下のようなQiitaを見てセットアップするのが良いと思います。

https://qiita.com/newt0/items/aeddc6a179ea3a464ed5

ここの記事にはBeautifyがフォーマット用のツールとして書いていますが、おとなしくPrettierを使うほうが紛れが無いと思います。

PrettierやESLintについてはまた別の記事にまとめておこうと思います。

PHPStormに対して好感を持っている理由としては、それこそPHP周りのサポートの手厚さや、Dockerコンテナに対してIDE上からアクセスしてテストコードを実行するなどできる点が特に便利で、フロントエンド開発のみ取り組む場合はVSCodeでも良いと思います。

前述したように、ファイル名の変更やクラスの移動が気軽にできることはかなり重要で、それによってリファクタリングのしやすさが変わってくるため、VSCodeで必要十分なリファクタリングができるかどうかは実際使う時にぜひ確認してみて頂ければと思います（そして不足あればWebStormないしPHPStormをぜひ）。

今回は以上になります。

見逃しているTipsがありましたらぜひ教えて下さい！（そして入社してください！）

今後も発信していくのでよかったら会社アカウントのフォローや私のTwitterフォローをお願いします。