Windows 10 home + XAMPP + VSCodeで作るデバッグできるPHP開発環境

PHP
2020.01.26

VisualStudioCodeで作るPHP環境

普段はUbuntu＋Docker+PhpStormで開発を行っていますが、専門学校や職業訓練の指導で採用しているWindows + XAMPP＋VSCodeの環境を整理しておきます。

OS Windows 10 home
XAMPP XAMPP for Windows 7.2.26
Visual Studio Code User Installer最新版
Composer 最新版

XAMPPのインストール

インストーラーに従いXAMPPをインストールします。
UAC(アンチウイルスソフト)に関する警告が表示されます。

UAC警告

ほとんどのWindowsPCにはDifenderか何かしらのアンチウイルスソフトウエアが搭載されているのでそれについての警告です。
Program Filesにはインストールしないことが推奨されています。

インストール先

基本的にデフォルトのままでいいと思いますが、Select Componentの画面ではTomcatは使わないのでチェックを外しておきます。(任意)

インストール先は C:\xampp とします。

過去にインストールしたことがある場合は同名のディレクトリがあり警告される場合がありますが、エクスプローラーから削除しておけば大丈夫です。

XAMPPインストール

VisualStudioCode(User)をインストール

VisualStudioCodeにはシステム全体にインストールするSystem InstallerとユーザーディレクトリにインストールするUser Installerがあります。どちらでもいいと思いますが、ここではUser Installerを使用します。

インストールは基本デフォルトのまま進めてOKです。

VisualStudioCodeの初期設定

VisualStudioCodeは標準が英語メニューです。
Extensionsタブから日本語プラグインを追加します。

日本語化プラグインを追加するとVSCodeの再起動が求められます。
起動後はメニューが日本語化されています。

その他PHP開発に必要なプラグイン

  • PHP IntelliSense(felixfbecker)
  • PHP Debug(felixfbecker)
  • PHP Extension Pack(felixfbecker)

上記はVSCodeでPHP開発をする場合の定番プラグインです。
同じ名前のプラグインが登録されていますが、felixfbeckerさん作の物を使用しています。
個人的にはBracket Pair Colorizer(括弧の開く閉じるを色分け)を追加しています。

setting.jsonを編集

VSCodeの設定ファイルを編集します。
ファイルメニューから基本設定>設定
右上の設定(UI)を開くアイコンをクリック。

setting.jsonが開きます。
以下を書き加えます。json形式ですのでご注意ください。

"php.suggest.basic": false,
"php.validate.executablePath": "C:/xampp/php/php-win.exe",
"php.executablePath": "C:/xampp/php/php-win.exe",

動作確認 VisualStudioCode+XAMPP

システム環境変数の設定

システム環境変数にPHPのPathを設定します。
設定することでターミナルやコマンドプロンプトからphpコマンドを呼び出すことが可能です。設定しないとC:\xampp\phpまで移動する必要があります。

Windowsメニュー隣ので環境変数を検索するとメニューへのリンクが見つかります。

上の画面はユーザー単位での設定、下の画面はコンピューター全体の設定です。
基本は上のユーザー側に設定を加えます。Path(赤枠)を選択して編集をクリックします。

「新規」をクリックし、新しく行が作成されますので「C:\xampp\php」を追加します。
OKをクリックし画面を閉じVSCodeを再起動して変更を読み込ませます。

バージョンの確認

VSCodeでターミナルを立ち上げます。
ターミナルメニューから新しいターミナルです。
画面下部にターミナルが現れます。(PowerShell)

PS C:\Users\myUser> php -v
PHP 7.2.26 (cli) (built: Dec 17 2019 15:29:10) ( ZTS MSVC15 (Visual C++ 2017) x64 )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies

php -vと入力してPHPのバージョンが帰ってくれば動作しています。

Xdebugのインストール

PHPの定番デバッカーXdebugをXAMPPにインストールします。
Xdebugのインストールウィザードを利用します。

dllを取得

ターミナルに php -i を入力します。

PS C:\Users\myUser> php -i
phpinfo()
PHP Version => 7.2.26

System => Windows NT X280-LOCAL 10.0 build 18362 (Windows 10) AMD64
Build Date => Dec 17 2019 15:24:08
Compiler => MSVC15 (Visual C++ 2017)
Architecture => x64
..........................................
..........................................

画面の関係で省略していますが、かなりの行数が出力されますが、全てコピーしてください。

