装错插件名会导致<script setup>全灰或ImportError</script>
必须用 Package Control: Install Package 命令面板，严格输入 Vue Syntax Highlight（首字母大写、中间空格、末尾带 s），否则大概率踩坑：
- 搜
vue syntax或vue highlight容易选到停更的旧版Vue Syntax Highlight（少s），在 ST4 上直接报ImportError: No module named 'sublime_plugin' - 装
vue-component或VueJS会和新插件冲突，<script setup></script>区块变白底黑字 - 装完后去
Preferences → Browse Packages…确认存在Vue Syntax Highlight/目录，不是vuejs/或Vue/
.vue 文件始终显示 Plain Text？缺了手动绑定这步
插件只提供语法定义文件 Packages/Vue Syntax Highlight/Vue.sublime-syntax，不会自动把 .vue 后缀和它关联。跳过这步，所有 .vue 文件永远是纯文本。
- 打开任意一个
.vue文件，点击右下角当前语法名（比如显示Plain Text） - 选择
Open all with current extension as…→ 找到并点击Vue Component（注意不是Vue或HTML） - 如果菜单里没有
Vue Component，说明插件根本没加载成功——按Ctrl+`看控制台是否有报错 - 该操作会在
Preferences → Settings – User中自动生成一行："syntaxes": {"vue": "Packages/Vue Syntax Highlight/Vue.sublime-syntax"}
<script setup lang="ts"></script> 还是灰色？嵌套语法没接上
Vue Syntax Highlight 本身不渲染 JS/TS/CSS，它靠 Sublime 的嵌入语法机制，把 <script></script> 块交给对应语言插件处理。灰色 ≠ Vue 插件坏了，而是子语言没接上。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 确认已安装对应语言支持：用 TypeScript 就得装
JavaScriptNext - ES6 Syntax或官方TypeScript插件；用 SCSS 就得装SCSS（作者css415） - 进
Preferences → Package Settings → Vue Syntax Highlight → Settings，User 配置中确保启用："enable_ts_in_script": true（不是enable_js_in_script）、"enable_vue_blocks": true、"vue_version": "3" - 临时验证法：把文件后缀改成
.ts，看<script></script>区是否恢复高亮——能恢复，就说明问题出在 Vue 层解析，不是底层 TS 插件失效
格式化和类型提示得另配，不是插件自带的
Vue Syntax Highlight 只负责“看得清”，不负责“排得齐”或“跳得准”。
- 格式化要靠
JsPrettier+Prettier：先全局装npm install -g prettier，再通过 Package Control 安装JsPrettier，最后在Preferences → Package Settings → JsPrettier → Settings – User加上："custom_file_extensions": ["vue"] - 想补全
defineProps/defineEmits？得加SublimeLSP+Volar——原生 Sublime 没语言服务器，光标悬停看不到类型、Ctrl+Click跳不到声明，这些语义能力它做不了 -
Emmet可以帮你写 HTML，但别指望它自动展开v-model或v-for的完整结构，得自己配 snippet 或接受手动补全
Vue 3 的 <script setup></script> 解析对嵌套语法链要求很细，vue_version、子语言插件、嵌入开关三者必须同时对齐，漏一个就整块变灰——这不是配置顺序问题，是 Sublime 的语法解析机制决定的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
