Sublime Text需安装Vue Syntax Highlight插件实现.vue文件基础高亮，再用JavaScriptNext-ES6 Syntax解决script块ES6/TS语法问题，卸载废弃的Vuejs插件以防冲突。
Sublime Text 本身不原生支持 .vue 文件的语法高亮和智能提示，必须通过插件补全。核心问题是：不装插件，打开 .vue 文件就是纯文本；装错插件或配置不当，高亮会断在 <script> 或 <style> 块里，甚至 template 中的指令（如 v-if）完全不识别。
安装 Vue Syntax Highlight 插件（最轻量可靠的高亮方案）
这是目前 Sublime Text 上对 .vue 文件支持最稳定、无依赖、更新勤快的语法包。它不提供 LSP 补全，但把 <template>、<script>、<style> 三块分别按 HTML/JS/CSS 正确着色，连 <script setup> 和 lang="ts" 都能识别。
- 用
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS）呼出命令面板 - 输入
Package Control: Install Package回车 - 搜索
Vue Syntax Highlight，选中安装 - 安装完后，手动右下角点击文件类型 →
Open all with current extension as...→Vue Syntax Highlight
解决 script 块内 ES6/TS 语法不高亮问题
默认 JS 语法无法正确解析 defineProps、defineEmits、ref() 等组合式 API，或 lang="ts" 中的类型标注。这不是 Vue 插件的问题，而是 Sublime 自带的 JavaScript 语法太旧。
- 不要用内置的
JavaScript语法，改用社区维护的JavaScriptNext - ES6 Syntax - 同样通过
Package Control安装该插件 - 安装后，在
.vue文件任意<script>块内右键 →Set Syntax → JavaScriptNext → JavaScriptNext - ES6 Syntax - 若需 TypeScript 支持，额外安装
TypeScriptSyntax插件，并为lang="ts"块单独设置语法
让 template 块支持 Vue 指令和组件名高亮（可选增强）
Vue Syntax Highlight 默认只做基础 HTML 高亮，v-if、@click、:class 这些不会加特殊颜色。想区分指令和普通属性，需要微调语法定义。
立即学习“前端免费学习笔记（深入）”；
- 菜单栏 →
Preferences → Browse Packages...，进入Packages目录 - 找到
Vue Syntax Highlight文件夹 → 打开Vue.sublime-syntax - 搜索
vue-directive，确认其 scope 已启用（通常已开启） - 在配色主题中确保有对应 scope 映射，例如在
Monokai.sublime-color-scheme里添加：
{
"name": "Vue directive",
"scope": "entity.name.tag.vue-directive",
"foreground": "#FF6188"
}
否则即使语法定义了，主题不渲染也白搭。
别碰 Vuejs 插件（已废弃且冲突）
早期流行的 Vuejs 插件（作者 emeraldwalk）早在 2020 年就停止维护，它会强制覆盖 .vue 关联语法，与 Vue Syntax Highlight 冲突，导致 script 块变灰、template 无高亮。如果你之前装过，务必先卸载：
-
Ctrl+Shift+P→Package Control: Remove Package→ 输入Vuejs删除 - 删掉
Packages/Vuejs整个文件夹（防止残留） - 重启 Sublime Text
真正麻烦的不是装什么，而是删干净旧插件再重配——很多高亮失效，根源都在这里没清干净。