Xdebugのインストールウィザードを開き、入力欄にすべて貼り付けます。

ページ下部のAnalyse my phpinfo() output

をクリックします。

Summary

  • Xdebug installed: no
  • Server API: Command Line Interface
  • Windows: yes – Compiler: MS VC 15 – Architecture: x64
  • Zend Server: no
  • PHP Version: 7.2.26
  • Zend API nr: 320170718
  • PHP API nr: 20170718
  • Debug Build: no
  • Thread Safe Build: yes
  • OPcache Loaded: no
  • Configuration File Path: C:\WINDOWS
  • Configuration File: C:\xampp\php\php.ini
  • Extensions directory: C:\xampp\php\ext

Instructions

  1. Download php_xdebug-2.9.1-7.2-vc15-x86_64.dll
  2. Move the downloaded file to C:\xampp\php\ext
  3. Edit C:\xampp\php\php.ini C:\WINDOWS\php.ini and add the line
    zend_extension = C:\xampp\php\ext\php_xdebug-2.9.1-7.2-vc15-x86_64.dll

出力結果です。リンクからdllを取得、xampp\php\extに保存します。

php.iniの編集

xampp\php\php.iniに変更を加えます。(末尾に追記)

[xdebug]
zend_extension = C:\xampp\php\ext\php_xdebug-2.9.1-7.2-vc15-x86_64.dll
xdebug.default_enable = 1
xdebug.idekey = "vscode"
xdebug.remote_enable = 1
xdebug.remote_port=9000
xdebug.remote_autostart=1

再起動

設定ファイルを読み込ませるためXAMPPのApacheとVSCodeを再起動します。

VSCodeでデバッグを試す

デバッグ設定

VSCodeの左メニューからデバッグアイコンを選択。

初回はデバック用の構成ができていません。
「フォルダーを開く」をクリックするとlaunch.jsonファイルが作成されます。
デバッグ環境が現れます。

設定アイコン(緑の三角の右側にある歯車のアイコン)をクリックするとlaunch.jsonが表示されます。

{
  // IntelliSense を使用して利用可能な属性を学べます。
  // 既存の属性の説明をホバーして表示します。
  // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Listen for XDebug",
      "type": "php",
      "request": "launch",
      "port": 9000
    },
    {
      "name": "Launch currently open script",
      "type": "php",
      "request": "launch",
      "program": "${file}",
      "cwd": "${fileDirname}",
      "port": 9000
    }
  ]
}

Listen for XDebugはWebサーバーと連携してデバッグする場合、
Launch currently open scriptはファイル単体でデバッグする場合の設定です。

デバッグの確認

テスト用のファイルを作成します。
debug.phpとし簡単な条件分岐を記述しておきます。

<?php
$a = true;
if($a){
  echo "this is a";
} else {
  echo "this is b";
}

行番号の右をクリックし、ブレークポイント(例では二行目)に設定しています。
左のパネルのデバッグをクリックし、デバッグモードに切り替えます。

デバッグの構成を単体ファイル用(Launch currently open script)に切り替えます。
緑色の矢印をクリックしデバッグを実行します。

2行目でプログラムが止まっているのを確認します。
続いてステップオーバー(赤丸)をクリックしプログラムを進めます。

3行目のif($a){で停止しました。
続いてステップオーバーをクリックしてプログラムを進めます。

IF文の条件が成立するので4行目が実行されます。
もう一度ステップオーバーでプログラムを進めます。
5行目、6行目は実行されずプログラムは終了します。

これでVSCodeのデバッグモードが正しく動作していることが確認できました。

Composerのインストール

ComposerはXAMPPではなくWindows環境にインストールされます。
公式サイトの手順に沿ってインストールをします。
Composer-Setup.exeをダウンロードし、インストーラーに沿ってインストールを完了します。

Composer

途中でPHPのインストール場所の入力を求められます。
自動でXAMPPのPHPが選択されていました。

インストールが終わったらいったんサインアウト(または再起動)をしてください。

動作確認はVSCodeのターミナルでcomposerコマンドを入力し確認します。

PS C:\Users\MyUser\Desktop> composer
   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /    
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/     
                    /_/
Composer version 1.9.2 2020-01-14 16:30:31

まとめ

お疲れ様でした、これでVSCode+XAMPPによるPHP開発環境の設定が終わりました。
少し長かったですが、これで学習環境が整いました。

あとは頑張ってコードを書いていきましょう。

タイトルとURLをコピーしました