VS Code 擴充推薦 - Live Server

Posted on  Feb 9, 2024  in  VS Code , VS Code 擴充推薦  by  Amo Chen  ‐ 2 min read

如果只是想要用 VS Code 預覽某些樣板、測試 html 語法,想要有個簡單的 Web Server 幫助瀏覽結果的話,可以參考使用本文介紹的 Live Server 擴充。

本文環境

Live Server

Live Server 是 1 款 VS Code 的擴充,可以幫開發者架設 1 個 Web Server 顯示開發中的 .html , .htm 網頁,並且在存檔時自動 reload 網頁,可說是前端工程師的好朋友!

知名前端打包工具 Webpack 也有相似的 plugin 稱為 “DevSever” ,如果你的開發環境已經有使用 DevServer 就不需要這個擴充,使用 Live Server 最方便之處在於不需安裝 Webpack 與設定 DevServer, 適合單純的前端介面開發工作。

啟動 Live Server

安裝完成之後,只要打開 1 個 .html 或者 .htm 檔案,並且在 VS Code 右下角點 Go live 的按鈕,即可啟動 Live Server:

live-server-go-live.png

成功執行的話, Live Server 會自動打開 1 個瀏覽器頁面顯示結果:

live-server-demo.png

p.s. 可以看到它預設會使用 5500 通訊埠,如果你有其他應用程式也使用 5500 通訊埠,就可能無法正常運作,可以到設定修改通訊埠的設定。

接下來只要 .html , .htm 檔案有任何修改,在存檔時瀏覽器就會自動重新整理,提升我們的開發效率。

live-server-reload.png

你也可以只針對單一檔案使用 Live Server, 只要在檔案名稱上按右鍵,可以選擇 Open with Live Server :

live-server-open-with-live-server.png

修改 Live Server 設定

修改 Live Server 的設定,只要按下 Command + , 打開設定,並且搜尋 live server 即可找到 Live Server 相關設定:

live-server-settings.png

譬如通訊埠、打開瀏覽器的指令等等,都可以在 Live Server 的設定中修改。

停止 Live Server

停止 Live Server 的方式很簡單,可以使用 Command Palette 輸入 Stop Live Server 選擇 Live Server: Stop Live Server 之外,也可以點選 VS Code 右下角的 Port: 5500 按鈕停止:

live-server-stop.png

總結

Live Server 是 1 款輕便的前端開發工具,如果你只是想要預覽某些樣板、測試 html 語法等, Live Server 不失為 1 項簡單的選擇。

如果你的開發環境相當複雜,譬如需要同時執行前後端或者需要像 Webpack 這種全方位的打包工具,那麼 Live Server 就不適合使用。

以上!

Enjoy!

References

Live Server

對抗久坐職業傷害

研究指出每天增加 2 小時坐著的時間,會增加大腸癌、心臟疾病、肺癌的風險,也造成肩頸、腰背疼痛等常見問題。

然而對抗這些問題,卻只需要工作時定期休息跟伸展身體即可!

你想輕鬆改變現狀嗎?試試看我們的 PomodoRoll 番茄鐘吧! PomodoRoll 番茄鐘會根據你所設定的專注時間,定期建議你 1 項辦公族適用的伸展運動,幫助你打敗久坐所帶來的傷害!

贊助我們的創作

看完這篇文章了嗎? 休息一下,喝杯咖啡吧!

如果你覺得 MyApollo 有讓你獲得實用的資訊,希望能看到更多的技術分享,邀請你贊助我們一杯咖啡,讓我們有更多的動力與精力繼續提供高品質的文章,感謝你的支持!