上一篇完成XAMPP伺服器的環境架設，那今天就要來介紹PHP的編譯器如何與XAMPP做搭配。
上一篇 : 網頁設計Day01-環境架設
編譯器準備
首先需要準備VS CODE
下載路徑 : https://code.visualstudio.com/
圖一 VS CODE下載畫面
下載插件與設定
安裝完成後，到extension的地方搜尋「open php」找到下方的插件做安裝。
圖二 Open PHP/HTML/JS in browser
由於Apache port預設為80的關係，在上一篇避免與其他伺服器產生衝突已經把port修改成8080，所以來到設定的部分找到Open-PHP-HTML-JS-in-browser:Custom Host。
圖三 Open PHP/HTML/JS in browser修改設定位置
Open-PHP-HTML-JS-in-browser:Custom Host也要跟著修改成localhost:8080(預設為localhost:80)。
圖四 Open-PHP-HTML-JS-in-browser:Custom Host設定位置
圖五 Open-PHP-HTML-JS-in-browser:Custom Host修改成localhost:8080
如果沒修改的話，開啟php檔就會發現，伺服器無法連線。
圖六 伺服器無法連線畫面
設定完成就可以到vs code打開C:\xampp\htdocs的資料夾，在這個路徑下增加php檔開始第一支php程式。
圖七 第一支php程式
DocumentRoot（文件根目錄）的設定
在 Apache 伺服器的設定檔（httpd.conf）中，有一個指令叫做 DocumentRoot。
預設情況下，XAMPP 將這個路徑指向 C:\xampp\htdocs。
當你在瀏覽器輸入 localhost 時，伺服器就會自動到這個資料夾裡找對應的檔案。
圖八 文件根目錄設定
如果在第一篇安裝環境時有修改到其他位置(例如D槽)時，就可以在httpd.conf或者是到插件設定的地方找到Open-PHP-HTML-JS-in-browser:Document Root Folder做修改。
圖九 Open-PHP-HTML-JS-in-browser:Document Root Folder修改根目錄畫面
最後點擊左下角Open in Browser，php檔成功被解析🎉。
本篇文章到這裡就結束了，下一篇會開始介紹PHP的語法，如果喜歡我的文章或覺得有用的話，歡迎追蹤，我們下篇文章見🙌。
