VS Code 擴充推薦 - Live Server

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

本文環境 #

• macOS
• VS Code
• 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 會自動打開 1 個瀏覽器頁面顯示結果：

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

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

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

修改 Live Server 設定 #

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

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

停止 Live Server #

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

總結 #

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

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

以上！

Enjoy!

References #

Live Server