Live Server插件可实现网页实时预览。在VS Code中安装后，右键HTML文件选择“Open with Live Server”，保存代码时浏览器自动刷新，支持端口设置与禁用自动打开浏览器，提升前端开发效率。

写网页时，每次修改都要手动刷新浏览器太麻烦。Live Server插件能帮你省去这一步，保存代码后浏览器自动更新，实时看到效果。下面教你如何使用它。

安装 Live Server 插件

Live Server 是 Visual Studio Code 的一个扩展，先确保你已经安装了 VS Code。

• 打开 VS Code 编辑器
• 点击左侧活动栏的扩展图标（四个方块组成的图标）
• 搜索 “Live Server”
• 找到由 Ritwick Dey 开发的 “Live Server” 插件
• 点击 “Install” 安装

启动服务器并预览网页

安装完成后，就可以快速启动本地服务器。

• 打开一个包含 HTML 文件的项目文件夹
• 右键点击你要预览的 HTML 文件（比如 index.html）
• 选择 “Open with Live Server”

浏览器会自动打开，地址通常是 http://127.0.0.1:5500 开头，并加载你的页面。

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

自动刷新功能怎么用

这是 Live Server 最实用的功能——边改边看。

• 保持浏览器页面打开
• 回到 VS Code 修改 HTML、CSS 或 JavaScript 代码
• 保存文件（Ctrl + S 或 Cmd + S）
• 浏览器会立即刷新，显示最新效果

这个过程无需手动操作，特别适合前端调试和学习。

常见问题与设置建议

遇到打不开或端口冲突？可以调整设置。

• 如果默认端口被占用，VS Code 会自动换一个
• 想指定端口：进入设置搜索 “live server settings”，修改 “Live Server > Settings: Port”
• 不想自动打开浏览器？关闭 “Live Server > Settings: Don't Open When Start” 选项
• 支持静态资源访问，图片、CSS、JS 都能正常加载

基本上就这些。Live Server 简单好用，是前端开发的必备小工具。不复杂但容易忽略细节，比如必须通过 HTML 文件启动，不能直接在 CSS 上右键。用熟了效率提升很明显。