必须安装Vue Syntax Highlight插件、手动绑定.vue后缀为Vue Component、并配置enable_ts_in_script为true且vue_version为"3"，才能实现.vue文件完整高亮；否则显示Plain Text或script setup区域灰色。
装对插件、绑对后缀、开对嵌套开关，.vue 文件才能真正高亮；否则全是 Plain Text，不是你操作错了，是 Sublime 压根没“认出”这是 Vue 文件。
怎么安装 Vue Syntax Highlight 插件（别输错名字）
唯一当前持续维护、支持 <script setup></script> 和 lang="ts" 的插件，只有 Vue Syntax Highlight——注意首字母大写、中间有空格、末尾带 s 和大写 H。搜 vue 或 vuejs 极大概率装到已停更的 VueJS（ST4 上报 ImportError: No module named 'sublime_plugin'），或 vue-component（ST2 专用，ST4 直接崩溃）。
实操建议：
- 按
Ctrl+Shift+P（Win/Linux）或Cmd+Shift+P（macOS），输入Package Control: Install Package回车 - 等待列表加载完成，严格输入
Vue Syntax Highlight，回车安装 - 装完进
Preferences → Browse Packages…，确认存在Vue Syntax Highlight/文件夹（不是vuejs/或vim-vue/） - 若右下角仍显示
Plain Text，按Ctrl+`查控制台：出现ImportError说明旧插件冲突，先用Package Control: Remove Package卸干净再重试
为什么装完还是白底黑字？必须手动绑定 .vue 后缀
插件只提供语法定义文件（路径：Packages/Vue Syntax Highlight/Vue.sublime-syntax），不会自动把 .vue 文件和它关联。跳过这步，所有 .vue 文件打开永远是 Plain Text。
立即学习“前端免费学习笔记（深入）”；
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
实操建议：
- 打开任意一个
.vue文件 - 点击右下角当前语法名（如
Plain Text） - 选择
Open all with current extension as…→ 找到并点击Vue Component（不是Vue、HTML (Vue)或Vue Template） - 如果菜单里没出现
Vue Component，说明插件根本没加载成功——不是绑定的问题，先查控制台报错
<script setup lang="ts"></script> 仍是灰色？检查嵌套语法链
Vue Syntax Highlight 本身不渲染 JS/TS/CSS，它靠 Sublime 的嵌入语法机制，把 <script></script> 块交给对应语言插件处理。灰色 ≠ Vue 插件坏了，是子语言没接上。
关键配置点：
- 确认已安装
JavaScriptNext - ES6 Syntax（推荐）或官方TypeScript插件；装完开一个.ts文件，右下角应显示TypeScript - 进
Preferences → Package Settings → Vue Syntax Highlight → Settings，在User配置中确保含："enable_ts_in_script": true（不是enable_js_in_script）"vue_version": "3"（老版本默认"2"，会导致defineProps等高亮断裂）"enable_vue_blocks": true - 临时验证法：把文件后缀改成
.js，看<script></script>区块是否恢复高亮——能恢复，就说明问题出在 Vue 层解析，不是底层 JS/TS 插件失效
最容易被忽略的是 vue_version 默认为 "2"，以及 enable_ts_in_script 拼错成 enable_js_in_script；这两个值一旦不对，组合式 API 的高亮就会局部失效，且控制台不报错，排查起来特别隐蔽。
