Visual Studio Codeを使ったPHPの開発環境の構築 (Windows, Mac)

Visual Studio Code を使って PHP のプログラムを開発するための環境構築方法について紹介していきます。Windows と MacOS 上での構築が対象ですが、Linux でも同様にできると思います。

目標

この記事では、以下の 2 つを実現できるようにすることが目標です。テスト！

PHP のコード補完（インテリセンス / Intellisense）を有効にする
XDebug と連携したデバッグを有効にする

なお、PHP のバージョンは、7.0 を対象としています。

環境構築

Visual Sutido Code と XAMPP をインストールします。

おそらく、インストーラの指示に従って普通にインストールすれば大丈夫だと思います。XAMPP は「7.0.15 / PHP 7.0.15」を選択しました。なお、この記事では、Windows の場合、XAMPP をデフォルトの「C:\xampp」にインストールしたものとして進めていきます。MacOS の場合も同様にデフォルトの「/Applications/XAMPP」にインストールしたものとします。

インテリセンスを有効にする

Visual Studio Code では、デフォルト状態でもそれなりにインテリセンスが効きますが、「PHP Intellisense」を入れることでより賢くなります。

Visual Studio Code に、「PHP Intellisense」プラグインを追加します。そして、Visual Studio Code の環境設定に以下を追加します（設定しない場合、Visual Studio Code から警告が出ます）。

Windows の場合

"php.validate.executablePath": "C:/xampp/php/php.exe",
"php.executablePath": "C:/xampp/php/php.exe",

MacOS の場合

"php.validate.executablePath": "C:/xampp/php/php.exe",
"php.executablePath": "C:/xampp/php/php.exe",

php.exe のあるディレクトリにパスが通っていると必要ないようですが、そうでない場合は「php.executablePath」に直接指定します。

以上の設定を行うと、PHP 環境でより賢いインテリセンスが効くようになります。

「PHP Intellisense」のほか、「PHP Intelephense」も良さそうです。双方比べたわけではないのですが、どうやら後者を入れると PHP のコード整形もうまくできるようになるようです。

デバッグ環境を整える

続いて、Visual Studio Code で、ブレークポイントの設定などを行えるようにします。

XDebug をインストール

PHP7 版の XAMPP には、XDebug が同梱されていません。まずは、こちらから対応するものをダウンロードします。

Xdebug – Debugger and Profiler Tool for PHP

Windows の場合

Windows （XAMPP は 32bit）版の PHP 7.0 版ものをベースにしていますので、XDebug も「PHP 7.0 VC14 TS (32 bit) 」をダウンロードしたものとして進めていきます。（PHP 7.0.15 、Xdebug 2.5.1 で動作を確認しています。）

ダウンロードした DLL ファイルを、「C:\xampp\php\ext」にコピーして、「php_xdebug.dll」と名前を変更します。

次に、php.ini に設定を追加します。php.ini は「C:\xampp\php」にあると思います。ポートは、標準？の 9000 を利用しますが、ふさがっている場合は別のポートを指定してください。

コード1: php.ini ファイルの設定 for Windows

[XDebug]
zend_extension = "C:\xampp\php\ext\php_xdebug.dll"
xdebug.remote_host = "localhost"
xdebug.remote_port = 9000
xdebug.profiler_append = 0
xdebug.profiler_enable = 1
xdebug.profiler_enable_trigger = 0
xdebug.profiler_output_dir = "C:\xampp\prof"
xdebug.profiler_output_name = "cachegrind.out.%t-%s"
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
xdebug.remote_handler = "dbgp"
xdebug.auto_trace = 1
xdebug.trace_output_dir = "C:\xampp\trace"
xdebug.idekey = "phpstorm"

以上の設定が終わったら、XAMPP （Apache）を再起動します。

MacOS の場合

まず、ダウンロードするバージョンを調べます。https://xdebug.org/wizard.php

XAMPP 7.0.15 / PHP 7.0.15 では、2017 年 3 月 7 日時点で最新の「xdebug-2.5.1」のソースコードで大丈夫でした。ダウンロードしたら、適当なフォルダに移動し、コンパイルします。ひとまず、デスクトップにおいた前提で進めていきます。

autoconf のインストール ( 参考 )

brew install autoconf

成功すると、ディレクトリに「configure」が生成されますので、それを実行します。

./configure

完了したら、Makefile のインクルードディレクトリを変更し、XAMPP の PHP を参照するように書き換えます。（筆者環境では、Makefile を書き換えないと、php.h が見つからないエラーなどが発生しました…）

INCLUDES = -I/Applications/XAMPP/xamppfiles/include/php -I/Applications/XAMPP/xamppfiles/include/php/main -I/Applications/XAMPP/xamppfiles/include/php/TSRM -I/Applications/XAMPP/xamppfiles/include/php/Zend -I/Applications/XAMPP/xamppfiles/include/php/ext -I/Applications/XAMPP/xamppfiles/include/php/ext/date/lib

書き換えが完了したら make します。

make

ビルドが成功すると、modules というディレクトリ下に「xdebug.so」というファイルが作成されます。そのファイルを、XAMPP の php のエクステンションにコピーします。筆者の環境では、「/Applications/XAMPP/xamppfiles/lib/php/extensions/no-debug-non-zts-20151012」というディレクトリにコピーしました。

so ファイルを移動したら、php.ini ファイルを編集します。「/Applications/XAMPP/xamppfiles/etc/php.ini」にありました。以下の設定を追加してください。

コード2: php.ini ファイルの設定 for Mac

[XDebug]
zend_extension = "/Applications/XAMPP/xamppfiles/lib/php/extensions/no-debug-non-zts-20151012/xdebug.so"
xdebug.remote_host = "localhost"
xdebug.remote_port = 9000
xdebug.profiler_append = 0
xdebug.profiler_enable = 1
xdebug.profiler_enable_trigger = 0
xdebug.profiler_output_dir = "/Applications/XAMPP/xamppfiles/prof"
xdebug.profiler_output_name = "cachegrind.out.%t-%s"
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
xdebug.remote_handler = "dbgp"
xdebug.auto_trace = 1
xdebug.trace_output_dir = "/Applications/XAMPP/xamppfiles/trace"
xdebug.idekey = "phpstorm"

zend_extension には、先程コピーした xdebug.so の絶対パスを指定してください。以上の設定が終わったら、XAMPP （Apache）を再起動します。

Visual Stuido Code に PHP Debug を追加

Visual Studio Code に、「PHP Debug」プラグインを追加します。特に設定は必要ありません。

Visual Studio Code から XDebug にアタッチ

launch.json に以下の構成を追加します。Visual Studio Code の [デバッグ] - [構成の追加] から PHP を選択すると、大枠が追加されますので、そこに、surverSourceRoot と localSourceRoot を追加すると簡単です。

{
    "name": "Listen for XDebug",
    "type": "php",
    "request": "launch",
    "port": 9000,
    "serverSourceRoot": "${workspaceRoot}",
    "localSourceRoot": "${workspaceRoot}"
}

あとは、F5 キーで「Listen for XDebug」でデバッグを開始すると、localhost で実行された php の実行にアタッチできます。例えば、以下のような感じです。

図1: Visual Studio Code でブレークポイントを設置