很多剛接觸前端的小伙伴們在開發 html 頁面的時候覺得調試很不方便。因為每一次進行html 代碼的更改的時候，要先保存 html 代碼，然后用瀏覽器打開這個代碼。而一個

html 頁面在開發的時候總要經歷很多次的修改，這時候刷新瀏覽器成了一種負擔。接下來小編帶來一款及其好用的插件—Live Server，使用這款插件后可以實現 html 實時加載。讓你能馬上看到更改后的代碼效果！

Live Server介紹

Live Server 是一個具有實時加載功能的小型服務器，使用它進行 web 頁面開發就好像在服務器上修改頁面一樣。同時它因為具有實時加載功能，代碼修改后頁面會進行實時刷新，可以直觀的看到網頁的修改效果。

安裝

在插件市場搜索 Live Server，點擊安裝即可。

使用

Live Server 不能加載單個頁面，只能加載文件夾。可以新建一個文件夾，然后用 VSCode 打開這個文件夾。就快要在這個文件夾內進行web頁面的開發了。

在寫完代碼需要查看效果的時候，可以使用以下幾種方式運行 Live Server：

右下角狀態欄有一個 ?Go Live? 按鈕，點擊即可運行(啟動后這個按鈕會變成 ?port：5500?，這說明服務器部署在?localhost：5500? 的端口下，再次點擊這個按鈕可以停止運行。此外也可以直接在瀏覽器通過訪問??localhost：5500? 來查看網頁)。

在資源管理器右擊對應的 html 文件后會出現如下右鍵菜單，?open with Live Server? 也可以啟動服務器(也可以使用指令進行執行)。

在代碼文件中右擊，可以看到如下彈出菜單，與上一種方法相似，可以找到啟動服務器的功能。不同的是，這個菜單還提供 ?Stop Live Server? 的按鈕，使用后可以關閉服務器(也可使用指令執行)。

注;可以同時啟動多個 Live Server，因此，端口號并不是固定的，但一般都是 5500 端口。另外，這個端口號可以設置，在 VSCode 配置文件中可以設置這個端口號，此處不多做深入介紹。

需要注意的坑：

在使用 Live Server 開發頁面的時候需要特別關注 html 與 css 中引用路徑的問題。有些時候引用路徑出現一些錯誤的時候，如果使用本地打開的方式會打開失敗，而 Live Server 有時候會忽視這種錯誤(能成功打開)。這并不是 Live Server 的問題，而是開發者自己的問題。所以在使用 Live Server 開發完代碼后，最好使用本地打開方式預覽一下頁面展示效果。

小結

使用 Live Server 可以實現 html 的實時加載，達到實時預覽的效果。配合 VSCode 的自動保存功能，可以做到 VSCode 寫完代碼，切換到瀏覽器頁面代碼即刻實時刷新的效果，大大方便了前端開發工作者的頁面調試。小編在此強烈推薦這款插件，希望各位讀者大大也能愛上這款插件。

更多優秀前端開發課程，盡在W3Cschool前端微課。

總結

以上是生活随笔為你收集整理的vs插件html,VSCode插件推荐-html实时加载插件-live server的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。