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

必须手动安装 Vue Syntax Highlight 插件、绑定 .vue 后缀为 Vue Component、配置 vue_version 为 "3" 并启用嵌套语言开关,三步缺一不可;跳过任一环节,.vue 文件始终显示 Plain Text 或 script/style 区块无高亮。
为什么 Package Control 安装 Vue 插件总失败?
常见错误现象:控制台报 ImportError: No module named 'sublime_plugin',右下角不出现 Vue Component 选项。
- 装错插件名是主因:搜
vue syntax或vue highlight极易选中已停更的VueJS(ST2 旧包)或vue-component(不兼容 ST4),它们无法加载sublime_plugin模块 - 唯一可用插件名是严格大小写的
Vue Syntax Highlight:首字母大写、中间空格、末尾带s和大写H - 装完后检查
Preferences → Browse Packages…目录下是否存在Vue Syntax Highlight/文件夹(不是vuejs/或vue-component/) - 若已装错,先用
Package Control: Remove Package卸载,再重试;禁用旧插件也能避免语法冲突
手动绑定 .vue 后缀为 Vue Component 是必须步骤
插件只提供语法定义文件 Packages/Vue Syntax Highlight/Vue.sublime-syntax,不会自动注册文件关联。没这步,Sublime 根本不调用该语法。
Vue 3 组合式 API 与 最佳实践,涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 打开任意一个
.vue文件 - 点击右下角当前语法名(如显示
Plain Text) - 选择
Open all with current extension as…→ 点击Vue Component(注意:不是Vue、不是HTML、也不是Vue Template) - 如果菜单里没有
Vue Component,说明插件未加载成功,按Ctrl+`查控制台报错;常见原因是 Package Control 版本太旧,需先升级
怎么让 <script setup lang="ts"> 和 <style scoped lang="scss"> 正确高亮?
Vue Syntax Highlight 本身不渲染 JS/TS/CSS,它靠 Sublime 的嵌入语法机制把区块交给对应语言插件处理。灰色 ≠ Vue 插件坏了,而是子语言链断了。
立即学习“前端免费学习笔记(深入)”;
- 确认已安装对应语言支持:TS 高亮需
JavaScriptNext - ES6 Syntax或官方TypeScript插件;SCSS 高亮需单独装SCSS插件(作者css415),并确保打开一个.scss文件时右下角显示SCSS - 进
Preferences → Package Settings → Vue Syntax Highlight → Settings,在 User 配置中确保有:"vue_version": "3""enable_ts_in_script": true(不是enable_js_in_script)"enable_vue_blocks": true - 临时验证法:把
.vue文件后缀临时改成.js,看<script>区块是否恢复高亮——能恢复说明是 Vue 层解析失败,不是底层插件问题
最容易被忽略的是:即使插件装对、后缀绑对,只要没开 enable_ts_in_script 或 vue_version 仍为 "2",setup 语法和预处理器区块就永远是灰色。Sublime 的嵌入语法链非常脆弱,一环断,全链失效。

















