Sublime配置Vue开发环境，轻量开发Vue项目教程-sublime-PHP中文网

sublime text 运行 vue 项目需手动配置：装 vue syntax highlight 插件、绑定 .vue 文件为 vue component、在块中设 javascriptnext 语法、检查主题是否支持 entity.other.attribute-name.vue、并设置 "vue_version": "3"。

sublime配置vue开发环境，轻量开发vue项目教程

Sublime Text 能跑 Vue 项目，但不是“装完插件就亮”，必须手动打通语法识别链——.vue 文件默认是纯文本，defineProps 白、v-if 和 class 同色、<script setup lang="ts"></script> 里类型标红，全是因为某一步断了。

装对插件：只认 `Vue Syntax Highlight`，别碰 `VueJS` 或 `vue-component`

Package Control 里搜到的插件名必须一字不差：Vue Syntax Highlight（首字母大写、空格、末尾带 s 和大写 H）。装错会直接报 ImportError: No module named 'sublime_plugin'，或导致 defineEmits、withDefaults 完全不被识别。

装完去 Preferences → Browse Packages… 确认目录下存在 Vue Syntax Highlight/ 文件夹（不是 vuejs/ 或 vim-vue/）
如果之前装过 VueJS，进 Preferences → Package Settings 把它禁用，否则语法冲突会让高亮降级成 HTML 级别
重启 Sublime Text 是必须的，插件不会热加载

手动绑定 `.vue` 文件类型：右下角点 “Plain Text” → 选 `Vue Component`

插件只提供语法定义，不自动注册后缀。跳过这步，所有 .vue 文件永远显示 Plain Text，重装十遍也没用。

vue-component-analyzer

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

下载

打开任意一个 .vue 文件，点击右下角当前语法名（比如 “Plain Text”）
选 Open all with current extension as… → Vue Component（注意不是 “Vue”、“HTML” 或 “Vue Template”）
如果菜单里没出现 Vue Component，按 Ctrl+` 查控制台是否有报错；常见原因是 Package Control 版本太旧，先升级它

`<script></script>` 块里 `ref()` 还是白的？换 JS 引擎，别动整文件语法

Vue Syntax Highlight 只负责拆块和嵌套识别，ref()、defineProps() 这些组合式 API 的高亮靠的是 JS 语法引擎本身。Sublime 自带的 JavaScript 语法不认识它们。

用 Package Control 安装 JavaScriptNext - ES6 Syntax
在 .vue 文件的 <script></script> 块内右键 → Set Syntax → JavaScriptNext → JavaScriptNext - ES6 Syntax
如果用了 lang="ts"，额外装 TypeScriptSyntax，并为该 <script></script> 块单独设置语法
⚠️ 别在整文件设成 JavaScriptNext，否则 <template></template> 块会失去高亮

`v-if`、`@click` 没颜色？检查主题是否支持 `entity.other.attribute-name.vue` scope

默认 Vue Syntax Highlight 只做 HTML 级别高亮，指令和普通属性同色。这不是插件问题，是配色主题没定义对应 scope。

确认你当前主题（如 Monokai、Solarized）最新版是否包含 entity.other.attribute-name.vue 规则
简单验证法：换用已知支持 Vue scope 的主题，比如 Dracula 或 Nord（需查其 GitHub release note）
若坚持用原主题，可手动编辑 Monokai.sublime-color-scheme，添加对 entity.other.attribute-name.vue 的颜色规则

最常被忽略的其实是 vue_version 配置项：进 Preferences → Package Settings → Vue Syntax Highlight → Settings，确保有 "vue_version": "3"。默认值可能是 "2"，不改就无法识别 v-model:value、#default 插槽等 Vue 3+ 特性。