VS Code 教程：使用 Live Server 实现网页实时预览与自动保存（9）

一、为什么需要 Live Server？

在刚开始学习 HTML 的时候，很多同学可能都是这样操作的：

1. 写好一个 index.html 文件；
2. 在电脑里双击这个文件，用浏览器打开；
3. 修改代码后，保存 → 回到浏览器 → 手动刷新。

这种方式虽然能用，但问题很多：

• 效率低：每次修改都要来回切换窗口，手动刷新，很浪费时间。
• 体验差：容易忘记保存或刷新，结果看到的效果和代码不一致。
• 不真实：用 file:/// 打开的网页地址，其实和我们真正上线部署的网页环境差别很大。

💡 Live Server 插件的出现，就是为了解决这些痛点。它的好处有：

• 自动刷新，修改代码后只要保存，浏览器就会立刻更新；
• 打开的地址是 http://127.0.0.1:5500/...，模拟了真实的服务器环境；
• 整体开发体验更流畅，更接近专业开发流程。

可以简单理解为：Live Server 就是一个“小型本地服务器”，让你写代码的时候能立即看到效果，而不用不停手动刷新。

二、安装与启动 Live Server

既然 Live Server 这么好用，那我们就来安装一下吧。

1. 打开扩展市场

在 VS Code 左侧，你会看到一排图标：

• 文件管理（两个文件叠在一起的图标）
• 搜索
• 源代码管理
• 扩展（一个小方块叠加在大方块上的图标）

👉 点击 扩展，就能进入插件市场。

2. 搜索并安装插件

• 在搜索框里输入 Live Server。
• 你会看到有很多相似的插件，但记得选择下载量最高、作者是 Ritwick Dey 的那个。
• 点击 Install（安装） 按钮。

3. 启动 Live Server

安装完成后有两种方式可以启动：

方式一（右键启动）：

1. 在资源管理器中找到你的 index.html 文件；
2. 右键点击它 → 选择 Open with Live Server；
3. 浏览器会自动打开一个新页面，地址大概是 http://127.0.0.1:5500/index.html。

方式二（状态栏按钮）：

• 在 VS Code 窗口的右下角，会多出一个 Go Live 按钮；
• 点击它，也能直接启动 Live Server。

💡 小提示：如果你没有看到 “Open with Live Server”，请确认你是用 “打开文件夹” 的方式打开项目，而不是只打开单个文件。

三、保存即刷新：体验 Live Server 的魅力

安装并启动 Live Server 之后，你会注意到一件非常方便的事：

• 以前：每次修改代码 → 保存 → 回到浏览器 → 按 F5 或点击刷新按钮。
• 现在：只要在 VS Code 里 保存文件（Ctrl + S / Cmd + S），浏览器页面就会自动刷新，立刻展示最新效果。

这样一来，你可以做到：

• 边写边看：写一点 HTML 或 CSS，保存后马上就能看到变化；
• 减少出错：不用担心忘记刷新导致调试半天；
• 接近真实环境：使用的是 http://127.0.0.1:5500/... 这样的本地服务器地址，而不是 file:///C:/... 这种磁盘路径。

💡 举个例子：
假设你在 index.html 中写了一个标题：

<h1>Hello World!</h1>

• 如果你改成：

<h1>Hello VS Code!</h1>

• 只要保存一下，浏览器会立即显示新的标题，无需手动刷新。

这就是 Live Server 的核心功能 ——让开发过程更高效、更顺畅。

四、进一步优化：自动保存

虽然 Live Server 已经能做到 保存即刷新，但我们还是需要按下 Ctrl + S（或 Cmd + S）才能触发刷新。有没有办法让它自动保存呢？答案是：有！

1. 打开自动保存功能

有两种方式：

• 方式一：菜单栏
  点击顶部菜单 文件（File） → 自动保存（Auto Save），勾选即可。
• 方式二：设置里搜索
  按 Ctrl + ,（Cmd + ,）打开设置，在搜索框里输入 Auto Save，然后选择合适的选项。

2. 常见的几种保存模式

