2019/01/17

[VS Code] 如何整合設定 PHP 的開發環境至 Visual Studio Code

最近在帶 Laravel 工作坊,有許多學員為非程式開發人員,在入門程式開發的過程中。要把開發環境設定完成,若不透過手把手帶領,可能要繞很大圈才有辦法完全設定完畢。

由於 Laravel 這個框架的底程程式語言為 PHP。就以 PHP 的開發環境來跟 Visual Studio Code 做整合介紹。

目的


以 Visual Studio Code 為我們整合的開發環境:Git, Terminal, PHP 的整合設定

這次介紹主要以 Windows 的作業系統平台來做範例。當然大多數的 Visual Studio Code 設定也適用於 Mac,只是在 Mac 的設定上會少很多 (主要是 Terminal 以 bash 為主,PHP 及 Git 的路徑設定在安裝完時已經 Ready 了)

環境

 https://www.laravel-dojo.com/opensource/wagon


 

Windows 使用者環境變數


在 Windows 會使用 cmd 命令提示字元 (在 Mac 稱為 Terminal 終端機) 來輸入指令。
如果是使用 wagon 裡面的 cmder 來輸入指令,基本上 PHP 及 Git 的路徑都已經設定好了,所以要下 php 或 git 的指令,甚至是 composer 也都沒有問題。

但是要整合在本機環境也可以用,環境變數的設定就不可或缺了!

Git 在安裝時,已經會自動加入系統環境變數,這個部分我們就不去變更啦~

現在只要把 PHP 及 Composer 指定進來 (以 wagon 的路徑為例)



我個人是把 wagon 放在系統 D 槽磁碟機 (D:\wagon)

PHP 在 wagon 的位置為:D:\wagon\uwamp\bin\php\php-7.1.10
Composre 在 wagon 的位置為:D:\wagon\composer

環境變數只需要指定到目錄層即可

環境變數設定步驟


本機 上按右鍵,選擇 內容



選擇 進階系統設定

選擇 環境變數


選擇變數為 Path 的選項,按 編輯


新增,把 PHP 跟 Composer 的路徑加上去即可


如此一來,開啟 cmd 命令提示字元 即可直接下達 php 及 composer 的指令了

到此為此的設定僅止於 cmd 知道的路徑而已,接下來我們要繼續為 Visual Studio Code 做一下整合設定。

Visual Studio Code 整合設定


開啟 Visual Studio Code,檔案 -> 喜好設定 -> 設定



在搜尋框裡輸入 php,找到以下選項 PHP Validate: Executable Path,點選在 settings.json 內編輯


開啟 settings.json 後,會分左右兩個視窗,左邊是預設值,右邊是使用者的設定
按左邊筆的圖示,選擇 複製到設定


路徑的內容改成如下圖


Terminal 設定


預設在 Windows 整合的 Terminal 為 PowerShell,若是要改成 cmd 或是 bash 可以搜尋 shell windows 來做變更設定



檢視 -> 終端機 開啟視窗 (會顯示在編輯器下方)



我個人習慣選擇 bash,因為我平常也用 Mac,指令才不會一下用 cmd 一下用 bash.




Git 設定


Visual Studio Code 本身就整合 Git 操作,預設 Git 路徑會抓系統安裝的 Git 路徑。
若未正確指定路徑,就無法正確使用介面上的操作。



編輯設定方法與 PHP 指定相同,就不再特別擷圖說明囉!

終於把所有的基本設定搞定啦!



結語


在 Windows 若要用指令,首先環境變數路徑的設定要先設好,以免下指令時找不到。
在 Visual Studio Code 則是設定: PHP, Git, 及 Terminal Shell 的執行檔路徑,明確告訴它,我要整合的工具在哪裡。

有疑問,歡迎留言提問囉!

延伸閱讀


沒有留言: