Live Preview插件可实现在VSCode中实时预览HTML/CSS/JS文件：需先安装官方插件，再通过命令面板（Cmd+Shift+P→Live Preview: Show Preview）或右键菜单（Open with Live Server）启动；支持自定义端口与浏览器，并需注意相对路径引用以避免跨域问题。
如果您在VSCode中编写HTML、CSS或JavaScript文件，但无法即时查看页面渲染效果，则可能是Live Preview插件未正确启用或配置。以下是启用并使用该插件的多种方式：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装Live Preview插件
Live Preview是VSCode官方维护的轻量级预览工具，无需外部服务器即可启动本地预览服务。它通过内置HTTP服务器将当前文件以网页形式展示，并自动刷新内容变化。
1、打开VSCode，点击左侧活动栏中的扩展图标（四个方块组成的图标）。
2、在搜索框中输入Live Preview，找到由Microsoft发布的官方插件。
3、点击“安装”按钮，等待安装完成。
4、安装完成后，重启VSCode确保插件完全加载。
二、通过命令面板启动预览
该方法适用于任意已保存的HTML文件，不依赖右键菜单，适合键盘操作习惯用户。插件会在当前工作区根目录下启动一个静态服务器，并映射到本地端口。
1、使用快捷键Cmd+Shift+P（macOS）或Ctrl+Shift+P（Windows/Linux）打开命令面板。
2、输入并选择Live Preview: Show Preview。
3、VSCode将在右侧新标签页中打开实时预览窗口，URL显示为http://localhost:54321/xxx.html。
三、右键菜单快速预览
当编辑器中已打开一个HTML文件时，可通过上下文菜单直接触发预览，避免调用命令面板，提升操作效率。
生成Claude风格的精美单页HTML汇报文件。当用户需要生成"汇报"、"周报"、"月报"、"项目进度"、"复盘"、"演示"、"slide deck"、"状态报告"、"工作总结"时触发。支持6种模板：周报(weekly)、项目进度(project)、月度总结(monthly)、复盘报告(postmortem)、演示文稿(slid
1、在编辑器标签页或资源管理器中，右键点击目标HTML文件。
2、在弹出菜单中选择Open with Live Server（注意：此项仅在文件已保存且扩展名为.html时可见）。
3、浏览器将自动打开新窗口，显示当前页面渲染结果，并监听后续保存动作。
四、配置默认预览端口与浏览器
Live Preview支持自定义端口和默认打开的浏览器，防止端口冲突或适配个人偏好。配置项写入VSCode用户设置JSON中，影响全局行为。
1、按下Cmd+, 打开设置界面，点击右上角“打开设置（JSON）”图标。
2、在settings.json中添加以下字段：
3、设置端口："livePreview.port": 8080。
4、指定浏览器："livePreview.defaultBrowser": "chrome"（可选值包括firefox、safari、edge）。
五、处理跨域或样式未生效问题
某些CSS导入、字体引用或fetch请求可能因预览服务的CORS策略或路径解析限制而失败。此时需调整资源引用方式以匹配预览服务器的根路径结构。
1、检查所有相对路径是否以./或/开头，避免使用绝对路径如C:/project/style.css。
2、将CSS文件引入改为：<link rel="stylesheet" href="./style.css">。
3、若使用@import引入字体，确认字体文件位于同一目录或子目录，并在@import语句中使用相对路径。
