WindowsにLaravel Sailで開発環境を構築した後、Visual Studio Code（VS Code) を使ってプロジェクトを編集する方法を解説します。
Laravel SailでVisual Studio Codeを使ってプロジェクトを編集する方法
① 拡張機能のインストール
Laravelの公式マニュアルでは、Remote Developmentという拡張機能を使うように書かれています。
もちろん、WSL2インストール内に作成されたLaravelアプリケーションファイルを修正することができる必要があります。これを実現するには、MicrosoftのVisual Studio Codeエディターと、リモート開発用のファーストパーティ・エクステンションを使用することをお勧めします。
引用元：https://laravel.com/docs/9.x#getting-started-on-windows
そこで、本記事ではこの拡張機能を使用していきます。
まずVisual Studio Codeの拡張機能で、Remote Developmentを検索し、インストールをします。
② プロジェクトを開く
インストール後、下記画面になります。左下の緑色のインジケーターをクリックします。
上部にメニューが表示されます。【Connect to WSL】を開いてください。
WSLに接続された画面が表示されます。「フォルダーを開く」（下記赤枠部分）をクリックします。
上部に「フォルダーを開く」が表示されます。選択肢（下記黄色枠部分）から、編集したいプロジェクトを選択します。
*以前のバージョンでは、【WSLでフォルダーを開く】というメニューでした。この場合には、フォルダー選択画面が表示されるので、そこから、編集したいプロジェクトを選びます。
③ コマンドを使ってプロジェクトを開く
VS Codeは、コマンドを使って開くこともできます。Remote Develepmentをインストール後、 Laravel Sailを落とします。
sail down
また Dockerを止めて、wsl をシャットダウンしておきおます。
wsl --shutdown
Shut Downをしておかないと変更が反映されません。
その後、Dockerを起動し、Ubuntuを起動します。プロジェクトの場所に移動した後、code コマンドを実行します。
Visual Studio Codeが起動し、プロジェクトが開かれます。
Laravel Sailでphp artisan コマンドを実行するには
なおLaravel Sailの場合には、php artisan コマンドではなく、デフォルトでは ./vendor/bin/sail といれます。
./vendor/bin/sail artisan route:list
メンドウなので、設定を変更することで、sailと入れられるようになります。
設定変更により、上記のコマンドであれば、下記のように入力できます。
sail artisan route:list
設定方法は、下記の「BASHエイリアスを作ってSailコマンドの入力をラクにする」をご覧ください。
もし「sailじゃなくて、php artisan コマンドを使いたい！！」という場合には、sail bashコマンドを実行します。
sail bash
これによって、php artisan コマンドが使えるようになります。たとえばルート一覧を見るには、下記のコマンドを実行します。
php artisan route:list
sail shellコマンド実行モードをやめたいときには、exitと入れればOKです。
さいごに
以上、Laravel SailとVS Codeの便利な連携方法をご紹介してきました。
参考になれば嬉しいです。
Laravelを使って開発環境を構築したら、次に実際にWebアプリを作っていきましょう。
LaravelでまだWebアプリを作ったことがない場合には、「Laravelの教科書」という学習サイトを活用してください。
Laravelの教科書では、実際のフォーラムサイトを作っていきます。
【フォーラムサイトの画面例】
どんな内容かご興味あれば、下記案内ページを見てみてくださいね。基礎編は無料です。
★追記：2022年10月28日
Laravel 公式マニュアルに沿って、記事を大幅に書き替えました。
