Sublime Text一键安装Vue开发插件-sublime-PHP中文网

必须安装vue syntax highlight插件、手动绑定.vue后缀为vue component、配置vue_version为3，三步缺一不可；否则.vue文件始终显示plain text。

sublime text一键安装vue开发插件

不能一键安装——Sublime Text 没有“Vue 开发插件”这种打包好的全能包，所谓“一键”只是把三步操作误传为一步。真正起作用的是 Vue Syntax Highlight 插件，但装完它，.vue 文件仍显示 Plain Text，这是正常现象，不是失败。

为什么装了 Vue Syntax Highlight 还是白底黑字？

插件只提供语法定义文件 Packages/Vue Syntax Highlight/Vue.sublime-syntax，不会自动把 .vue 后缀和它绑定。Sublime 不会猜你想要什么，必须手动告诉它。

打开任意一个 .vue 文件
点击右下角当前语法名（比如显示 Plain Text）
选择 Open all with current extension as… → Vue Component（注意：不是 Vue、不是 HTML、也不是 Vue Template）
如果菜单里根本没有 Vue Component，说明插件根本没加载成功，按 Ctrl+` 看控制台是否有 ImportError: No module named 'sublime_plugin' —— 那是装错了旧插件（如 vue-component 或 VueJS）导致的冲突

怎么确保装对了插件名字？

Package Control 里搜 Vue Syntax Highlight 必须严格匹配：首字母大写、中间空格、末尾带 s 和大写 H。搜 vue syntax 或 vue highlight 极易选错。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS）
输入 Package Control: Install Package 回车
等列表加载完，**精确输入 Vue Syntax Highlight**，回车安装
装完后检查 Preferences → Browse Packages… 目录下是否存在 Vue Syntax Highlight/ 文件夹；若存在 Vuejs 或 vue-component，先用 Package Control: Remove Package 卸干净

vue_version 必须设成 "3" 才能高亮 script setup

默认配置中 "vue_version" 很可能是 "2"，不改就识别不了 <script setup></script>、v-model:value、#default 插槽等 Vue 3 特性，<script setup lang="ts"></script> 里的内容依然灰着。

进 Preferences → Package Settings → Vue Syntax Highlight → Settings
在 User 设置里写入：
```
{ "vue_version": "3" }
```
如果用了 lang="ts" 或 lang="scss"，还需确认已装 TypeScriptSyntax 或 SCSS 插件，并单独打开一个 .ts 或 .scss 文件，看右下角是否显示对应语法名