必须手动绑定.vue后缀才能永久生效,因Sublime不自动关联扩展名与语法;仅安装Vue Syntax Highlight插件不改变文件映射规则,未绑定时.vue文件默认归为未知类型而显示Plain Text。

装完插件不手动绑定 .vue 后缀,高亮永远不会“永久生效”——Sublime 不会自动把文件后缀和语法关联,这步必须人工点一次。
为什么每次打开 .vue 文件还是 Plain Text
Vue Syntax Highlight 插件只提供 Vue.sublime-syntax 文件,不修改 Sublime 的文件类型映射规则。没做绑定前,.vue 文件默认归类为“未知后缀”,所以永远显示 Plain Text。
- 右下角显示
Plain Text→ 说明插件已加载但未绑定,不是插件没装好 - 右下角菜单里找不到
Vue Component→ 插件根本没加载成功,先查Ctrl+`控制台报错 - 点了
Open all with current extension as…却选了Vue或HTML (Vue)→ 错误选项,只有Vue Component才能触发完整嵌套高亮
如何真正实现“永久保存”
绑定操作本身就会写入用户配置,路径是:Packages/User/Preferences.sublime-settings 中的 extensions 映射项。但你不需要手动改这个文件。
- 打开任意一个
.vue文件 - 点击右下角当前语法名(如
Plain Text) - 选择
Open all with current extension as…→Vue Component - 关掉再重开一个
.vue文件,确认右下角显示Vue Component且各区块有颜色
完成这四步后,所有新打开、双击、拖入的 .vue 文件都会自动使用该语法,无需重复操作。
审查 Vue 管理后台的变更请求(Vue 2 + Element UI,Vue 3 + Element Plus)。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
立即学习“前端免费学习笔记(深入)”;
绑定后 <script setup lang="ts"> 还是灰色?检查嵌套链是否断开</script>
Vue Syntax Highlight 不直接高亮 JS/TS/CSS,它靠 嵌入语法(embedded syntax) 把 <script></script> 块交给对应语言插件处理。灰色 = 子语言没接上。
- 确保已安装
JavaScriptNext - ES6 Syntax或官方TypeScript插件(装完开个.ts文件验证右下角是否显示TypeScript) - 进
Preferences → Package Settings → Vue Syntax Highlight → Settings – User,确认含以下三项:
{
"vue_version": "3",
"enable_ts_in_script": true,
"enable_vue_blocks": true
}少一个,<script setup lang="ts"></script> 就可能退化成纯文本。
最常被忽略的是:绑定动作只做一次,但子语言支持和嵌套开关必须同时到位——缺一不可。否则你以为“已经设好了”,其实只是 template 部分亮了,script 和 style 仍是黑底灰字。

















