Sublime Text如何配置Vue开发环境？高亮与格式化插件安装-sublime-PHP中文网

必须安装vue syntax highlight插件（严格输入首字母大写、中间空格、末尾带s和大写h），手动绑定.vue后缀为vue component，且在用户配置中设"vue_version":"3"、"enable_ts_in_script":true、"enable_vue_blocks":true，三者缺一不可。

sublime text如何配置vue开发环境？高亮与格式化插件安装

Vue Syntax Highlight 是唯一能真正让 .vue 文件在 Sublime Text 4 中正确高亮的插件，装错名字、跳过绑定、漏配版本，都会导致白底黑字或 <script setup></script> 块全灰——这不是 Sublime 的问题，是配置链断了。

装对插件名：Vue Syntax Highlight（一个字母都不能错）

Package Control 里搜 “vue” 或 “vuejs” 会直接装到已停更的 VueJS，报 ImportError: No module named 'sublime_plugin'；输成 vue-component 或少个 s（比如 Vue Syntax Highlight）也会加载失败。

按 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（macOS），输入 Package Control: Install Package 回车
等列表加载完，**严格输入 Vue Syntax Highlight**（首字母大写、中间空格、末尾带 s 和大写 H），回车安装
装完进 Preferences → Browse Packages…，确认存在 Vue Syntax Highlight/ 文件夹，不是 vuejs/ 或 vim-vue/
若右下角仍显示 Plain Text，按 Ctrl+` 看控制台是否有报错；有 ImportError 就说明旧插件冲突，先用 Package Control: Remove Package 卸干净

手动绑定 .vue 后缀为 Vue Component

插件只提供语法定义文件 Packages/Vue Syntax Highlight/Vue.sublime-syntax，不会自动把 .vue 文件和它关联。跳过这步，所有 .vue 文件永远是纯文本。

vue-component-analyzer

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

下载

打开任意一个 .vue 文件
点击右下角当前语法名（如 Plain Text）
选 Open all with current extension as… → 找到并点击 Vue Component（注意：不是 Vue、不是 HTML (Vue)、也不是 Vue Template）
如果菜单里压根没出现 Vue Component，说明插件根本没加载成功，不是绑定问题，得回上一步查控制台

必须改 user 配置：vue_version 和 enable_ts_in_script

<script setup lang="ts"></script> 里函数名还是灰色？不是插件坏了，是嵌入语法链没接通。Sublime 用嵌入机制把 <script></script> 块交给 JS/TS 插件渲染，Vue Syntax Highlight 只负责“拆包”，不负责“着色”。

进 Preferences → Package Settings → Vue Syntax Highlight → Settings
在 User 配置中写入（不要删掉已有内容，只补关键项）：
```
{"vue_version":"3","enable_ts_in_script":true,"enable_vue_blocks":true}
```
"vue_version":"2" 是默认值，不改就识别不了 defineProps、v-model:value、#default 插槽等 Vue 3 特性
若用 lang="ts"，还需确保已装 JavaScriptNext - ES6 Syntax 或官方 TypeScript 插件，并单独打开一个 .ts 文件，右下角应显示 TypeScript

格式化要靠 JsPrettier + Prettier CLI

Sublime 本身不带格式化能力。JsPrettier 是目前最稳定的桥接方案，但需额外配 CLI 和参数，否则保存时会报错或忽略 <style></style> 块。

用 Package Control 安装 JsPrettier
确保系统已全局安装 prettier 和 prettier-plugin-vue：npm install -g prettier prettier-plugin-vue
进 Preferences → Package Settings → JsPrettier → Settings，User 配置中加入：
```
"additional_cli_args": {"--parser": "vue", "--vue-html-indent": "2"}
```
若项目用了 node_modules/.bin/prettier，需在 JsPrettier 设置里指定 "node_path" 或 "prettier_cli_path"，否则找不到本地 CLI