使用vscode達到 php 運行 live-server
====
###### tags `vs code` `PHP` `Live Server`

## 前言
之前直接使用瀏覽器打開的方式，算是很簡單上手，只需要安裝套件即可。html屬於用戶端（Client-side），都是在客戶端進行不會有server端的問題，

可是php屬於伺服器端（Server-Side），從前端頁面變化到伺服器、資料庫的變動，live-server上的適用各家都在努力，現在VScode可以將php的檔案運行live-server，使開發PHP連動的前端網頁非常便利！

__省去[存檔]->去頁面按重新整理->再debug的手續時間__

把成功安裝的過程記錄下來：

- 系統：
MacOS
- 本機伺服器環境(local server environment)：
docker下運行PHP+Mysql+Apache
- 編輯器(IDE)：
VSCode - https://code.visualstudio.com/
- 瀏覽器(Broswer)：
Google Chrome

## 過程

1. 安裝好開發要件
VSCode、Docker、Google Chrome，並且讓Docker On

2. 安裝套件
* VSCode裡請安裝`Live-Server`
https://github.com/ritwickdey/vscode-live-server


* Chorme請安裝`web Extension`，[連結Chrome](https://chrome.google.com/webstore/detail/live-server-web-extension/fiegdmejfepffgpnejdinekhfieaogmj/)

* VSCode 環境設定

`Preferences → Settings`

`User Tab → Extensions → Live Server Config `

裡面的`Use Web Ext`，要打勾
還有Host要修改成自己環境的設定路徑，是要`localhost`還是`127.0.0.1`
開啟`Edit in settings.json` 裡設定
新增 `liveServer.settings.port": 5500`,請調整為 "5500" 埠號

* 瀏覽器 Extension 環境設定

1. 滑鼠將拉霸向右開啟
2. 實際專案路徑，注意這邊不是填docker裡build的port
3. Live-server中設定的port,根據之前設定是`5500`
4. 專案資料夾用VSCode開啟之後，按底部的"Go Live"，會看到starting...-> port:5500

並跳出視窗來，代表成功啟動 Live-server

5. 點開Live-server所跳出的視窗.php檔，卻會出現下載的提示，讓我驚恐到底是啥？不是沒作用，回到用docker所開啟的localhost網頁，重新整理可以看到存檔即可改變頁面，上路囉！

上是使用VScode開發php完成存檔即時變更頁面的設定過程，主要參考[這篇](https://kingweblife.blogspot.com/2018/11/vscode-php-live-server.html)作者文章而完成，感謝！