• off（关闭）：默认状态，需要手动保存。
• afterDelay（推荐）：延迟一会儿后自动保存。
• onFocusChange：当你切换到别的文件或应用时自动保存。
• onWindowChange：当你切换 VS Code 窗口时保存。

💡 对小白来说，最方便的就是 afterDelay。

3. 设置延迟时间

在设置里找到 Files: Auto Save Delay，单位是毫秒：

• 1000 = 1 秒
• 500 = 半秒

如果你想快速看到结果，可以设置为 500 毫秒。这样只要稍等半秒，文件就会自动保存 → 浏览器自动刷新，几乎就是“实时预览”。

4. 小提醒

• 延迟过短（比如 100ms）可能会导致频繁保存，不太必要；
• 使用 Git 的时候，频繁保存会让提交历史里出现很多小改动，可以考虑只在练习时打开自动保存，写正式项目时用手动保存更稳妥。

五、常见配置（settings.json 示例）

Live Server 默认的设置已经够用，但如果你想更符合自己的习惯，可以在 VS Code 的 settings.json 文件里做一些个性化配置。

1. 打开 settings.json

• 按 Ctrl + Shift + P（Mac 上 Cmd + Shift + P），打开命令面板；
• 输入 Preferences: Open Settings (JSON)，回车；
• 你就会看到一个 JSON 文件，这里可以写配置。

2. 推荐配置示例

在文件里添加如下内容：

{
  // 自动保存设置
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 500,

  // Live Server 相关设置
  "liveServer.settings.port": 5500,        // 默认端口
  "liveServer.settings.CustomBrowser": "chrome", // 指定用 Chrome 打开
  "liveServer.settings.ignoreFiles": [     // 忽略不需要监听的文件夹
    "**/.vscode/**",
    "**/node_modules/**",
    "**/*.scss"
  ],
  "liveServer.settings.wait": 100          // 延迟刷新时间（毫秒）
}

3. 这些配置的作用

• autoSave & autoSaveDelay：让文件在 500ms 后自动保存。
• port：指定 Live Server 使用的端口（默认 5500，如果被占用可以改成 5501/5502）。
• CustomBrowser：固定用 Chrome 打开页面，也可以换成 firefox、edge。
• ignoreFiles：忽略不必要的文件，比如 node_modules，避免无意义刷新。
• wait：当文件保存时，延迟一点点再刷新页面，避免过于频繁触发。

💡 你完全可以只用默认配置，但这些调整能让 Live Server 更贴近自己的使用习惯。

六、快捷键与 Emmet 高效写法

除了 Live Server 让我们“保存即刷新”之外，VS Code 还提供了很多 快捷键 和 Emmet 快速写法，能让我们写代码更快、更轻松。

1. 常用快捷键

以下是一些在写 HTML 时最常用的：

• 注释/取消注释：Ctrl + /（Mac：Cmd + /）
  👉 可以快速给代码加注释或取消注释。
• 格式化文档：Shift + Alt + F（Mac：Shift + Option + F）
  👉 自动对齐缩进，保持代码整洁。
• 复制当前行：Shift + Alt + ↓（Mac：Shift + Option + ↓）
  👉 不用选中，整行直接复制到下一行。
• 上下移动当前行：Alt + ↑ / ↓（Mac：Option + ↑ / ↓）
  👉 可以快速调整代码位置。
• 多光标编辑：按住 Alt（Mac：Option）点击多个位置
  👉 可以同时修改多处相同内容。
• 选中下一个相同单词：Ctrl + D（Mac：Cmd + D）
  👉 在修改多个相同标签或类名时特别好用。

2. Emmet 快速写标签

Emmet 是 VS Code 内置的一个缩写工具，它能帮你用极简语法生成完整的 HTML 结构。

常见写法：

• 输入 p + Tab → 生成 <p></p>
• 输入 h1 + Tab → 生成 <h1></h1>
• 输入 ul>li*3 + Tab → 生成一个含 3 个列表项的 ul：

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

