必须安装vue syntax highlight插件、手动将.vue文件关联为vue component语法、并在用户配置中启用"vue_version":"3"和"enable_ts_in_script":true等嵌入开关,三步缺一不可;其他插件如vuejs或vue-component在st4下均失效。

Sublime Text 默认不识别 .vue 文件,打开就是白底黑字——这不是配错了,是它压根没语法定义。要让 <template></template>、<script setup lang="ts"></script>、<style scoped lang="scss"></style> 各自高亮,必须装对插件、手动绑定后缀、开对嵌套开关,三步缺一不可。
装 Vue Syntax Highlight 插件,别搜“vuejs”或“vueplugin”
Package Control 中必须严格输入 Vue Syntax Highlight(首字母大写、中间空格、末尾带 s 和 H)。其他名字相似的插件基本失效:
-
VueJS:已停更,ST4 加载失败,控制台报ImportError: No module named 'sublime_plugin' -
vue-component:仅适配 ST2,defineProps()和withDefaults()直接漏高亮 -
Vuejs Snippets:只提供代码片段补全,不管语法着色
装完后检查 Preferences → Browse Packages… 下是否存在 Vue Syntax Highlight/ 文件夹(不是 vuejs/);若已误装冲突插件,进 Preferences → Package Settings 把它禁用。
手动绑定 .vue 后缀为 Vue Component 语法
插件只提供语法定义文件 Packages/Vue Syntax Highlight/Vue.sublime-syntax,不会自动注册文件关联。跳过这步,所有 .vue 文件永远显示 Plain Text:
- 打开任意一个
.vue文件 - 点击右下角当前语法名(如
Plain Text) - 选择
Open all with current extension as…→ 点击Vue Component(注意不是Vue或HTML)
如果菜单里没出现 Vue Component,说明插件根本没加载成功——按 Ctrl+` 查控制台是否有报错;常见原因是 Package Control 版本太旧,先升级再重试。
<script setup lang="ts"></script> 还是灰色?子语言嵌入没开
Vue Syntax Highlight 不渲染 JS/TS/CSS,它靠 Sublime 的嵌入机制把 <script></script> 块交给对应语言插件处理。灰色 ≠ 插件坏了,而是子语言没接上:
- 确认已安装
JavaScriptNext - ES6 Syntax或官方TypeScript插件 - 进
Preferences → Package Settings → Vue Syntax Highlight → Settings,在用户配置中加入:"vue_version": "3""enable_ts_in_script": true(不用enable_js_in_script)"enable_vue_blocks": true -
<style lang="scss"></style>不高亮?装SCSS插件(作者css415),再开一个.scss文件确认右下角显示SCSS
临时验证法:把 .vue 文件后缀临时改成 .js,看 <script></script> 区块是否恢复高亮——能恢复说明是 Vue 层解析失败,不是底层 JS/TS 插件失效。
别指望它做语义提示,Vue Syntax Highlight 只管颜色
它不提供类型推导、跳转、this. 属性补全,也不识别 v-model:va 这类新指令。所谓“提示”只能靠额外插件凑:
-
AutoFileName:在import或src属性里自动提示路径和文件名 -
Emmet(默认已带):写 template 时敲div.my-class+Tab能展开成 HTML,但对v-if、@click无扩展 -
Vuejs Complete Package:提供v-for、props/data/methods等 Tab 补全,但基于正则硬编码,defineProps支持不稳定
真正语义级提示(比如 defineProps() 类型推导)需要 SublimeLSP + volar,但配置复杂、兼容性差,远不如 VS Code 开箱即用。实际开发中,高亮能稳住就已算达标——颜色对了,眼睛才不累。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











