Sublime Text安装前端Vue单文件组件高亮与格式化-sublime-PHP中文网

必须严格安装vue syntax highlight插件（首字母大写、中间空格、末尾带s），手动绑定.vue后缀为vue component，并配置"vue_version":"3"及"enable_ts_in_script":true，三者缺一不可；否则.vue文件始终白底黑字或script/style区块灰色。

sublime text安装前端vue单文件组件高亮与格式化

装 Vue Syntax Highlight 插件必须严格匹配名字

装错名字，.vue 文件就永远是白底黑字——这不是配置问题，是插件根本没加载。Package Control 搜索时必须一字不差输入 Vue Syntax Highlight（首字母大写、中间空格、末尾带 s），不能搜 vuejs、vue-component 或漏掉 s 的旧版。

装完去 Preferences → Browse Packages… 确认存在 Vue Syntax Highlight/ 目录；如果看到的是 vuejs/，说明装错了，得先用 Package Control: Remove Package 卸干净再重装。

常见报错 ImportError: No module named 'sublime_plugin'，基本就是混装了废弃插件导致的冲突。

手动绑定 .vue 后缀为 Vue Component 语法

插件只提供语法定义文件 Packages/Vue Syntax Highlight/Vue.sublime-syntax，不会自动注册文件关联。跳过这步，所有 .vue 文件始终显示 Plain Text。

操作路径：

打开任意一个 .vue 文件
点击右下角当前语法名（比如显示 Plain Text）
选择 Open all with current extension as… → 找到并点击 Vue Component（注意不是 Vue 或 HTML）

如果菜单里压根没出现 Vue Component，说明插件未加载成功，按 Ctrl+` 查控制台报错，别硬试。

<script setup lang="ts"> 还是灰色？检查嵌套语法链路</script>

Vue Syntax Highlight 不负责渲染 JS/TS/CSS，它只把 <script setup lang="ts"></script> 这段“转交”给对应语言插件处理。灰色 ≠ Vue 插件坏了，而是子语言没接上。

前端美化

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载

必须确认以下三点同时满足：

已安装 JavaScriptNext - ES6 Syntax 或官方 TypeScript 插件（用于 lang="ts"）
已安装 SCSS 插件（作者 css415，用于 lang="scss"）
Preferences → Package Settings → Vue Syntax Highlight → Settings 中，"vue_version": "3" 和 "enable_ts_in_script": true 都已设好

临时验证法：把 .vue 文件后缀改成 .ts，看 <script></script> 区块是否恢复高亮——能恢复，说明问题出在 Vue 层解析，不是底层 TS 插件失效。

用 JsPrettier 格式化 .vue 文件要配对扩展名和 node 路径

Sublime 本身不支持 .vue 格式化，得靠 JsPrettier 调用外部 prettier。光装插件不够，关键两处必须改：

进入 Preferences → Package Settings → JsPrettier → Settings – User，确保包含：

{
  "custom_file_extensions": ["vue"],
  "node_path": "/usr/local/bin/node",
  "prettier_cli_path": ""
}

"custom_file_extensions": ["vue"] 是开关，没它 JsPrettier 压根不处理 .vue 文件；node_path 必须填对（macOS 常见是 /usr/local/bin/node，Windows 是类似 C:\Program Files\nodejs\node.exe 的路径），否则格式化会静默失败。

格式化快捷键默认是 Ctrl+Alt+F，右键菜单也有 JsPrettier: Format Code，但前提是上述配置全生效。

真正卡住的地方往往不是插件没装，而是 Vue Component 语法没绑、vue_version 没设成 "3"、或者 node_path 指向了不存在的位置——这三个点一漏，整个流程就断在半路。