必须手动绑定.vue后缀至vue component语法，否则即使正确安装vue syntax highlight插件，文件仍显示plain text；操作路径：打开.vue文件→点击右下角语法名→open all with current extension as…→vue component。
装了插件但.vue文件还是白底黑字？不是插件没装对，是Sublime压根没把.vue后缀和Vue语法关联起来——这一步漏掉，装十遍Vue Syntax Highlight也没用。
怎么确认并安装正确的Vue高亮插件
别搜“vue plugin”或“vuejs”，必须精确安装Vue Syntax Highlight（注意：首字母大写、中间空格、末尾带s和大写H）。其他名字相似的插件，比如vue-component、VueJS或少个s的旧版，要么报ImportError: No module named 'sublime_plugin'，要么只适配ST2，装上直接失效。
实操步骤：
- 按
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS）调出命令面板 - 输入
Package Control: Install Package，回车 - 等列表加载完成，**严格输入
Vue Syntax Highlight**，回车安装 - 装完不需重启，但若右下角仍显示
Plain Text，说明还没绑定后缀——这是下一步要解决的
为什么装完还是纯文本？必须手动绑定.vue后缀
Vue Syntax Highlight只提供语法定义文件（路径是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，说明插件根本没加载成功——先检查Ctrl+`控制台有没有报错，再确认Package Control是否为最新版。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
<script setup lang="ts"></script>还是灰色？检查嵌套语法开关和依赖
Vue Syntax Highlight本身不渲染JS/TS/CSS，它靠Sublime的嵌入语法（embedded syntax）机制把<script></script>块交给对应语言插件处理。灰色 ≠ Vue插件坏了，而是子语言没接上。
关键检查点：
- 确认已安装对应语言支持：用TS就装
JavaScriptNext - ES6 Syntax或官方TypeScript插件；用SCSS就得装SCSS插件（作者css415） - 进
Preferences → Package Settings → Vue Syntax Highlight → Settings，在User配置中确保："enable_ts_in_script": true（不是enable_js_in_script） - 同时确认
"vue_version": "3"已设为"3"（老版本默认"2"，会导致defineProps等高亮断裂） - 临时验证法：把文件后缀改成
.js，看<script></script>区块是否恢复高亮——能恢复，就说明问题出在Vue层解析，不是底层JS/TS插件失效
template里v-if、@click还是灰的？别指望默认高亮指令
默认Vue Syntax Highlight只做基础HTML结构高亮，v-if、@click、:class这些Vue指令不会加特殊颜色。这不是bug，是设计如此——它不强制覆盖主题对HTML属性的着色逻辑。
若想区分指令和普通属性：
- 菜单栏 →
Preferences → Browse Packages，进入Packages目录 - 找到
Vue Syntax Highlight文件夹 → 打开Vue.sublime-syntax - 搜索
vue-directive，确认其scope已启用（通常默认开启） - 再检查你当前使用的配色主题（如
Monokai.sublime-color-scheme）是否包含对entity.other.attribute-name.vue这类scope的映射
真正麻烦的是多语言混合场景，比如<style lang="postcss"></style>或自定义lang="less"，这些需要手动添加嵌入映射，属于进阶需求，多数人用不到，也容易配错导致整个语法崩溃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
