Vue Syntax Highlight 不提供直接修改 Vue 指令（如 v-if、@click）颜色的配置项，因其仅负责识别 .vue 文件结构并将 template 内容交由 HTML 语法引擎处理，指令高亮实际取决于 HTML 语法分配的 scope 和当前配色方案的匹配规则。
Vue Syntax Highlight 不提供直接修改属性名（如 v-if、@click、:class）颜色的独立配置项——它把模板语法高亮完全交给 Sublime 原生的 HTML 语法引擎处理，而 Vue 指令本质上是 HTML 属性的扩展。所以“改 Vue 属性高亮”，实际是改 HTML 语法中对特定属性名的着色规则。
为什么直接改 Vue 插件设置没用
你在 Package Settings → Vue Syntax Highlight → Settings 里无论怎么调整 vue_version 或 enable_html_in_template，都不会影响 v- 或 @ 开头属性的颜色。因为 Vue.sublime-syntax 文件本身只负责识别区块边界（比如把 内容标记为嵌入 HTML），并不定义 HTML 内部的 token 着色逻辑。
- 所有
中的标签、属性、值，最终由 Sublime 自带的HTML语法或你安装的增强版（如HTML (Vue)、Emmet）渲染 -
Vue Syntax Highlight的作用仅限于“把 .vue 文件识别成 Vue Component”，并把各区块正确分发给对应子语法 - 试图手动编辑
Packages/Vue Syntax Highlight/Vue.sublime-syntax来加 color rule，大概率导致整个语法加载失败，右下角变回Plain Text
真正生效的修改路径：覆盖 HTML 语法的 scope 规则
Sublime 使用 scope（作用域标识符）匹配语法元素，再通过 color scheme（配色方案）决定颜色。要让 v-if 变蓝、@submit 变橙，需两步：
- 确认目标属性被赋予了什么 scope：打开一个 .vue 文件，在
v-if上右键 →Developer → Show Scope Name，你会看到类似entity.other.attribute-name.html或meta.directive.vue.html（取决于你装的 HTML 插件） - 在当前启用的配色方案（
Preferences → Color Scheme）中，找到对应 scope 的foreground配置项并修改——但注意：系统配色方案不可改，必须复制一份到User/目录下再编辑 - 更稳妥的做法是安装
ColorHighlighter或BracketHighlighter这类支持 scope 覆盖的插件，它们允许你在 User 设置里直接写 scope → color 映射，无需动配色文件
实操建议：用 scope 覆盖快速生效（推荐）
如果你用的是默认 Monokai 或 Adaptive 配色方案，且已安装 ColorHighlighter（它支持自定义 scope 高亮），可以这样操作：
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 按
Ctrl+Shift+P输入ColorHighlighter: Edit User Rules回车 - 在打开的
ColorHighlighter.sublime-settings的rules数组里加一条：
{
"scope": "entity.other.attribute-name.html",
"foreground": "#4A90E2",
"font_style": "bold"
}
保存后，所有 HTML 属性（含 v-if、@click）都会变蓝加粗。若只想高亮 Vue 特有属性，可先用 Show Scope Name 查出更精确的 scope（例如某些插件会打上 meta.directive.v-if.vue），再针对性匹配。
复杂点在于：不同 HTML 插件（HTML、HTML (Vue)、Emmet）分配的 scope 不一致，改错 scope 名字就毫无效果；而且一旦换配色方案或升级插件，scope 名可能变动——这不是 Vue 插件的问题，是 Sublime 语法链本身的松耦合特性决定的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
