必须安装 vue syntax highlight 插件，严格输入“vue syntax highlight”（首字母大写、中间空格、末尾带s），其他如vuejs或vue-component在st4下失效或报错；装完还需手动将.vue文件关联为vue component语法，并配置vue_version为"3"、enable_ts_in_script为true等嵌入规则。
装哪个插件？只认 Vue Syntax Highlight
Sublime Text 默认不识别 .vue 文件，打开就是白底黑字——这不是你配错了，是它压根没语法定义。真正起作用的只有 Vue Syntax Highlight 这一个插件，其他名字相似的（比如 VueJS、vue-component）在 ST4 下基本失效或报错。
-
VueJS：已停更，ST4 加载失败，控制台报ImportError: No module named 'sublime_plugin' -
vue-component：仅适配 ST2，ST3/ST4 不兼容，defineProps()和withDefaults()直接漏高亮 - 必须通过 Package Control 严格输入
Vue Syntax Highlight（首字母大写、中间空格、末尾带s）安装 - 装完检查
Preferences → Browse Packages…下是否存在Vue Syntax Highlight/文件夹（不是vuejs/）
为什么装完还是 Plain Text？缺了文件关联这步
插件只提供语法文件 Packages/Vue Syntax Highlight/Vue.sublime-syntax，不会自动把 .vue 后缀绑定过去。跳过这步，永远显示为纯文本。
- 打开任意一个
.vue文件 - 点击右下角当前语法名（如
Plain Text） - 选择
Open all with current extension as…→ 找到并点击Vue Component（注意不是Vue或HTML） - 如果菜单里没出现
Vue Component，按Ctrl+`查控制台是否有报错；常见原因是 Package Control 版本太旧，先升级它
<script setup lang="ts"></script> 还是灰色？检查嵌入配置和子语言支持
Vue Syntax Highlight 依赖 Sublime 的嵌入语法机制来高亮区块内内容。<script></script> 块内无颜色，90% 是嵌入规则没生效，不是 Vue 插件本身问题。
- 进
Preferences → Package Settings → Vue Syntax Highlight → Settings，确认"vue_version": "3"已设为"3"（默认可能是"2"） - 在用户配置中加入嵌入开关：
"enable_vue_blocks": true、"enable_ts_in_script": true（不用enable_js_in_script）、"enable_css_in_style": true - 确保已单独安装对应子语言插件：TS 需
JavaScriptNext - ES6 Syntax或官方TypeScript插件；SCSS 需SCSS插件（作者css415），且开一个.scss文件确认右下角显示SCSS - 临时验证法：把
.vue文件后缀临时改成.js，看<script></script>区块是否恢复高亮——能恢复说明是 Vue 层解析失败，不是 Sublime 整体崩溃
别指望它做语义提示
Vue Syntax Highlight 只负责着色，不提供类型推导、跳转、补全等能力。想用 defineProps 补全或悬停看类型，得另配 SublimeLSP + Volar；格式化要靠 JsPrettier + Prettier，不是插件自带的。
复杂点在于：每一块（<template></template>、<script></script>、<style></style>）都依赖不同子系统协同工作，任何一环断掉，高亮就局部失效——而错误提示往往藏在控制台里，不主动查就卡住不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
