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 级补全工具，但能把 <template></template>、<script></script>、<style></style> 三块分别按 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 在 <script setup></script> 里仍是浅灰色——这不是插件问题，是 Sublime 自带的 JavaScript 语法太老。解决办法是换用社区维护的 JavaScriptNext - ES6 Syntax：
- 用
Package Control: Install Package安装JavaScriptNext - ES6 Syntax - 在
.vue文件的<script></script>区域右键 →Set Syntax → JavaScriptNext → JavaScriptNext - ES6 Syntax - 如需
lang="ts"支持，额外装TypeScriptSyntax，再为该 script 块单独设置一次语法
别碰早已废弃的 Vuejs 插件（作者 emeraldwalk），它和 Vue Syntax Highlight 冲突严重，一装就导致 template 失效、script 块变白板。
最容易被忽略的其实是“重启”和“手动绑定”这两步——插件装完不重启，语法注册不生效；装完不绑定后缀，等于白装。Vue 开发不需要重型工具链，但每一步都得踩准节奏。
