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」にインストールしたものとします。
[topBannar]
インテリセンスを有効にする
Visual Studio Codeでは、デフォルト状態でもそれなりにインテリセンスが効きますが、「PHP Intellisense」を入れることでより賢くなります。
Visual Studio Codeに、「PHP Intellisense」プラグインを追加します。そして、Visual Studio Codeの環境設定に以下を追加します(設定しない場合、Visual Studio Codeから警告が出ます)。
Windowsの場合
1 2 3 4 |
"php.validate.executablePath": "C:/xampp/php/php.exe", "php.executablePath": "C:/xampp/php/php.exe", |
MacOSの場合
1 2 3 4 |
"php.validate.executablePath": "/Applications/XAMPP/xamppfiles/bin/php", "php.executablePath": "/Applications/XAMPP/xamppfiles/bin/php", |
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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
[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のインストール (参考)
1 2 3 |
brew install autoconf |
解答したディレクトリに移動し、phpizeを実行 (XAMPPにインストールした方のものを使います)
1 2 3 4 |
cd ~/Desktop/xdebug-2.5.1/xdebug-2.5.1 /Applications/XAMPP/xamppfiles/bin/phpize |
成功すると、ディレクトリに「configure」が生成されますので、それを実行します。
1 2 3 |
./configure |
完了したら、Makefileのインクルードディレクトリを変更し、XAMPPのPHPを参照するように書き換えます。(筆者環境では、Makefileを書き換えないと、php.hが見つからないエラーなどが発生しました…)
1 2 3 |
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します。
1 2 3 |
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」にありました。以下の設定を追加してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
[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を追加すると簡単です。
1 2 3 4 5 6 7 8 9 10 |
{ "name": "Listen for XDebug", "type": "php", "request": "launch", "port": 9000, "serverSourceRoot": "${workspaceRoot}", "localSourceRoot": "${workspaceRoot}" } |
あとは、「F5」キーで「Listen for XDebug」でデバッグを開始すると、localhostで実行されたphpの実行にアタッチできます。例えば、以下のような感じです。
[bottomBannar]