【PHP】VSCODEの設定 – PHP –

VSCODE

はじめに

VSCODEのインストール後、PHP開発を行う設定について説明します。

拡張機能のインストール・設定

日本語化

VSCODEを起動します。
起動後、次の画面の赤枠箇所をクリックします。

赤枠のテキストボックスに「japan」と入力し、表示された次の拡張機能を選択し、「install」ボタンをクリックします。

Japanese Language Pack for Visual Studio Code

拡張機能のインストール後、赤枠の「Restart」ボタンが表示されるので、クリックします。
VSCODEの再起動後、日本語表示になります。

PHPの拡張機能のインストール

PHPの拡張機能のインストール手順は日本語化と同様です。
PHPを使いやすくするため、次の拡張機能をインストールします。

拡張機能名説明
PHP Intelephenseコード補完、キーワードの強調表示、メソッドのヘルプなどの
コード入力を支援してくれる
PHP DebugVSCODE上でPHPのXDebugを使用し、デバッグができる機能
インストール後の設定も必要。
設定はXDebugを参照。
PHP DocBlockerコメント入力補完をしてくれる
PHP Class Generatornamespaceとクラス名を補完した空のクラスを作ってくれる
PHP Namespace Resolverコードに書いたクラス名からnamespaceのインポートを
挿入してくれる
PHP import checkeruseでインポートしているが、未使用のクラスをハイライトしてくれる

XDebug

拡張機能「PHP Debug」はインストールしただけでは使用できないため、次の設定を行います。

PHP情報の取得

XAMMPでApacheを起動し、下記のURLにアクセスします。
http://localhost/

この記事は、XAMPPのインストールフォルダ・Apache・PHPの設定を変更していない場合の手順で記載しています。
設定を変更している場合には記事の内容を読み替えて実行してください。

次のページが表示されるため、赤枠の箇所をクリックします。

下記のページが表示されます。
Ctrl+aボタンで全体のページを選択し、Ctrl+cボタンでコピーします。

XDebugのダウンロード・設定

下記のURLにアクセスします。

Xdebug: Support — Tailored Installation Instructions
Xdebug: A powerful debugger for PHP

次のページが表示されるので、Ctrl+cボタンでコピーした情報をCtrl+vボタンでテキスト欄に貼り付けます。

Ctrl+vボタンの実行後、ページをスクロールして赤枠の箇所をクリックします。

クリック後、次のページが表示されます。

ページをスクロールし、下記の赤枠の箇所をクリック、XDebugをダウンロードします。

ダウンロードするXDebugのファイルは環境によって異なります。


ダウンロードファイルは下記の場所に格納します。
C:\xampp\php\ext

格納後、VSCODEを起動します。
VCODEの起動後、ファイル>ユーザー設定>設定を選択します。
選択後に表示された次の画面で赤枠の箇所をクリックします。

拡張機能からPHPを選択します。

「settings.jsonを編集」を選択します。

表示された画面で赤枠の箇所に次の内容を入力し、保存します。

"php.validate.executablePath": "C:\\xampp\\php\\php.exe"

phpでXDebugが動作させる設定内容を確認します。
次の画面の赤枠で囲っている拡張機能「PHP Debug」をクリックします。

表示された画面をスクロールし、赤枠で囲った個所のphp.iniに設定する内容を確認します。

設定内容の確認後、次のPHPの設定ファイルを開きます。
C:\xampp\php\php.ini

php.iniの最後に次の内容を記載し、保存します。

[XDebug]
xdebug.mode = debug
xdebug.start_with_request = yes
xdebug.client_port = 9000
zend_extension = C:\xampp\php\ext\php_xdebug-3.0.4-7.4-vc15-x86_64.dll

php.iniに設定する内容はPHPのバージョン、使用する環境で異なります。
特にzend_extensionはダウンロードしたXDebugのファイル名を指定してください。

php.iniの設定終了後、Apacheを再起動し、設定を反映します。

XDebugの動作確認

XDebugが正常に動作しているかどうか次の手順で確認します。

VSCODEを起動し、ファイル>フォルダを開く選択し、次のフォルダを開きます。
C:\xampp\htdocs

フォルダを開いた後、次のようなPHPのコードを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テストページ</title>
</head>
<body>
<h1>テストページ</h1>
<?php
$str_var = "ハロー";

printf("hello world.<br>\n");
printf("挨拶:%s<br>\n",$str_var);

?>
</body>
</html>

ここではファイル名は「test.php」で保存します。

ファイルの保存後、赤枠の箇所(この画像では14行目の赤丸)をクリックします。
赤丸はブレークポイントと呼びます。

赤枠の箇所をクリックします。

「launch.jsonファイルを作成します。」をクリックします。

次の画面が表示されます。

PHPファイルのタブを選択し、右三角印の「Listen for XDebug」をクリックします。

ブラウザを起動し、下記のURLを入力します。
http://localhost/test.php

VSCODEで次の画像のようにブレークポイントで処理を止まれば、XDebugが正常に動作していることが確認できます。

SourceTreeとの連携

SourceTreeの場合、VSCODEの初期設定ではGitが動作しません。
次の画面のように画面左の赤枠の箇所をクリックすると、画面下部に”インストールされているGitが見つかりません”のメッセージが表示されます。

SourceTreeと連携できるように次のように設定します。
ファイル>ユーザー設定>設定を選択します。
選択後、拡張機能>Git>settings.jsonで編集を選択します。

次の画面が表示されます。

git.pathにSoureTreeのインストールフォルダ内のGit.exeを入力します。

ファイルを保存し、VSCODEを再起動します。
再起動後、赤枠の「リポジトリを初期化する」をクリックします。

リポジトリが正常に作成されると次のような画面が表示されます。
これでVSCODEとSoureTreeが連携されるようになります。

最後に

この記事ではVSCODEでPHP開発を行う設定について説明しました。
拡張機能のインストール、PHPのデバッグ「XDebug」を使用することにより、開発しやすい環境が作れるため、記事の内容を見て設定することをおすすめします。

コメント