Try   HackMD

使用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. 安裝套件

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • Chorme請安裝web Extension連結Chrome

  • VSCode 環境設定

Preferences → Settings

User Tab → Extensions → Live Server Config

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

裡面的Use Web Ext,要打勾

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

還有Host要修改成自己環境的設定路徑,是要localhost還是127.0.0.1
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

開啟Edit in settings.json 裡設定
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

新增 liveServer.settings.port": 5500,請調整為 "5500" 埠號
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 瀏覽器 Extension 環境設定
    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
  1. 滑鼠將拉霸向右開啟

  2. 實際專案路徑,注意這邊不是填docker裡build的port

  3. Live-server中設定的port,根據之前設定是5500

  4. 專案資料夾用VSCode開啟之後,按底部的"Go Live",會看到starting-> port:5500

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

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

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

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

上是使用VScode開發php完成存檔即時變更頁面的設定過程,主要參考這篇作者文章而完成,感謝!