安装sublime并配置live server插件可实现实时预览。首先安装sublime text 3或4及package control，通过命令面板安装liveserver和可选的html-css-js prettify插件；其次确保项目含index.html，右键html文件选择view in live server启动服务，可自定义端口；其三是保存代码时live server检测变化并通知浏览器刷新页面；常见问题包括未正确保存、入口文件错误、非live server打开页面或端口冲突，需检查控制台报错并处理。
用 Sublime 搭配 Live Server 实现实时预览，其实并不难。只要配置好插件和环境，就能在你修改 HTML 或 CSS 文件后，浏览器自动刷新页面，提升开发效率。
下面我会从几个实际操作的角度出发，说说怎么做到这一点。
安装 Sublime Text 和必要插件
首先得确保你已经安装了 Sublime Text（推荐使用 3 或 4 版本）。然后需要安装 Package Control，这是管理插件的工具。
立即学习“前端免费学习笔记（深入）”；
如果你还没装 Package Control，可以去官网复制安装代码，在 Sublime 的控制台里运行。
接着通过 Package Control 安装以下两个插件：
- LiveServer：用于启动本地服务器并监听文件变化
- HTML-CSS-JS Prettify（可选）：格式化代码，方便查看
安装方法很简单，打开命令面板（
Ctrl + Shift + P），输入
Install Package Control或搜索插件名进行安装。
配置 Live Server 插件
安装完 Live Server 后，还需要做一些基础设置：
- 确保你的项目根目录下有
index.html
，这是默认入口文件。 - 打开一个 HTML 文件，右键 → 选择 View in Live Server，它会自动在默认浏览器中打开页面，并开启本地服务器。
- 如果你想自定义端口或者设置其他选项，可以在菜单栏点击
Preferences > Package Settings > LiveServer > Settings
进行配置。
比如你可以修改
"port"字段来更改服务器端口号，避免冲突。
小提示：如果你是前端开发新手，建议保持默认设置，先熟悉流程再调整配置。
修改代码后自动刷新是怎么实现的？
Live Server 的原理其实不复杂。它会在后台启动一个小型服务器，并监控当前项目中的 HTML、CSS 和 JS 文件变化。一旦发现改动，就会通知浏览器重新加载页面。
具体来说：
- 当你保存
.html
或.css
文件时，Sublime 会触发保存事件 - Live Server 检测到文件变动，发送刷新指令给浏览器
- 浏览器收到指令后自动刷新页面
这整个过程几乎实时，延迟非常小。
如果你希望只刷新部分区域而不是整页（比如调试 JS 时），可能需要结合更专业的工具如 Webpack Dev Server，但对大多数静态页面开发来说，Live Server 已经够用了。
常见问题及解决办法
有时候你会发现页面没有自动刷新，可能是以下几个原因：
- 没有正确保存文件（快捷键
Ctrl + S
） - 项目结构不规范，入口文件不是 index.html
- 浏览器没通过 Live Server 打开（手动输入地址会导致失效）
- 端口被占用，导致服务启动失败
遇到问题可以检查一下控制台输出（Sublime 底部状态栏或终端），看看有没有报错信息。
另外，如果使用 Chrome 浏览器，也可以尝试安装 LiveReload 插件作为备选方案。
基本上就这些。配置一次之后，以后每次开发 HTML 页面都可以直接用 Live Server 快速预览，省去了手动刷新的麻烦。虽然看起来简单，但确实是个很实用的小技巧。
