必须安装Vue Syntax Highlight插件、手动将.vue后缀绑定为Vue Component语法、配置vue_version为3并启用TS/SCSS等子语言支持，三步缺一不可；装错插件名或未绑定后缀会导致白底黑字。
Sublime Text 4 默认完全不识别 .vue 文件，打开就是白底黑字——这不是你配错了，是它压根没语法定义。要真正高亮 <template>、<script setup lang="ts">、<style scoped lang="scss"> 这三块，必须装对插件、手动绑定后缀、确认子语言支持，三步缺一不可。
装 Vue Syntax Highlight 插件，别选错名字
Package Control 搜索时必须严格输入 Vue Syntax Highlight（首字母大写、中间空格、末尾带 s），不是 VueJS、vue-component 或漏掉 s 的旧版。
-
VueJS是 ST2 旧包，装上直接报ImportError: No module named 'sublime_plugin' -
vue-component已停更，不兼容 ST4，defineProps()和withDefaults()会漏高亮 - 装完检查
Preferences → Browse Packages…下是否存在Vue Syntax Highlight/文件夹（不是vuejs/） - 如果已装了
VueJS，进Preferences → Package Settings把它禁用，否则语法冲突导致高亮降级
手动把 .vue 文件绑定为 Vue Component 语法
插件只提供语法定义，不会自动注册文件关联。跳过这步，.vue 文件永远显示 Plain Text。
- 打开任意一个
.vue文件 - 点击右下角当前语法名（如
Plain Text） - 选择
Open all with current extension as…→ 找到并点击Vue Component（注意不是Vue或HTML） - 如果菜单里没出现
Vue Component，说明插件未加载成功，按Ctrl+`查控制台是否有报错；常见原因是 Package Control 版本太旧，先升级它
确认 vue_version 为 3 并检查子语言嵌入是否生效
<script setup lang="ts"> 仍是灰色？大概率是 Vue 语法层解析失败，不是 JS 引擎问题。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 进
Preferences → Package Settings → Vue Syntax Highlight → Settings，确认"vue_version": "3"已设为"3"（默认可能是"2"） -
<style lang="scss">不高亮？单独装SCSS插件（作者css415），装完开一个.scss文件确认右下角显示SCSS，再切回.vue -
<script lang="ts">无 TS 高亮？检查是否启用了enable_ts_in_script（部分版本需手动开启） - 临时验证法：把
.vue文件后缀临时改成.js，看<script>区块是否恢复高亮——能恢复说明是 Vue 层解析失败
代码提示要另装插件，Vue Syntax Highlight 不提供语义能力
Vue Syntax Highlight 只负责颜色，不做类型推导、跳转或补全。想用 ref()、defineProps() 的语义提示，必须额外配 SublimeLSP + Volar（不是 Vetur）。
- 补全和 snippet 可选
Vuejs Complete Package，提供v-if、props/data/methods等 Tab 补全 - 若发现
this.$refs、this.$emit无提示，建议加装JS Custom或启用SublimeLSP-eslint配合项目级.eslintrc.js - 不要同时装多个 Vue 高亮插件，比如
Vue Syntax Highlight和VueJS二选一，否则冲突概率极高
最常被忽略的是：装完插件不手动绑定后缀，或者以为装了就自动生效；其次是 vue_version 没设对，导致 setup 语法高亮断裂；还有人忘了单独装 SCSS 或 TypeScript 支持，结果只看到 <style> 块是白的。
