必须开启enable_ts_in_script、enable_css_in_style、enable_vue_blocks三项嵌入开关,并设vue_version为"3",同时安装对应子语言插件(如JavaScriptNext或TypeScript、SCSS),否则template/script/style区块将无法高亮。

Vue 文件里 <template></template>、<script setup lang="ts"></script>、<style scoped lang="scss"></style> 各自用不同语言规则高亮,Sublime 默认不支持——它靠“嵌入语法(embedded syntax)”把每个区块交给对应语言插件处理,必须手动打通这条链,否则全是灰色。
为什么 <script setup lang="ts"></script> 仍是灰色?
不是 Vue 插件坏了,是 Sublime 没把这段 TS 代码交给 TypeScript 插件渲染。Vue Syntax Highlight 只负责识别区块边界,不负责渲染 JS/TS/CSS。
-
<script></script>块要高亮,得有能处理 TS 的插件(如JavaScriptNext - ES6 Syntax或官方TypeScript),且右下角在.ts文件中显示为TypeScript - 如果
.ts文件本身不高亮,先解决子语言支持,再回来看 Vue - 临时验证法:把
.vue文件后缀改成.js或.ts,看<script></script>内容是否恢复高亮——能恢复,说明问题纯出在 Vue 层配置
必须开启的三个嵌入开关
进 Preferences → Package Settings → Vue Syntax Highlight → Settings,在右侧 User 配置中确保这三项存在且为 true:
-
"enable_ts_in_script": true(不是enable_js_in_script;用 TS 就必须开这个) -
"enable_css_in_style": true(启用<style></style>内 CSS/SCSS/Sass 嵌入) -
"enable_vue_blocks": true(允许解析<template></template>、<script></script>、<style></style>三块结构)
漏掉任一值,对应区块就退化为 Plain Text 或 HTML 高亮。
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用,使用 Element Plus 组件(如 el-button、el-input、el-form、el-table 等)。
立即学习“前端免费学习笔记(深入)”;
vue_version 必须设为 "3"
默认值可能是 "2",会导致 defineProps、defineEmits、v-model:value 等 Vue 3 特有语法无法被识别,高亮断裂或标红。
- 确认 User Settings 中有:
"vue_version": "3" - 改完不用重启,但需重新打开
.vue文件(或执行Ctrl+Shift+P→Reload Syntax) - 若仍无效,检查是否误装了旧版插件(比如
vue-component或VueJS),它们会覆盖配置并报ImportError: No module named 'sublime_plugin'
子语言插件没装全,高亮就断在半路
Vue Syntax Highlight 不打包 JS/TS/CSS 支持,只做路由。你用什么就装什么:
- TS:装
JavaScriptNext - ES6 Syntax(推荐)或官方TypeScript插件 - SCSS:装
SCSS(作者css415),装完开个.scss文件确认右下角显示SCSS - Pug:装
Pug插件,并确保"enable_pug_in_template": true在 Vue Syntax Highlight 设置中 - 别装
Babel—— 它会劫持<script></script>块,和 Vue 的嵌入规则冲突,导致高亮错乱
最常被忽略的是:以为装了 Vue 插件就万事大吉,其实它只是个“交通指挥员”,真正干活的是后面那一串子语言插件。缺一个,对应区块就卡在灰色里不动。

















