Laravel SailでVisual Studio Codeを使ってプロジェクトを編集する方法

Laravel Sail

WindowsにLaravel Sailで開発環境を構築した後、Visual Studio Code(VS Code) を使ってプロジェクトを編集する方法を解説します。

Laravel Sailを使った開発環境の構築方法は下記の記事を参考にしてください。

Laravel SailでVisual Studio Codeを使ってプロジェクトを編集する方法

Laravel Sailで作ったプロジェクトは、デフォルトでは、ネットワークの中のwsl/ubuntu/home/ユーザー名の中に入っています。

VS Codeを立ち上げ、File/Open Folderから、この場所 \\wsl\Ubunstu\home\ユーザー名 を開きます。

これでOKです。

Visual Studio CodeのターミナルでUbuntuを使う設定方法

Ubuntuをインストールすると、VS Code内のターミナルでUbuntuエディタを選べるかと思います。もし選べない場合、設定を変更する必要があります。

F1キーを押し、検索バーに terminal settingと入れます。

下のほうの Terminal > Integrated > Env: Windowsの Edit in settings.jsonをクリックします。

ファイルに下記を追加します。

ファイル保存後、VSコードを立ち上げなおします。

その後、ターミナルを開くと選択肢からUbuntuを選べるようになっています。

Laravel Sail使用時、VS Codeのターミナルでphp artisanコマンドを実行する方法

では最後に、実際にVS Code内のUbuntuターミナルで、php artisanコマンドを実行してみましょう。

あらかじめUbuntuを別途起動し、Sailを起動した状態にしておいてください。

VS Codeでは、プロジェクトを開いた状態で、ターミナルを起動します。

その後、コマンドを実行します。

たとえば php artisan route:listコマンドを実行する場合、下記を行います。

もしBASHエイリアスを作成している場合には、下記のように省略していれることもできます。

エイリアスの作成方法は、下記の「BASHエイリアスを作ってSailコマンドの入力をラクにする」をご覧ください。

あるいは、sail shellコマンドを実行後、通常通り、php artisan コマンドを使うこともできます。

sail shellコマンド実行モードをやめたいときには、exitと入れればOKです。

Laravel Sail使用時、VS Codeの反応が遅い時の対応

Visual Studioコードへの反応が遅いことがあります。もし「遅すぎる!」と思ったら、リフレッシュしましょう。それでもダメなら、リロードをしてみてください。

リフレッシュは、VS Codeの左側の下記ボタンを押します。

リロードは、Windowsの場合はCtrl + Shift + P、Macの場合はCmd + Shift + Pでコマンドパレットを開きます。「reload window」と入力します。

Junko
Junko

ちなみにわたしは、マイグレーションファイルを作ったときなど「遅すぎ!!」と感じました。

実際にファイルはできているようですが、VS Code上へ反映されるのに時間がかかったりするようです。

さいごに

以上、Laravel SailとVS Codeの便利な連携方法をご紹介してきました。

参考になれば嬉しいです。

Laravelを使って開発環境を構築したら、次に実際にWebアプリを作っていきましょう。

LaravelでまだWebアプリを作ったことがない場合には、「Laravelの教科書」という学習サイトを活用してください。

Laravelの教科書では、実際のフォーラムサイトを作っていきます。

【フォーラムサイトの画面例】

どんな内容かご興味あれば、下記案内ページを見てみてくださいね。基礎編は無料です。

Laravelの教科書について詳しく知る

Laravel Sail

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

Laravel関連のご相談承ってます♪
「Webアプリを開発してほしい」
「社内にLaravelが分かる人がいない。コンサルしてほしい」
そんな企業様のご依頼承っています。
お問い合わせはこちら
Laravel関連のご相談承ってます♪
「Webアプリを開発してほしい」
「社内にLaravelが分かる人がいない。コンサルしてほしい」
そんな企業様のご依頼承っています。
お問い合わせはこちら
Twitter始めました。
40代からプログラミング!

コメント

  1. kyz より:

    Laravel公式の手順で下記のように記載されています

    Developing Within WSL2
    Of course, you will need to be able to modify the Laravel application files that were created within your WSL2 installation. To accomplish this, we recommend using Microsoft’s Visual Studio Code editor and their first-party extension for Remote Development.

    https://laravel.com/docs/9.x#getting-started-on-windows

    MicrosoftのVisual Studio Codeエディターとリモート開発用のファーストパーティ拡張機能を使用することをお勧めします。

    OSのファイルシステムの違いによる変換で非常にファイルの読み書きが遅くなる問題があります
    ネットワークフォルダとして\\wsl$ にアクセスするのではなく、リモート開発用のVSCode拡張を入れて直接wsl内のファイルにアクセスすると非常に高速になるかと思いますがいかがでしょうか?

    • Junko Junko より:

      公式で紹介しているので、こちらを使ったほうが良さそうですね。
      確認してみます。ありがとうございます!

タイトルとURLをコピーしました