Visual Studio CodeでPHP

お問い合わせ

当サイトはVisual Studio CodeでのPHP開発環境の構築、使い方、その他もろもろを紹介しています。

XAMPPのインストール

追記:2017年07月現在、XAMPPをインストールしないでも、「PHP IntelliSense」でコードの実行も行えます。

XAMPPとは?

XAMPPとは、Windows上で、手っ取り早くApache,MySQL,PHP,Perl環境を構築するソフトウェア・アプリです。

XAMPPのダウンロード

XAMPPから「Windows向けXAMPP」をダウンロードしてください。 バージョンはおそらく最新版で良いはずですが、念のため当サイトでインストールしたバージョンを記述すると「5.6.24」になります。

XAMPPのインストール

ダウンロードしてきた「xampp-*-installer.exe」をダブルクリックで実行します。 なお、当サイトでは「xampp-win32-5.6.24-0-VC11-installer.exe」でした。 画面に沿ってフォルダ構成はデフォルトのままインストールしてください。
※別にデフォルトでなくても構いませんが、当サイトの記述のままコピーペーストして設定してもデバッグは出来なくなります。

XDebugのインストール…は不要です

XDebugとは、PHPのコア開発者が作成しているPHPのデバッグ用の拡張モジュールです。 Visual Studio CodeでPHPデバッグを行う際に必要となりますが、XAMPPに付属して付いてくるのでインストールの必要はありません。 ただし、XAMPPのデフォルトの設定では無効になっていることから、有効にするための設定は必要になりますのでご注意ください。

XAMPP上でXDebugを有効にする

以下の内容のPHPファイルを「test.php」という名前で作成してください。


<?php
    phpinfo();
?>

XAMPPを起動し、XAMPPのコントロールパネルからApacheのConfigをクリックします。
XAMPP コントロールパネル
php.iniの最終行に以下を追加し保存してください。

[XDebug]
zend_extension="C:\XAMPP\php\ext\php_xdebug.dll"
xdebug.remote_enable=On
xdebug.remote_host="localhost"
xdebug.remote_port=9000
xdebug.remote_handler=dbgp

ApacheをXAMPPのコントロールパネルから再起動(Stop→Start)して下さい。
先ほど作成したtest.phpをC:\xampp\htdocsに保存してください。
ブラウザを立ち上げ、「http://localhost/test.php」にアクセスしてください。 以下の項目が表示されていればXDebugは有効になっています。
XDebug インストール
なお、Visual Studio CodeでPHPデバッグを行う場合、XAMPPのApacheは動かし続けておく必要があります。

XAMPPがすぐStopしてしまう方へ

XAMPPがすぐStopしてしまう場合、ポート80番を何かで使用している可能性があります。 有名なのはSkypeです。 タスクマネージャーを立ち上げ、詳細をクリックし、ポート80番で使用しているアプリケーションを止めてください。 なお、Skypeは立ち上げるポートを80番から変更することが出来ます。

Skypeの立ち上がるポートを80番から変更する場合

ツール→設定→詳細→接続→追加の受信接続にポート80と443を使用するのチェックを外す です。

Visual Studio CodeのXDebugを有効にする

最後に、Visual Studio CodeからXDebugを使えるようにします。

  1. Visual Studio Codeを立ち上げ、ファイル→基本設定→ユーザ設定を選択します。
  2. settings.jsonというファイルが右側に開かれますので、以下の設定を記述し保存してください。 バックスラッシュは2つ重ねて必要です。ご注意ください。
    
    {
        "php.validate.executablePath": "C:\\xampp\\php\\php.exe"
    }
    
  3. 左のアイコンから拡張機能(上から5つ目・一番下)を選択し、PHPと入力すると、 PHP Debug (Debug support for PHP with XDebug)という項目が出てきますので、 インストールして有効にした後、Visual Studio Codeを再起動してください。
  4. 続けて、左のアイコンからデバッグ(上から4つ目・下から2つ目)を選択します。
    設定アイコン(歯車のマーク)をクリックして、「PHP」を選択してください。
  5. launch.jsonというファイルが開きますので、以下のように修正し保存してください。 (恐らくデフォルトから変わっているところはserverSourceRootとlocalSourceRootのみです。)
    
    {
        "version": "0.2.0",
        "configurations": [
            {
                "name": "Listen for XDebug",
                "type": "php",
                "request": "launch",
                "serverSourceRoot": "/xampp/htdocs",
                "localSourceRoot": "${workspaceRoot}",
                "port": 9000
            },
            {
                "name": "Launch currently open script",
                "type": "php",
                "request": "launch",
                "program": "${file}",
                "cwd": "${fileDirname}",
                "port": 9000
            }
        ]
    }
    

PHPデバッグのやりかた

お疲れさまでした。上記までで、PHPデバッグが行えるようになっています。 最後にPHPデバッグのやりかたを説明します。

  1. 左のアイコンからデバッグ(上から4つ目・下から2つ目)を選択します。
  2. フォルダを開けと言われますので、「ファイル→フォルダを開く」でデバッグしたいPHPファイルの入っているフォルダを選択してください。
  3. Listen for XDebugを選び(デフォルトでそうなっていますが)、デバッグの隣の緑色の▶をクリックしてください。
以上です。試しにしっかりと動いているか確かめるため、わざとPHPを間違えてセーブし、デバッグしてみてください。 設定が正しければ、デバッグコンソールにエラーの内容が表示されます。

生活・資格・勉強

はじめてのシリーズ

株関連サイト

口コミサイト

ページのトップに戻る