前提条件

laradockの環境ができていること。
laradockの環境構築は探せばたくさん出てくるので各自行ってください。

XDebugのインストール

早速ですが、laradock/.envファイルをいじってもらいます。

WORKSPACE_INSTALL_XDEBUG=true
～中略～
PHP_FOM_INSTALL_XDEBUG=true

またlaradock/php-fpmとlaradock/workspaceにある xdebug.iniを以下のように編集します。
ここで重要なことはホスト名の指定です。私はこれをやらなくて1日無駄にしました。
たぶんコピペでも大丈夫だと思います。

PS:hibohibooさんの記事によると、ホスト名の指定は xdebug.remote_host=10.0.2.2じゃないとダメな環境もあるようです。ご指摘ありがとうございます。

xdebug.ini

; NOTE: The actual debug.so extention is NOT SET HERE but rather (/usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini)

xdebug.remote_host=host.docker.internal
xdebug.remote_connect_back=0
xdebug.remote_port=9001
xdebug.idekey=Listen for XDebug

xdebug.remote_autostart=1
xdebug.remote_enable=1
xdebug.cli_color=1
xdebug.profiler_enable=0

xdebug.remote_handler=dbgp
xdebug.remote_mode=req

xdebug.var_display_max_children=-1
xdebug.var_display_max_data=-1
xdebug.var_display_max_depth=-1

ここまでできたらdockerでbuildしましょう。
laradockのあるディレクトリに移動し以下を実行します。ここではApache2とmysqlにしていますが、各自環境によって変えてください。

> docker-compose up -d --build apache2 mysql

これでインストールができるはずです。
ネットワーク絡みのエラーが出たときは、dockerのsettingsのNetworkの項目のDNS serverを8.8.8.8にしてください。だいたいうまくいきます。

ではうまくできたか確認してみましょう。workspaseに入ってphpのバージョンを確認します。

> docker-compose exec workspace bash
# php -v
PHP 7.2.19-1+ubuntu16.04.1+deb.sury.org+1 (cli) (built: May 31 2019 11:16:55) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.2.19-1+ubuntu16.04.1+deb.sury.org+1, Copyright (c) 1999-2018, by Zend Technologies
    with Xdebug v2.7.1, Copyright (c) 2002-2019, by Derick Rethans

with Xdebugなんとかかんとかとかかれていればdocker側の設定はOKです。

VSCode側の設定

とりあえず、拡張機能を入れます。
今回はとりあえずPHP IntelliSenseとPHP Debugをいれましょう。拡張機能の検索のところからインストールしてください。

PHP IntelliSenseの導入

補完機能とかしてくれるやつです。
dockerとか関係なしにphpを入れなければなりません。
ここからダウンロードして適当な場所に解答してください。
そして、VSCodeの設定より、settings.jsonを開き以下を追記します。

settings.json

"php.validate.executablePath": "解凍先のパス\\php.exe",

これで補完機能が使えるようになります。

Xdebugの導入

さて、最後にXdebugの導入を行います。
ここで忘れてはいけないことが、プロジェクトフォルダをVScodeで開くことです。
エクスプローラー等でプロジェクトフォルダからVScodeで開いてください。
そして「デバッグ」→「構成の追加」でjsonファイルを編集します。

説明は他に譲るのでとりあえず以下をコピペ

launch.json


{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [


        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "pathMappings": {
                "/var/www/": "${workspaceFolder}"
            },
            "log": true,
            "port": 9001
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}

気をつける点は２つ。pathMappingsとportの部分です。
pathMappingsは右の/var/www/がdockerから見たプロジェクトの位置（困ったらworkspaceで入って確認してみてください）。一方の${workspaceFolder}がVScodeで開いているフォルダの位置を指定してください。
portは最初のxdebug.iniに指定したものと同じにしてください。

この辺を間違えるとデバックできません

これで設定完了です。虫マークの矢印ボタンを押せばデバッグができる・・・はずです。

試しにしてみましょう。

test.php

<?php
$a = 1;
$a = $a + 1;

echo $a;

ここで二つ目の$aの左横を指定してブレークポイントを指定します。
そして虫ボタンを緑三角をクリックしてデバック実行です。
test.phpをブラウザで立ち上げると・・・・ブレークポイントでとまりましたか？

うまくいけばこんな感じになります。

docker+laravel+VSCode+Xdebugという開発環境を作る

前提条件

XDebugのインストール

VSCode側の設定

PHP IntelliSenseの導入

Xdebugの導入