配置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”
