🐬

Laravel開発で導入してほしいVSCode拡張機能 (WSLリモート接続)

2023/02/12に公開

Laravel

2023/02/12時点の記事です。
Laravel開発でVSCodeの拡張機能で何入れたらいいかわからない方向け。必須級で入れておいてほしいものだけピックアップ。
説明を長めに書いたので、見出しを活用して拡張機能をインストールしていって頂けると嬉しいです。

開発環境

Windows10
WSLリモート接続

汎用的なもの

WSL

そもそもこれがないとWSLリモート接続は動かない。
Local側にインストールされていること。

Japanese Language Pack for Visual Studio Code

VSCodeを日本語化できます。

GitLens — Git supercharged

コミット履歴の可視化

どんな変更がいつ行われたのか、コード上で可視化できます。

変更行のハイライト(VSCode Git機能)

コミット前の変更行も見やすいです。
オレンジは修正した行、緑は追加行、赤は削除した行。

変更行を確認、戻す(VSCode Git機能)

行のハイライト部分を左クリックで内容を確認できます。
また、コミット前の変更を部分的に戻すことも可能です。（緑の追加行、赤の削除行も同様）

Ctrl + Zではできないような巻き戻しも可能 というのが優れもの。

Setting View: WhiteSpace

拡張機能ではないですが、VSCodeの設定で半角空白を可視化しておく。

設定前

設定方法

Ctrl + Shift + P でコマンドパレットを開いて、「空白文字」と入力して検索、Enterで実行

設定後

半角の空白文字が薄い・で可視化されました。

半角スペースの数がいくつ入っているのか見やすくなる。また、全角スペース入っているのに気づかないなどを防げる。
しかしながら、VSCode Version 1.63から全角スペースがハイライトされるようになったので、設定する意味が薄れました。

とはいえ、他のIDEやテキストエディタなどでも同様に可視化設定できたりするものが多いので、こういう設定を知っておいてほしいです。（他のテキストエディタで全角スペースが可視化されているとは限らないです。）

code-eol (改行コードの可視化)

開いているファイルの改行コードは右下に出てるんですが、うっかりしがち。
改行コードという存在の意識付けのためにも可視化をオススメ。

デフォルトだとちょっとまぶしい。

拡張機能の変更で変える

#777くらいの設定値が好き。

settings.json

+     "code-eol.color": "#777"

PHP、Laravel用の拡張機能

PHP Intelephense

似たようなのにPHP IntelliSenseというのがあるのですが、私はPHP Intelephenseの方が好き。

Laravel Sailで利用する際にも、PHP本体のインストールは要らなかったはず！
この拡張機能ひとつで色々やってくれる😍

機能

Google翻訳してコピペしたもの。よく使う機能には👍入れています。

ドキュメント、ワークスペース、および組み込みのシンボルとキーワードの高速キャメル/アンダースコアケースコード補完 (IntelliSense)と、use 宣言の自動追加。 👍
ドキュメント、ワークスペース、および組み込みコンストラクター、メソッド、および関数の詳細なシグネチャ (パラメーター) ヘルプ。
迅速なワークスペース全体の定義サポートに移動します。 👍
ワークスペース全体ですべての参照を検索します。 👍
高速キャメル/アンダースコアケースのワークスペースシンボル検索。 👍
パンくずリストとアウトラインUIも強化する完全なドキュメントシンボル検索。
エラートレラントパーサーと強力な静的分析エンジンによる、開いているファイルの複数の診断。 👍👍
ロスレス PSR-12 互換のドキュメント/範囲フォーマット。 HTML/PHP/JS/CSS ファイルを組み合わせたフォーマットも。👍
埋め込まれたHTML/JS/CSS コードインテリジェンス。 👍
公式の PHP ドキュメントへのリンクを含む詳細なホバー。 👍👍
参照とキーワードのスマートな強調表示。 🤔
テンプレートと呼び出し可能な署名 をサポートする高度なPHPDoc 型システム。👍
改善された型分析と提案のためにPHPStormメタデータ を読み取ります。🤷‍♂️

静的分析診断に関して

未導入の場合

エラーに気付けなかった。。

拡張機能有効にするとコード上で赤い破線で教えてくれる！

コピペしてuse漏れてるという超あるあるを防げます。

参照の検索、コード補完とuse宣言の自動追加

Ctrl + space で出てくる。

選択すると、自動でuseを追加してくれる！

ホバー参照、ジャンプ

見たいクラスをホバーする。

「Ctrlを押しながら左クリック」でクラスファイルにジャンプできるようになる。素敵。

フォーマット

Ctrl + Alt + F でフォーマット可能です。コードを整形してきれいにしましょう。

パンくずリスト

未導入の場合

拡張機能有効の場合

Laravel Extension Pack

Laravelの開発に有用な拡張機能12個の詰め合わせ。私なりの簡単な説明を記載しておきます。詳細は各拡張機能のリンクから確認してください。

12個の拡張機能たち

Laravel Blade Snippets: blade記法などのsnippet補完入力が可能になる👍(Ctrl + space)
Laravel Snippets: Laravelでよく使うメソッドなどのsnippet補完入力が可能になる👍
Laravel Artisan: コマンドパレットからartisanコマンドが打てる。Laravel Sailだと基本使えない🙄(Sail使ってて、artisanコマンドが分からなくなったらsail artisan listかGoogle検索しましょう)
Laravel Extra Intellisense: 文字列''として囲った設定値の値の補完入力候補を出してくれる場合がある。例えばenv('APP_')など補完入力候補出してくれるようになる。バリデーションルールも保管してくれる👍
Laravel goto view: web.phpやController内に記載する`view('welcome')'などでCtrl押しながら左クリックでその名前のbladeファイルにジャンプできる👍
Laravel goto controller: あまり使わない。web.phpで文字列で囲ったコントローラー名にジャンプできる。が、Route::get('/user', [UserController::class, 'index']);といった風に書けば、後述の拡張機能が入っていればジャンプできる🙄（あと公式のリンクが2023/02/12時点で404になっている🙄）
DotENV: .envファイルに色が付いて見やすくなります🥳
laravel-goto-components: bladeコンポーネントにジャンプできる👍
Laravel Blade formatter: bladeファイルに対するフォーマッタ。blade記法+HTMLフォーマット🥳
Laravel Create View: bladeファイルの作成にイチイチresourceフォルダまで行って、新規作成せずに、コマンドで新規作成できる👌(Ctrl + Shift + P のコマンドパレットからLaravel: Create Viewで呼び出し可能)
Laravel Blade Wrapper: bladeファイルで@if...@endifなどのblade記法を追加したい場合に追加する箇所を選択し、Ctrl + Shift + T で選択した部分をblade記法で囲ってくれる。
EditorConfig for VS Code: 改行コード、インデントスタイルなど指定できる。Laravelに限らずそこそこ色々なプロジェクトで使われてると思います🥳

PHP Debug

概要

VSCodeでデバッグ実行ができるようになります。

Laravel Sailでの導入方法

自分で調べて導入するのなかなか難しいです。
私の記事を参考にどうぞ！

※Laravel Sail以外の環境の導入方法はGoogle検索など活用して自分で調べて導入してください。

注意

拡張機能のインストールはWSL側で有効になっていること。よしなにボタンとかが出てくるので難しくはないです。

おわりに

その他HTMLタグ編集が楽になったりするものとか、便利なものはたくさんあります。
キリがないので、私のオススメはこのくらいで🙏