讲师中心 微信公众号
AI工具推荐 视频效率加速

Sublime Text LiveReload怎么用_Sublime Text实时刷新教程【简明】

千丽小哥_2951

千丽小哥_2951

发布时间:2026-03-31 15:57:00

|

915人浏览过

|

来源于php中文网

原创

LiveReload 在 Sublime 中需三端协同:Sublime 插件(仅发通知)、浏览器扩展(监听 WebSocket)和服务端(livereload CLI),缺一不可;ST4 不兼容原插件,端口与协议(必须 http/https)必须严格一致。

sublime text livereload怎么用_sublime text实时刷新教程【简明】

LiveReload 在 Sublime 里根本不是“装个插件就自动好使”的东西

Sublime Text 本身不支持 LiveReload 协议,所谓“LiveReload 插件”只是个监听器——它只负责在你保存文件时发个通知,真正干活的是浏览器扩展和后台服务。如果你按网上教程装了插件却没反应,大概率是卡在这一步:没有配套的浏览器扩展,或没启动服务端。

  • livereload CLI 必须用 npm install -g livereload 全局安装(确认已装 Node.js)
  • 浏览器必须装官方 LiveReload 扩展(Chrome 网上应用店搜 “LiveReload”,图标是黑白靶心,开发者是 LiveReload.com)
  • 网页必须通过 http://localhost 或 https:// 打开,file:// 协议下扩展被浏览器禁用,这是硬性限制,改不了
  • Sublime Text 4 用户注意:LiveReload 插件(作者 dwieeb)只支持 ST3,ST4 上静默失效,别白费时间配置

启动服务时端口不一致是“保存没反应”的头号原因

CLI 默认监听 35729 端口,浏览器扩展也默认连这个端口;只要有一边改了,另一边没同步,WebSocket 就连不上,控制台会报 WebSocket connection to 'ws://localhost:35729/livereload' failed。

  • 启动命令示例:livereload . --port 35729 --exts html,css,js,md
  • --exts 必须显式列出你要监听的后缀,漏掉 css,改样式就不会刷新
  • 如果提示 EADDRINUSE,说明端口被占,换 --port 35730,同时进浏览器扩展的 Options 页面把 port 改成一样
  • 别加 --no-browser——这参数只是不让服务自动开新标签页,跟 Sublime 刷新完全无关

Markdown 实时预览要绕过插件默认逻辑

LiveReload 插件默认不监听 .md 文件,因为它不直接生成 HTML;而 Markdown Preview 插件是把渲染结果写到缓存目录下的临时 .html 文件里。所以得手动告诉 LiveReload:“当 .md 保存时,请触发 markdown_preview 命令,并把输出当作 HTML 刷新”。

  • 打开 Preferences → Package Settings → LiveReload → Settings – User
  • 填入:
    {
      "enabled_plugins": ["SimpleReloadPlugin"],
      "SimpleReloadPlugin": {
        "paths": ["*.md"],
        "command": "markdown_preview",
        "args": {"target": "browser", "parser": "markdown"}
      }
    }
  • "command" 必须是 markdown_preview(全小写+下划线),写成 MarkdownPreview 或其他变体都不生效
  • 确保已安装 Markdown Preview(不是 MarkdownEditing),且没装已弃用的 Markdown Live Preview

CSS 预处理器(Sass/Less)编译后自动刷新要分两步走

LiveReload 不会帮你编译 .scss 或 .less,它只管刷新。编译得靠别的插件(如 Sass 或 Less2Css)或 CLI 工具(sass / lessc)。关键在于让编译完成的 .css 文件落在 LiveReload 的监听路径里。

  • 推荐用 sass --watch 或构建系统输出到项目根目录下的 css/ 目录,再让 LiveReload 监听该目录
  • 如果用 livereload . --exts scss,css,它不会自动编译 .scss,只会等你手动产出 .css 后才刷新
  • 更稳的组合是:npm install -g sass + livereload . --exts css + 浏览器扩展,把编译和刷新解耦
  • 别指望一个插件干完所有事——Sass Build 插件和 LiveReload 插件各司其职,强行绑定反而容易出错

最容易被忽略的其实是协议和端口的一致性:哪怕所有步骤都对,只要页面是 file:// 打开的,或者 CLI 和浏览器扩展端口差一位数,整个流程就卡死。调试时先看浏览器控制台有没有 WebSocket 报错,比反复重装插件快得多。

热门AI工具

更多
二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2546

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

4599

2023.11.06

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

3347

2026.03.24

Sass和less的区别
Sass和less的区别

Sass和less的区别有语法差异、变量和混合器的定义方式、导入方式、运算符的支持、扩展性等。本专题为大家提供Sass和less相关的文章、下载、课程内容,供大家免费下载体验。

2307

2023.10.12

Sass和less的区别
Sass和less的区别

Sass和less的区别有语法差异、变量和混合器的定义方式、导入方式、运算符的支持、扩展性等。本专题为大家提供Sass和less相关的文章、下载、课程内容,供大家免费下载体验。

2307

2023.10.12

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

3916

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1255

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1598

2023.08.03

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

0

2026.09.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn