sublime text 无法实现 vue 组件实时预览，因其原生不支持 lsp 和嵌入式浏览器面板；所谓“运行”仅依赖外部开发服务器（如 vite），sublime 仅负责编辑与保存，所有实时渲染功能需借助 vs code 等具备完整基础设施的编辑器。
Sublime Text 本身不支持 Vue 组件实时渲染，没有内置的预览服务或语言服务器能力；所谓“运行”只能靠外部构建工具（如 Vite 或 Vue CLI）提供开发服务器，Sublime 只负责编辑和保存。
为什么 Sublime 打不开 Vue 组件的实时预览面板
Vue Designer、Volar Preview 这类实时渲染功能依赖 LSP（Language Server Protocol）和 WebSocket 通信，而 Sublime 原生不带 LSP 客户端，也不支持嵌入式浏览器面板。VS Code 能做到是因为它内置了这些基础设施，Sublime 没有等效替代——装再多插件也变不出 Vue Designer 那样的双栏同步界面。
- 所有声称“Sublime 实时预览 Vue”的教程，实际只是把终端命令封装成快捷键，本质仍是手动刷新浏览器
- 试图用 Browser Refresh 插件自动打开 localhost 页面，无法触发 HMR（热模块替换），改完代码仍要手动 F5
- SublimeLSP + Volar 可以提供 defineProps 类型提示和跳转，但依然不渲染 UI，只做语义分析
怎样让 Sublime 编辑后自动触发浏览器刷新
这不是靠 Sublime 自身实现，而是靠文件系统监听 + 外部服务联动。关键在「保存即编译」+「浏览器监听变更」两步闭环：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 确保项目已启用热更新：Vite 项目检查
vite.config.js是否含server.hmr: { overlay: true }；Vue CLI 项目确认vue.config.js未禁用devServer.hot - Sublime 开启自动保存：
Preferences → Settings中添加"save_on_focus_lost": true，避免忘记 Ctrl+S 导致热更新失效 - 浏览器必须访问开发服务器地址（如
http://localhost:5173），不能直接用 file:// 协议打开 .vue 文件 - 若页面没自动刷新，检查控制台是否报错
WebSocket connection to 'ws://localhost:5173/@vite/client' failed——说明服务未运行或端口被占
Vue Syntax Highlight 配置不到位，<script setup> 会变灰色</script>
灰色不是 bug，是 Sublime 没把 <script setup></script> 块正确委托给 JS/TS 语法引擎处理。Vue Syntax Highlight 只定义外层结构，内部高亮靠子语法包：
- 必须安装
JavaScriptNext - ES6 Syntax（非内置 JavaScript），否则ref()、defineProps()全部无高亮 - 若用
lang="ts"，还需安装TypeScriptSyntax插件，并在Preferences → Package Settings → Vue Syntax Highlight → Settings中确认"enable_ts_in_script": true和"vue_version": "3" - 右键点击
<script></script>区域 →Set Syntax → JavaScriptNext → JavaScriptNext - ES6 Syntax，可临时验证是否子语法生效 - 别碰
Vuejs（黄色图标旧插件）：它与 Vue Syntax Highlight 冲突，会导致<template></template>中v-if指令完全不识别
真正容易被忽略的是文件关联和作用域嵌套
很多人反复重装插件却无效，问题不在插件本身，而在两处隐性配置：
- 每次新建
.vue文件，右下角显示Plain Text？说明Preferences → Settings – Syntax Specific里没写"extensions": ["vue"]，或者手动绑定时选错了项——必须选Vue Component，不是Vue或HTML -
<style scoped lang="scss"></style>里样式不着色？那是因为没装SCSS插件（作者 css415），且 Vue Syntax Highlight 的嵌入规则默认只认lang="css"，对scss需额外在 User Settings 中加"enable_scss_in_style": true
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
