PHPでのVS Codeのホットリロード環境を構築しよう(mac x XAMPP)

説明

この記事はVisual Studio CodeでPHPの開発体験をさらに向上させるために、ホットリロード(コードの変更を検知した時点でブラウザの画面を更新してくれる)の環境を構築するための記事になります。
主にYoutubeの設定動画を取り組んでいただくための補助的なサンプルコード、関連ツールの案内のための記事になります。

設定動画

関連ツール

1. (VS Code側)Live Server：https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
2. (Chrome側)Live Server Web Extension：https://chrome.google.com/webstore/detail/live-server-web-extension/fiegdmejfepffgpnejdinekhfieaogmj/

コード

.vscode > settings.json のコード

settings.json

{
    // Mainly for static files
    "liveServer.settings.useWebExt": true,

    // This means that you change your real URL (current PHP url)
    // to another URL (which Live Sever starts).
    "liveServer.settings.proxy": {
        "enable": true,
        "baseUri": "/",
        "proxyUri": "http://localhost:<port ID>/<File Path>"
    },
    "php.validate.executablePath": "<php file path in bin in xampp>"
}

おまけ

※Youtubeの動画のOGPはMicrosoftのImage Creatorで作成してみました。(思った通りの画像をプロンプトから作成するの難しいですね😇)
https://www.bing.com/images/create