• 输入 a[href=#] + Tab → 生成：

<a href="#"></a>

💡 小技巧：写结构时，不用先打 <p> 再补全，直接写 p 就行，速度会快很多。

3. 为什么要用 Emmet？

• 写法短，效率高；
• 特别适合快速生成模板结构；
• 越学越顺手，能让你写 HTML 的速度翻几倍。

七、常见问题与解决方案

在使用 Live Server 的过程中，你可能会遇到一些小问题，不用担心，下面总结了最常见的情况和对应解决方法：

1. 右键菜单里没有 “Open with Live Server”

• 原因：通常是你只打开了单个 HTML 文件，而不是整个项目文件夹。
• 解决方法：用 “文件 → 打开文件夹”（Open Folder）把整个项目文件夹打开，再试一次。

2. 点击 “Go Live” 没反应

• 原因：Live Server 默认端口（5500）被占用了。
• 解决方法：
  1. 打开设置（Ctrl + , / Cmd + ,）；
  2. 搜索 Live Server Port；
  3. 改成一个新的端口号，比如 5501 或 5502。

3. 修改代码后，浏览器没有刷新

• 检查点：
  • 文件是否真的保存了？（如果没开自动保存，需要手动 Ctrl + S）
  • 自动保存延迟是否设置太长？（推荐 500ms）
• 小技巧：如果偶尔卡住，可以手动刷新浏览器一次，再继续使用 Live Server。

4. 打开网页后，路径显示不对

• 原因：HTML 文件不在项目的根目录，路径相对位置错了。
• 解决方法：
  • 确认项目结构是否清晰，比如 index.html 放在根目录；
  • 如果要从子文件夹运行，可以调整 Live Server 设置里的 "liveServer.settings.root"。

5. 用的是 React / Vue / Angular 等框架

• 问题：这些框架有自己的开发服务器，Live Server 并不能很好支持它们的“热更新”。
• 解决方法：用框架自带的命令，比如：
  • React：npm start
  • Vue：npm run serve
  • Angular：ng serve

💡 总结一句：Live Server 适合学习和开发静态网页，如果你进入框架开发阶段，就要用框架自带的工具。

八、实操清单（照着做即可）

为了避免忘记步骤，这里整理了一份 实操清单。你可以打开 VS Code，一边看一边跟着操作：

1. 安装插件
   • 打开扩展市场，搜索 Live Server（作者 Ritwick Dey），点击安装。
2. 启动 Live Server
   • 打开你的项目文件夹（推荐用 “文件 → 打开文件夹”）；
   • 找到 index.html → 右键 Open with Live Server；
   • 或者点击右下角 Go Live 按钮。
3. 体验保存即刷新
   • 在 HTML 文件里改一个文字；
   • 按 Ctrl + S（Mac：Cmd + S）；
   • 浏览器页面会立刻自动更新。
4. 开启自动保存
   • 菜单栏 → 文件 → 自动保存，选择 afterDelay；
   • 在设置里把延迟时间改为 500ms，实现“几乎实时”保存。
5. 个性化配置（可选）
   • 打开 settings.json；
   • 添加端口号、固定浏览器、忽略文件夹等配置。
6. 练习快捷键与 Emmet
   • 用 Ctrl + /（Mac：Cmd + /）试试快速注释；
   • 输入 ul>li*3 + Tab，体验 Emmet 快速生成列表。

✅ 完成以上 6 步，你就已经掌握了 Live Server 的基本用法，并把 VS Code 打造成了一个“写一点 → 马上能看到结果”的高效开发环境。

✨ 给小白的建议：

• 一开始不要追求把所有配置都搞得很复杂，先用默认设置，体验“写 → 保存 → 自动刷新”这个流程。
• 熟练之后，再慢慢尝试自动保存、个性化配置、快捷键和 Emmet。
• 记住：开发工具的学习就是逐步优化自己的“工作流”，不用急于一步到位。

通过这一节，你已经掌握了 VS Code 中最实用的一个插件，也学会了如何让开发过程更加高效、顺畅。接下来，我们还会继续探索更多 VS Code 的功能和插件，让它真正成为你学习和开发路上的好帮手。