－Ben's PHOTO－

在前一篇文章介紹 PHP 的 IDE 神器「PHPStorm」，表示讚不絕口，然而，神器是必須付出代價的。就像 Office365 ，PHPStorm 也採用付費訂閱制，價格分別為月費 19.9 元，年費 199 元，第二年開始還有打折...噢，差點忘了說，這個價格是美金，這樣到底是貴還是便宜，只能說看人了，像我這種不能挑食的雜食工，PHP 只佔了工作與自學的一小部分，為此投入 19.9 鎂/月 或 199 鎂/年的學費，感覺很不划算。

雖然也有「快樂擁有神器」的方式，不過，快樂的時光總是短暫，時間到了，總得找好其他備案。有另一款亦稱神級且開源的開發神器：微軟出品的 Visual Studio Code（簡稱 VS Code），它也能做到 PHP 語法自動提示、Debug 斷點調試的功能。雖然 VS Code 是微軟出的，不過這玩意卻很大方的援其他平台，在 Windows、macOS、Linux 都能使用，不像 Visual Studio 總是只出現在 Windows 平台。

嚴格說來，Visual Studio Code 的原始功能只是增強版的文字編輯器，IDE 開發工具（Integrated Development Environment，整合開發環境）常見的Debug 調試與程式碼自動提示功能，必須透過外掛才能實現。也因為外掛，VS Code 可以寫的程式語言也不僅 PHP，業界主流常見的 C/C++/JAVA/Python/Swift... 都有，或許要反過來問：VS Code 不能寫什麼？（這時候，Object-C 默默舉手...）。

說了那麼多，真正的重點是：Visual Studio Code 是免費的！

廢話說完了，進入正題。要讓 Visual Studio Code 支援 PHP 開發的做法很簡單，不過設定的方式怪怪的，一旦忘記就會鬼打牆，所以開一篇文章來紀錄。

前情提要：依照前一篇文章的內容，安裝 XAMPP 、Xdebug 並設定完畢。

接著安裝 Visual Studio Code：過程也不提了，依照個人使用平台的不同，下載對應的版本，點擊就能安裝。

微軟 Visual Studio Code 下載&安裝

Visual Studio Code 的 PHP 開發環境設定

打開 Visual Studio Code 之後，先在 (下圖1.)市集搜尋「php」(下圖2.)，下載安裝「PHP IntelliSense」與「PHP Debug」（下圖3.）。PHP IntelliSense 提供自動提示 PHP 語法的功能，PHP Debug 就是串接 Xdebug  提供斷點調試、逐行偵錯的功能。

接著(下圖1.)開啟 PHP 專案的目錄(下圖2.)

之後在左邊看到 PHP 專案的目錄，底下有個齒輪（下圖紅框處），接下來要進入重點了。

點擊齒輪->設定（或是 Ctrl+,）

在設定的搜尋視窗輸入「 php 」(下圖紅框)

接著是重點中的重點。滑鼠移到「 PHP > Validate: Executable Path」這裏，會跑出一個齒輪，點擊它（這個步驟真的很機車，阿不就好險有滑鼠？用觸控螢幕就完了）

點擊齒輪，選擇「以 JSON 格式複製設定」

然後點擊項目下方的「在 settings.json 內編輯」

接著會開啟 Visual Studio Code 的設定檔（新版的 VS Code 就是這樣，settings.json 不是隨隨便便就能叫出來。）

把剛剛複製的 JSON 貼上（下圖紅框），記得要補上相關的「 , 」號（下圖綠框），以符合 JSON 格式。

然後，又一個重點來了，把 php.validate.executablePath 的值填入 php runtime 執行檔的完整路徑。以 macOS 版的 XAMPP 來說，路徑是 /Applications/XAMPP/xamppfiles/bin/php，如下圖：

接著 Ctrl+S 將 settings.json 存檔（標籤中的實心圓會消失，變成 x 符號），並關閉。

Debug 測試：

開啟要測試的 .php，在程式會執行到的路徑上，找一行，點擊行號左邊的空白處，標示為 break point 點。

點擊左邊的「虫+三角形」符號（下圖1.紅框），接著點擊「create a launch.json file」（下圖2.紅框）

接著中央會彈出選擇項目，點選「PHP」彈出 launch.json 之後，什麼都不用改，關閉即可（如果在前情提要安裝設定 Xdebug 的 port 也都是預設 9000 的話就不用改）。

此時左上方會新增一個「 RUN 三角形 Listen for XDebug」項目（下圖黃框）

將 launch.json 關閉，回到要偵錯的程式，點擊左上方的三角形（下圖紅框1.），會跳出調試的控制項，下方會出現橘色的調試狀態，此時就完成了 Xdebug 調試的準備動作。這點和 IDE 工具很不一樣，三角形箭頭按下去常讓人誤以為應該會啟動瀏覽器，結果沒有。

最後，也是容易卡關的地方：要自己去啟動瀏覽器，執行程式，瀏覽器的 XDebug 擴充功能也要打開！執行到 break point 的程式時會停住反白，左邊會出現相關的資訊，滑鼠移到變數上方也會顯示內容。

PHP IntelliSense 自動提示功能的調整：

啟動 PHP 的 IntelliSense 功能之後，若遇到自訂的類別時，提示仍然會跑出一大卡車不適合的 PHP 內建指令，但實際上我們只需要提示自訂類別的欄位變數。

可以在 settings.lson 項目（左下角齒輪），搜尋「php」項目，將 PHP > Suggest: Basic 取消勾選（下圖紅框）就行了。

這樣就不會被一堆不需要的內建選項給淹沒了。

後記：

Visual Studio Code 自 2015 年起橫空出世，有微軟爸爸的強大支援，近來頗有一統天下，殲滅第三方工具的態勢。

然而面世才短短五年之間，算是還很新的產品，所以近來改版的幅度也不小，如上面提到的設定，透過新版介面就得進行一連串騷操作，而網路找到的教程幾乎都還是舊版（2018 以前）設定方法，但無論哪一種方法都稱不上直覺易用，估計這個現象在未來的版本中還會繼續發生，這篇教學也許很快就不適用，所以現在還不算是真正的穩定版，是這個產品未來發展與推廣的隱憂。

2022.12.20 補充：VS Code 針對 PHP 已經有新的外掛，如下圖。它一次整合 PHP Intellisense 與 PHP Debug 兩個外掛，設定方式與上面差不多，不過輸入偵測與即時糾錯的功能更厲害，相當好用，頗有幹掉 PHPStorm 的態勢。