必须安装Vue Syntax Highlight插件、手动绑定.vue后缀为Vue Component、配置vue_version为"3"并启用嵌套语法开关,三步缺一不可;否则.vue文件始终显示Plain Text。

必须装 Vue Syntax Highlight、手动绑定 .vue 后缀为 Vue Component、配置 vue_version 为 "3",三步缺一不可;跳过任意一步,.vue 文件永远显示 Plain Text。
装插件时别输错名字:Vue Syntax Highlight(带 s,首字母大写)
Package Control 搜索时,必须严格输入 Vue Syntax Highlight —— 注意中间空格、末尾带 s、H 大写。搜 vue syntax 或 vue highlight 极易选错旧包或废弃插件。
- 装
VueJS或vue-component会导致控制台报ImportError: No module named 'sublime_plugin',且右下角不出现Vue Component选项 - 装完后检查
Preferences → Browse Packages…目录下是否存在Vue Syntax Highlight/文件夹(不是vuejs/或vue-component/) - ST4 用户务必确认该插件 GitHub 最后更新在 2023 年之后,老版本用
.tmLanguage格式,withDefaults()和defineProps()参数部分会漏高亮
手动绑定 .vue 后缀到 Vue Component 语法
插件只提供 Packages/Vue Syntax Highlight/Vue.sublime-syntax 文件,不会自动注册文件关联。没这步,插件等于没装。
- 打开任意一个
.vue文件,点击右下角当前语法名(如显示Plain Text) - 选择
Open all with current extension as…→ 找到并点击Vue Component(注意不是Vue或HTML) - 若菜单里没有
Vue Component,说明插件根本没加载成功——按Ctrl+`查控制台报错,常见原因是 Package Control 版本太旧,需先升级
<script setup lang="ts"> 还是灰色?检查嵌套开关和子语言支持
Vue Syntax Highlight 不渲染 JS/TS/CSS,它靠 Sublime 的嵌入语法机制把区块交给对应语言插件处理。灰色 ≠ Vue 插件坏了,而是子语言链断了。
递归分析 Vue 项目组件依赖,从入口文件生成组件层级图,支持 Vue 2/3,输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记(深入)”;
- 确认已安装对应语言插件:用 TypeScript 就装
JavaScriptNext - ES6 Syntax或官方TypeScript插件;用 SCSS 就装SCSS(作者css415),并打开一个.scss文件确认右下角显示SCSS - 进
Preferences → Package Settings → Vue Syntax Highlight → Settings,在 User 配置中确保有:{ "vue_version": "3", "enable_vue_blocks": true, "enable_ts_in_script": true, "enable_css_in_style": true } - 临时验证法:把
.vue文件后缀改成.js,看<script>区块是否恢复高亮——能恢复,说明问题出在 Vue 层解析,不是底层 JS/TS 插件失效
为什么 v-if、@click 没独立颜色?主题没匹配 scope
默认 Vue Syntax Highlight 只做 HTML 级别高亮,指令和普通属性同色。这不是语法定义缺失,而是当前主题未渲染 entity.other.attribute-name.vue 这类 scope。
- 换用支持 Vue scope 的主题(如
Monokai Pro、Material Theme),或手动编辑当前主题的.tmTheme文件添加对应 scope 规则 - 不要改
Vue.sublime-syntax文件——它自带嵌入声明,改错会导致整个语法崩溃 - 最常被忽略的是:
enable_vue_blocks必须设为true,否则后面所有enable_*开关都不生效
绑定后缀这一步只写入当前用户配置,重装 Sublime 或换机器就得重来;vue_version 默认可能是 "2",不手动改成 "3",defineProps 的括号配对和类型参数就无法正确着色。

















