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完成存檔即時變更頁面的設定過程，主要參考這篇作者文章而完成，感謝！

Last changed by 
 
吳曙帆
0
1
5358
Published on HackMD