必须安装Vue Syntax Highlight插件、手动绑定.vue后缀为Vue Component、配置vue_version为"3"并启用嵌入规则,否则.vue文件始终显示Plain Text;装错插件名或跳过绑定步骤是高亮失效的主因。

装 Vue Syntax Highlight 插件本身不难,但只装它,.vue 文件永远是 Plain Text —— 因为 Sublime 不会自动把后缀和语法绑定,这步必须手动做。
怎么装对插件:名字一个字母都不能错
Sublime 没有“Vue 开发插件”这种打包包,真正起作用的只有 Vue Syntax Highlight 这一个。装错名字,轻则高亮失效,重则控制台报 ImportError: No module named 'sublime_plugin'。
- 必须用 Package Control 精确输入:
Vue Syntax Highlight(首字母大写、中间空格、末尾带s和大写H) - 搜
vue syntax或vue highlight极易选错旧版;VueJS已停更,vue-component仅适配 ST2,在 ST4 下直接冲突 - 装完去
Preferences → Browse Packages…确认存在Vue Syntax Highlight/文件夹,而不是vuejs/或vue-component/
为什么装完还是白底黑字:缺了文件关联这一步
插件只提供语法定义文件 Packages/Vue Syntax Highlight/Vue.sublime-syntax,不会自动告诉 Sublime:“.vue 文件该用这个语法”。跳过这步,等于没装。
- 打开任意一个
.vue文件,点击右下角当前语法名(比如显示Plain Text) - 选择
Open all with current extension as…→ 找到并点击Vue Component(注意:不是Vue、不是HTML、也不是Vue Template) - 如果菜单里根本没有
Vue Component,说明插件根本没加载成功,按Ctrl+`看控制台是否有报错
<script setup lang="ts"> 还是灰色?嵌入规则没开或子语言没装
Vue Syntax Highlight 本身不渲染 JS/TS/CSS,它靠 Sublime 的嵌入机制,把 <script> 块交给对应语言插件处理。灰色 ≠ Vue 插件坏了,而是子语言没接上。
立即学习“前端免费学习笔记(深入)”;
- 进
Preferences → Package Settings → Vue Syntax Highlight → Settings,在 User 配置中确保写入:{"vue_version":"3","enable_ts_in_script":true,"enable_css_in_style":true} - 确认已单独安装子语言支持:TypeScript 用
JavaScriptNext - ES6 Syntax或官方TypeScript插件;SCSS 用作者css415的SCSS插件 - 临时验证法:把
.vue文件后缀改成.ts,看<script>区是否恢复高亮 —— 能恢复,说明是 Vue 层解析失败,不是 Sublime 整体崩溃
最常被忽略的是绑定步骤:换电脑、重装 Sublime 后,Vue Component 关联就没了,得重来一次——这点不手动做,每天打开 .vue 文件第一眼就是白底黑字。


















