分享一个VSC的网页好用扩展-LiveServer++

大家在使用VSCode做网站的时候是不是经常头疼于无法实时预览已经做了的网页，即使直接打开html文件也无法应用外链的css样式与js逻辑，那么，这就是本文的重点，这款扩展可以解决你的烦恼。

Live Server

在说Live Server++之前，咱们先来聊一聊Live Server，Live Server是一款可以非实时预览网站的扩展，激活后会在本地IP创建一个5500的端口地址，浏览器访问127.0.0.1:5500或localhost:5500即可预览。

但是，文件需要保存后才可预览，一次两次无所谓，但每次都需要按一次Ctrl+S难免不方便，在多个文件未保存时还需要挨个保存，非常麻烦。扩展作者应该也是意识到了这点，于是推出了Live Server++扩展。

本文主要讲解的是Live Server++扩展，这里就不对Live Server扩展的安装与使用进一步讲解。

Live Server++

Live Server++扩展完美的解决了Live Server无法实时预览的问题，Live Server++是直接读取内存，因此可以不保存实时预览。为了端口不冲突，Live Server++用的是3000端口而非Live Server的5500端口。

以下，为大家演示Live Server++扩展的使用教程：

1. 打开VSCode的扩展商店搜索“Live Server++”

   

2. 安装扩展（示例中已安装）并根据提示重启IDE

   

3. 生效后左侧列表会出现如图标识

   

4. 打开后点击“Start Server”并选择一个html文件（确保项目文件夹中至少存在一个html文件，嵌入的html（如php文件中的）无效）作为初始页面（不影响切换其他页面）

   

   

5. Live Server++会在本地IP创建一个3000的端口地址，应该会自动打开默认浏览器（127.0.0.1:3000或localhost:3000均可）

   

完成以后，你编辑的内容就会实时在此地址呈现，可以随时不用保存就预览。建议将IDE与浏览器左右分屏使用，这样就可以实现边写边阅，效果最大化！

需要注意的是，当您打字速度过快或从其他地方复制内容时，Live Server++可能来不及读取，因此会出现不一致的情况，这时候只需要造成一次变化即可，如打一个字符再删除，Live Server++在变化后就会重新读取，从而恢复。

还有，当html闭合标签不正确时，Live Server++可能会异常读取，导致将自身源码当作内容显示，这时候只需造成一次变化即可（如上所述），若仍未恢复也不必紧张，只需刷新一下页面（如浏览器的刷新键）即可。

有了这个扩展，你就不必将精力放在如何预览上，从而让你能更专注于代码逻辑和样式设计，提升开发效率。最后，祝你开发顺利！

© 2026 小满工作室. All rights reserved.