必须安装 vue syntax highlight 插件并手动绑定 .vue 后缀为 vue component，同时配置 enable_ts_in_script 为 true、vue_version 为 "3"，并确保主题支持 vue-directive scope。
Vue Syntax Highlight 插件必须装对，别选 VueJS 或 vue-component
装错插件是 Vue 文件全黑或高亮断裂的最常见原因。Sublime 默认不识别 .vue，而社区里名字相似的插件有多个：VueJS（已停更、只支持 Vue 2）、vue-component（ST2 专用、在 ST4 上报错）、Vue Syntax Highlight（唯一持续维护、支持 <script setup></script> 和 lang="ts" 的方案）。
实操建议：
- 按
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS），输入Package Control: Install Package回车 - **精确输入
Vue Syntax Highlight**（注意首字母大写、中间空格、末尾带 s）——输 “vue” 或 “vuejs” 都会装错 - 装完不重启也能用，但若右下角仍显示
Plain Text，打开控制台（Ctrl+`）看是否有ImportError或路径异常，可能是 Package Control 版本太旧，先升级它
手动绑定 .vue 后缀，否则永远是纯文本
插件只提供语法定义文件（Packages/Vue Syntax Highlight/Vue.sublime-syntax），不会自动把 .vue 文件和它关联。跳过这步，所有 .vue 文件打开就是白底黑字，连标签结构都不识别。
实操建议：
- 打开任意一个
.vue文件，点击右下角当前语法名（如Plain Text） - 选择
Open all with current extension as…→ 找到并点击Vue Component（不是Vue、也不是HTML (Vue)） - 如果菜单里没出现
Vue Component，说明插件根本没加载成功，不是绑定问题，得回上一步排查安装 - 绑定后，新建或双击打开的
.vue文件都会默认使用该语法，无需重复操作
<script setup> 块不亮？检查嵌套语法和 TS 支持开关</script>
Vue Syntax Highlight 本身不解析 JS/TS，它靠 Sublime 的嵌入语法（embedded syntax）机制把 <script></script> 块交给对应语言插件处理。所以 defineProps、ref() 灰色 ≠ Vue 插件坏了，而是子语言没接上。
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
实操建议：
- 确认已安装
JavaScriptNext - ES6 Syntax（解决 ES6+ 语法）或官方TypeScript插件（解决lang="ts"） - 进
Preferences → Package Settings → Vue Syntax Highlight → Settings，在 User 配置中确保："enable_ts_in_script": true（不是enable_js_in_script）"vue_version": "3"（老版本默认是"2"，会导致组合式 API 高亮断裂） - 临时验证法：把文件后缀临时改成
.ts，看<script setup lang="ts"></script>内容是否恢复高亮——能恢复，就说明问题出在 Vue 层解析配置，不是底层语言插件
template 中 v-if/@click 不显色？不是 bug，是主题 scope 映射缺失
即使语法绑定正确、Vue Syntax Highlight 已启用，v-if、@click、:class 这些指令也常保持灰色或仅与普通属性同色。这不是插件没生效，而是当前配色主题（如 Monokai、Material）没为 vue-directive 这类 scope 定义专属颜色。
实操建议：
- 菜单栏 →
Preferences → Browse Packages→ 进入Vue Syntax Highlight文件夹 → 打开Vue.sublime-syntax - 搜索
vue-directive，确认其scope字段存在且未被注释（通常已启用） - 再打开你当前使用的主题文件（如
Monokai.sublime-color-scheme），在rules数组里添加类似项：{"scope": "entity.name.tag.vue-directive", "foreground": "#C792EA"} - 改完保存，不用重启，立刻生效；不同主题配色值需自行调整，避免和 HTML 标签色冲突
Vue 文件高亮看似简单，真正卡住人的往往是“半生效”状态：template 有结构色但指令无区分、script 块能认出 ref 却标不出类型错误、.vue 文件偶尔又变回 Plain Text。这些问题几乎都指向同一个根因：语法定义、嵌套语言、配色主题三者没对齐。尤其要注意 Vue Component 这个名称在绑定时不能错，它不是可选项，是唯一有效入口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
