Sublime Text需安装Vue Syntax Highlight插件并手动关联.vue后缀，启用TS嵌入语法及Emmet作用域配置才能完整支持Vue文件高亮与开发功能。
Sublime Text 默认不识别 .vue 文件，打开就是纯文本——这不是你漏配了什么，是它压根没内置 Vue 语法定义。唯一能稳定用、持续维护、兼容 ST3/ST4 且支持 <script setup> 和 lang="ts" 的插件，只有 Vue Syntax Highlight。其他名字相似的（比如 VueJS、vue-component）要么已停更，要么只适配 ST2，装上直接报错。
怎么安装 Vue Syntax Highlight 插件
别搜“Vue”然后随便点一个，必须严格输入全名：
- 按
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS）调出命令面板 - 输入
Package Control: Install Package，回车 - 等列表加载完成，**精确输入
Vue Syntax Highlight（首字母大写，中间有空格，带 s）**，回车安装 - 装完不用重启，但若右下角仍显示
Plain Text，说明插件没加载成功——检查Ctrl+`控制台是否有报错；也可能是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，说明插件根本没加载，不是绑定的问题
<script setup lang="ts"> 还是灰色？检查嵌套语法开关和依赖
Vue Syntax Highlight 本身不渲染 JS/TS/CSS，它靠 Sublime 的嵌入语法（embedded syntax）机制把 <script> 块交给对应语言插件处理。所以灰色 ≠ Vue 插件坏了，而是子语言没接上。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 确认已安装对应语言支持：用 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>区块是否恢复高亮——能恢复，就说明问题出在 Vue 层解析，不是底层 JS/TS 插件失效
Emmet 在 <template> 里不触发？要显式声明作用域
<template> 块本质是 HTML，但 Sublime 不会自动继承父语法上下文。Emmet 默认只在原生 HTML 语法下激活，所以在 .vue 里敲 div.my-class + Tab 没反应，不是 Emmet 没装，是它没被“认出来”。
- 打开
Preferences → Settings – User - 添加配置：
"emmet_syntax_scopes": { "vue": "html" } - 保存后重启 Sublime，
<template>内即可正常使用 Emmet 缩写 - 这个配置只影响 Emmet，不影响语法高亮逻辑，也不需要改
Vue Syntax Highlight设置
真正容易被忽略的是：Vue 语法高亮和语义能力（类型提示、跳转、补全）是两件事。Vue Syntax Highlight 只管“看得清”，defineProps 能高亮不代表你能 Ctrl+Click 跳转到它的定义——那得靠 SublimeLSP + Volar，不是这个插件的事。别把高亮没做好，当成整个开发体验不行。
