sublime如何实时预览HTML/CSS效果？ (Browser Sync插件)

Sublime Text 通过 BrowserSync 插件可实现 HTML/CSS 保存即刷新与多设备同步预览；需先安装 Node.js 和 Sublime-Text-BrowserSync 插件，再运行 BrowserSync: Start Server 启动服务，默认端口 3000，支持 CSS 注入、局域网多端同步及控制面板操作。

Sublime Text 本身不带浏览器实时预览功能，但通过 BrowserSync 插件可以实现 HTML/CSS 的保存即刷新、多设备同步预览，比手动刷新高效得多。

安装 BrowserSync 插件

BrowserSync 不是 Sublime 原生插件，需借助命令行工具 + Sublime 插件桥接。推荐使用 Sublime-Text-BrowserSync（社区维护的轻量桥接插件）：

• 用 Package Control 安装：按 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（Mac），输入 Install Package，回车后搜索 BrowserSync，选择安装
• 确保系统已安装 Node.js（BrowserSync 是基于 Node 的工具），终端运行 npm install -g browser-sync 安装全局命令

启动本地服务并关联项目

在 Sublime 中打开你的 HTML 项目文件夹（File → Open Folder），然后：

• 按 Ctrl+Shift+P 输入 BrowserSync: Start Server，回车
• 首次运行会提示配置：默认监听当前文件夹，端口通常为 3000，支持自动打开浏览器（勾选 “Open browser”）
• 成功后终端（Sublime 控制台或系统终端）会显示类似 Local: http://localhost:3000 的地址，点击即可打开预览页

保存即刷新 & 多文件监听

BrowserSync 默认监听 .html、.css、.js 文件，你只需：

标签： css linux html sublime js 前端 node.js node npm 浏览器 端口 工具 mac