〔筆記〕使用vscode達到 php 運行 live-server ，存檔即時變更頁面

〔筆記〕使用vscode達到 php 運行 live-server ，存檔即時變更頁面

  11/16/2018    King Tzeng

---

今天要來紀錄怎麼使用VSCode達到 php 運行 live-server ，存檔即時變更

因為在撰寫html上，html屬於用戶端（Client-side），作業上都是在客戶端進行不會有server端的問題，所以進行存檔頁面即變更較為簡易，網路上也有很多套件可以用 。

可是在php上，php屬於伺服器端（Server-Side），一變更小則前端頁面變化大則連動到伺服器、資料庫的變動，所以在live-server上的可行性一直以來都是一個問題！

不過現在VScode做到了可以將php的檔案運行live-server，在開發上順暢很多！
也大大縮短了時間，不用在存檔→去頁面按重新整理→在debug了～

現在就來紀錄設定過程。

簡述我的開發環境

- 系統：
MacOS

- 編輯器(IDE)：
VSCode - https://code.visualstudio.com/


- 本機伺服器環境(local server environment)：
MAMP - https://www.mamp.info/en/


- 瀏覽器(Broswer)：
Google Chrome

設定過程

1.首先先安裝好開發要件
VSCode、MAMP、Google Chrome都先下載安裝完畢

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

安裝完成後VSCodec會請你Reload一下，讓套件生效。

瀏覽器方面則需要裝Web Extension，看你用哪種瀏覽器，現在好像只有Chrome和Firefox有而已，筆者是用Chrome瀏覽器來做開發，所以待會也會用Chrome來Demo。

．連結如下 Store Links
Chrome : https://chrome.google.com/webstore/detail/live-server-web-extension/fiegdmejfepffgpnejdinekhfieaogmj/
Firefox : https://addons.mozilla.org/en-US/firefox/addon/live-server-web-extension/

3.環境設定

- VSCode 環境設定-

選到VSCode的設定

Preferences → Settings

選到User Settings → Extensions → Live Server Config 

裡面有一個

Settings: Use Web Ext 

You have to install a browser extension. That will be works for your dynamic pages (like PHP).

這個選項請打勾勾

Settings: live-Server Host 選項
因為我習慣用"localhost"當Domain，所以我是設定"localhost"，當然要看你是用什麼server的整合環境，是用"127.0.0.1"還是"localhost"來作調整，因環境而異。

Settings: HostTo switch between localhost or 127.0.0.1 or anything else. Default is 127.0.0.1

localhost

Settings: live-Server port 選項
這個沒有在ui的調整介面裡，在設定檔的json裡設定，那port的部分請調整為走 "5500" 埠號

以上的設定都可以在json檔裡做直接設定，如下

"liveServer.settings.host": "localhost",

"liveServer.settings.port": 5500,

"liveServer.settings.useWebExt": true

- MAMP 環境設定-

我是用Apache，不是Nginx，設定為80port即可

- 瀏覽器 Extension 環境設定-

設定方式如圖所示

運行啟動

先啟動本機Server的服務，開啟MAMP把服務先開啟

再把專案資料夾用VSCode開啟之後，

按下下面的"Go Live"，會看到starting... → Θ5500port的轉變，

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

然而，當我們點開Live-server所跳出的視窗.php檔，卻會出現下載的提示出來是怎麼回事呢？

不是沒作用，我們要回到用MAMP server所開啟的localhost目錄下，開啟剛剛的專案就可以進行Live-server的功能了，可以看到存檔即變更頁面，非常的方便！

以上就是整個使用VScode開發php，並達到存檔即時變更頁面的設定與注意過程！
這邊要感謝Turking網友大大的指導，得以讓開發變更順利～感謝您^^

--------------------------------------------------------
做圖和寫文很累，如果有分享的需求請載明來源出處，
請勿盜圖與拷貝，尊重著作者～感謝您^^

© 圖為 曾英綺 版權所有，請勿盜圖等相關動作
[ 著作權為 Ying-chi Tzeng 曾英綺 所有，轉載請告知 ]
--------------------------------------------------------