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

Laravel Sailで環境構築!

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

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

① 拡張機能のインストール

Laravelの公式マニュアルでは、Remote Developmentという拡張機能を使うように書かれています。

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.

もちろん、WSL2インストール内に作成されたLaravelアプリケーションファイルを修正することができる必要があります。これを実現するには、MicrosoftのVisual Studio Codeエディターと、リモート開発用のファーストパーティ・エクステンションを使用することをお勧めします。

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

そこで、本記事ではこの拡張機能を使用していきます。

まずVisual Studio Codeの拡張機能で、Remote Developmentを検索し、インストールをします。

② プロジェクトを開く

インストール後、下記画面になります。左下の緑色のインジケーターをクリックします。

上部にメニューが表示されます。【WSLでフォルダーを開く】を選びます。フォルダー選択画面が表示されるので、そこから、編集したいプロジェクトを選びます。

③ コマンドを使ってプロジェクトを開く

VS Codeは、コマンドを使って開くこともできます。Remote Develepmentをインストール後、 Laravel Sailを落とします。

また Dockerを止めて、wsl をシャットダウンしておきおます。

Junko
Junko

Shut Downをしておかないと変更が反映されません。

その後、Dockerを起動し、Ubuntuを起動します。プロジェクトの場所に移動した後、code . コマンドを実行します。

Visual Studio Codeが起動し、プロジェクトが開かれます。

Laravel Sailでphp artisan コマンドを実行するには

なおLaravel Sailの場合には、php artisan コマンドではなく、デフォルトでは ./vendor/bin/sail といれます。

メンドウなので、設定を変更することで、sailと入れられるようになります。

設定変更により、上記のコマンドであれば、下記のように入力できます。

Junko
Junko

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

もし「sailじゃなくて、php artisan コマンドを使いたい!!」という場合には、sail bashコマンドを実行します。

これによって、php artisan コマンドが使えるようになります。たとえばルート一覧を見るには、下記のコマンドを実行します。

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

さいごに

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

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

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

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

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

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

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

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

 

★追記:2022年10月28日
Laravel 公式マニュアルに沿って、記事を大幅に書き替えました。

Laravel Sailで環境構築!

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

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

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

【無料プレゼント】

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

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

詳細はこちらをクリック

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

社内にWebアプリ開発経験がなくて、困ってませんか?

「自社で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をコピーしました