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(アンチウイルスソフト)に関する警告が表示されます。
ほとんどのWindowsPCにはDifenderか何かしらのアンチウイルスソフトウエアが搭載されているのでそれについての警告です。
Program Filesにはインストールしないことが推奨されています。
インストール先
基本的にデフォルトのままでいいと思いますが、Select Componentの画面ではTomcatは使わないのでチェックを外しておきます。(任意)
インストール先は C:\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
- Download php_xdebug-2.9.1-7.2-vc15-x86_64.dll
- Move the downloaded file to C:\xampp\php\ext
- 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をダウンロードし、インストーラーに沿ってインストールを完了します。
途中で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開発環境の設定が終わりました。
少し長かったですが、これで学習環境が整いました。
あとは頑張ってコードを書いていきましょう。