Mac Ventura用Live Server一键联动HTML和CSS改动

配置VS Code与Live Server可实现HTML/CSS实时预览。安装Ritwick Dey开发的Live Server插件，右键HTML文件选择“Open with Live Server”，保存代码后浏览器自动刷新。确保启用Auto Save和最新版本设置，地址栏显示5500端口即正确启动，支持局域网多设备同步预览，提升前端开发效率。

Mac上使用VS Code配合Live Server实现HTML和CSS实时预览，操作简单且高效。只要设置正确，保存代码后浏览器会自动刷新，无需手动刷新页面。

安装VS Code和Live Server

确保已安装最新版的Visual Studio Code。打开扩展面板（快捷键 Cmd+Shift+X），搜索 “Live Server” 并安装由 Ritwick Dey 开发的官方插件。

启动本地服务器预览页面

打开你的HTML文件，在编辑器中右键选择 “Open with Live Server”，Live Server会默认在 http://127.0.0.1:5500 启动一个本地服务，浏览器自动打开页面。

• 修改HTML或CSS后，保存文件（Cmd+S）
• 浏览器会立即刷新，显示最新效果
• 支持多个设备同步查看（同一局域网下可用IP访问）

常见问题与设置建议

若页面未自动刷新，检查以下几点：

• 确认HTML文件已通过Live Server打开（地址栏应为5500端口）
• 关闭浏览器缓存，或尝试硬性刷新（Cmd+Shift+R）
• 在VS Code设置中搜索“live server”, 确保启用了“Auto Save”和“LiveServer: Use Latest Version”

基本上就这些，配置一次之后每次开发都能一键启动，提升前端调试效率。