Live Server 是 VS Code 最轻量的实时预览插件，但需确保插件启用、项目以文件夹形式打开、入口为 index.html、路径用相对路径；端口冲突可改 settings.json；搭配 Auto Close Tag、Prettier、ESLint 可提升前端开发效率。
VS Code 本身不自带实时预览能力，Live Server 是最轻量、最常用的选择，但装上就用？不一定能跑起来——常见卡在端口被占、根路径错、HTML 文件没被识别为启动页这几个点。
Live Server 启动失败：检查 vscode-live-server 插件是否真生效
很多人点了右下角“Go Live”没反应，其实是插件没启用或配置冲突。确认方式很简单：
- 打开命令面板（
Ctrl+Shift+P或Cmd+Shift+P），输入Live Server: Start Server，看是否可执行 - 如果提示“command not found”，说明插件未启用：进设置 → Extensions → 搜索
ritwickdey.LiveServer→ 点击“Enable” - 若已启用但右键菜单无“Open with Live Server”，检查当前文件是否为
.html后缀，且未被其他插件（如 Auto Rename Tag）劫持右键上下文
页面刷新不生效 / 显示 404：注意工作区根目录和 index.html 位置
Live Server 默认把当前打开的文件夹当作 Web 根目录，所有相对路径都基于它解析。不是“打开单个 HTML 就能跑”。
- 必须用
File → Open Folder...打开整个项目文件夹，而不是只打开index.html - 确保入口文件名是
index.html（大小写敏感），否则访问http://127.0.0.1:5500/会 404；若要用其他名字（如main.html），需手动访问完整路径：http://127.0.0.1:5500/main.html - 引用 CSS/JS 时别写绝对路径如
/css/style.css（这会从服务器根找），应写相对路径：./css/style.css或css/style.css
端口被占用或想换端口：改 settings.json 而非重装插件
默认端口 5500 经常被 Docker、旧 Live Server 进程或其他工具占用，直接改配置比杀进程更稳。
立即学习“前端免费学习笔记（深入）”；
- 打开 VS Code 设置（
Ctrl+,），搜live server，点击右上角“Open Settings (JSON)” - 添加以下字段（已有则修改）：
{
"liveServer.settings.port": 8080,
"liveServer.settings.root": "./src",
"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito"
}
其中 root 可指定子目录为服务根路径（比如你把 HTML 放在 src/ 下）；AdvanceCustomBrowserCmdLine 可强制用 Chrome 无痕窗口打开，避免缓存干扰调试。
不止 Live Server：三个真正提升效率的配套插件
前端开发光有热更新不够，下面三个插件解决高频痛点，且无兼容冲突：
-
Auto Close Tag：自动补全 HTML 结束标签，写回车后自动生成 Prettier：保存时自动格式化 HTML/CSS/JS，避免手敲空格缩进争议；需在设置中开启"editor.formatOnSave": trueESLint：实时标出 JS 语法/逻辑错误（如console.log未删、变量未声明），配合.eslintrc.js配置使用效果最佳这些插件都依赖项目本地配置生效，尤其是 ESLint 和 Prettier，如果没看到报错或格式化，大概率是没在项目根目录放对应配置文件。
