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

不能一键开启——Sublime Text 没有“一键”支持 Vue 全语法高亮的机制,必须分三步手动完成:装对插件、绑定后缀、配对嵌套规则。跳过任一环节,.vue 文件始终显示 Plain Text,不是操作失误,是 Sublime 根本没识别出这是 Vue 文件。
必须安装 Vue Syntax Highlight 插件(且名字不能错)
Sublime 原生不带任何 .vue 语法定义,靠插件提供 Vuе.sublime-syntax 文件。目前唯一持续维护、兼容 ST4、正确解析 <script setup lang="ts"></script> 和 <style scoped lang="scss"></style> 的插件,只有 Vue Syntax Highlight。
- 按
Ctrl+Shift+P(Windows/Linux)或Cmd+Shift+P(macOS),输入Package Control: Install Package回车 - 等列表加载完,严格输入:
Vue Syntax Highlight(首字母大写、中间空格、末尾带s和大写H) - 装错如
VueJS或vue-component会触发ImportError: No module named 'sublime_plugin',右下角不出现Vue Component选项 - 装完检查
Preferences → Browse Packages…下是否存在Vue Syntax Highlight/文件夹(不是vuejs/或vue-component/)
必须手动把 .vue 后缀绑定为 Vue Component
插件只放语法文件,不注册文件关联。不执行这步,所有 .vue 文件永远是白底黑字。
从零开始编排 SpringBoot+Vue 全栈项目工作流,适用于新建全栈项目或完整脚手架请求,触发后依次调用 product‑spec‑builder(需求调研)等模块。
- 打开任意一个
.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"></script> 区块灰色 ≠ Vue 插件坏了,而是它没把这段交给 TypeScript 插件处理。Vue Syntax Highlight 本身不渲染 JS/TS/CSS,只做“路由”。
立即学习“前端免费学习笔记(深入)”;
- 进
Preferences → Package Settings → Vue Syntax Highlight → Settings - 在 User 配置中确保包含以下三项:
-
"vue_version": "3"(默认可能是"2",会导致defineProps等漏高亮) -
"enable_ts_in_script": true(不是enable_js_in_script) "enable_vue_blocks": true- 同时确认已安装对应子语言插件:用 TS 就装
JavaScriptNext - ES6 Syntax或官方TypeScript;用 SCSS 就装SCSS(作者css415),并打开一个.scss文件验证右下角是否显示SCSS - 临时验证法:把
.vue文件后缀改成.js,看<script></script>是否恢复高亮——能恢复,说明问题纯在 Vue 层解析
最容易被忽略的是 "vue_version": "3" 这一项。很多用户装对插件、绑对后缀,但没改这个值,结果 defineProps、withDefaults、useSlots 全部不着色,还以为是插件不支持 Vue 3。它默认不是 "3",必须手动设。

















