Sublime Text 通过 BrowserSync 插件可实现 HTML/CSS 保存即刷新与多设备同步预览；需先安装 Node.js 和 Sublime-Text-BrowserSync 插件，再运行 BrowserSync: Start Server 启动服务，默认端口 3000，支持 CSS 注入、局域网多端同步及控制面板操作。
Sublime Text 本身不带浏览器实时预览功能，但通过 BrowserSync 插件可以实现 HTML/CSS 的保存即刷新、多设备同步预览，比手动刷新高效得多。
BrowserSync 不是 Sublime 原生插件，需借助命令行工具 + Sublime 插件桥接。推荐使用 Sublime-Text-BrowserSync（社区维护的轻量桥接插件）：
Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（Mac），输入 Install Package，回车后搜索 BrowserSync，选择安装npm install -g browser-sync 安装全局命令在 Sublime 中打开你的 HTML 项目文件夹（File → Open Folder），然后：
Ctrl+Shift+P 输入 BrowserSync: Start Server，回车3000，支持自动打开浏览器（勾选 “Open browser”）Local: http://localhost:3000 的地址，点击即可打开预览页BrowserSync 默认监听 .html、.css、.js 文件，你只需：
立即学习“前端免费学习笔记（深入）”；
Ctrl+S）→ 浏览器自动刷新"inject_css": true
.scss），可在插件配置里添加 "files": ["*.html", "*.css", "*.scss"]
提升体验的实用细节：
Ctrl+Alt+I 可唤出 BrowserSync 控制面板（含重载、暂停、设备同步等按钮）http://192.168.x.x:3000 可实现多端实时同步操作（滚动、点击也同步）command not found: browser-sync，说明 Node 全局路径未加入系统环境变量，需重新配置或改用 npx 启动（插件设置中指定 "command": "npx browser-sync"）基本上就这些。不需要复杂配置，只要 Node 和插件到位，几秒就能跑起来，写前端时省去反复切窗口、点刷新的麻烦。
以上就是sublime如何实时预览HTML/CSS效果？ (Browser Sync插件)的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
512
收藏
