Vue Syntax Highlight 是当前唯一可靠选择，它能正确高亮 .vue 文件的 template/script/style 三部分，并支持 TS、SCSS 等语法；需先手动安装 Package Control，再安装该插件，最后手动绑定 .vue 后缀并更换 JavaScriptNext 语法以支持 ES6/TS。

Vue Syntax Highlight 是当前唯一可靠选择

Sublime Text 原生不识别 .vue 文件，打开就是纯文本；而所谓“vue-component”插件早已停止维护，只支持 ST2，装在 ST3/ST4 上会直接报错 ImportError: No module named 'sublime_plugin'，根本无法加载。目前唯一持续更新、无冲突、开箱即用的方案是 Vue Syntax Highlight——它不是 IDE 级补全工具，但能把 、、 三块分别按 HTML/JS/CSS 正确着色，连 lang="ts"、scoped、lang="scss" 都能识别。

安装 Package Control 是前置硬门槛

没装 Package Control，后面所有插件都装不了。别跳过这步，也别信“自动检测安装”的说法——2026 年实测必须手动执行：

• 按 Ctrl+` 打开控制台
• 粘贴并回车：import urllib.request,os,hashlib; exec(urllib.request.urlopen('https://packagecontrol.io/installation.py').read().decode('utf-8'))
• 重启 Sublime，确认 Preferences → Package Control 菜单项已出现

常见失败原因：网络被拦截（换用国内镜像源或离线安装）、路径含中文、杀毒软件拦截写入 Installed Packages 目录。

装完插件后必须手动绑定 .vue 后缀

很多人装完 Vue Syntax Highlight 发现 .vue 文件还是灰的——因为插件不会自动接管文件关联。你得主动告诉 Sublime：“以后所有 .vue 都用这个语法”。操作很简单：

• 打开任意一个 .vue 文件
• 点击右下角显示的语法名（通常是 Plain Text 或 HTML）
• 选 Open all with current extension as → Vue Component

这一步会写入用户级配置，之后新建/打开的 .vue 文件都会自动高亮。如果跳过，每次都要手动 Set Syntax → Vue Component，非常反直觉。

script 块里 ES6/TS 仍不亮？

换掉默认 JavaScript 语法

Vue Syntax Highlight 只负责区块划分，不重写 JS 解析逻辑。所以 defineProps、ref()、async setup() 这些组合式 API 在 里仍是浅灰色——这不是插件问题，是 Sublime 自带的 JavaScript 语法太老。解决办法是换用社区维护的 JavaScriptNext - ES6 Syntax：

• 用 Package Control: Install Package 安装 JavaScriptNext - ES6 Syntax
• 在 .vue 文件的 区域右键 → Set Syntax → JavaScriptNext → JavaScriptNext - ES6 Syntax
• 如需 lang="ts" 支持，额外装 TypeScriptSyntax，再为该 script 块单独设置一次语法

别碰早已废弃的 Vuejs 插件（作者 emeraldwalk），它和 Vue Syntax Highlight 冲突严重，一装就导致 template 失效、script 块变白板。

最容易被忽略的其实是“重启”和“手动绑定”这两步——插件装完不重启，语法注册不生效；装完不绑定后缀，等于白装。Vue 开发不需要重型工具链，但每一步都得踩准节奏。