Sublime怎么支持Vue_Sublime Vue语法高亮教程【前端】

必须安装 vue syntax highlight 插件并手动绑定 .vue 扩展名为 vue component 语法，否则高亮不生效；还需配置 emmet 作用域、开启 enable_ts_in_script 并安装 typescript 插件以支持 script 区块的 ts 高亮。

Vue Syntax Highlight 插件必须装，别选错名字

sublime 默认完全不认识 .vue 文件，打开就是纯文本——这不是你配置错了，是它压根没语法定义。真正起作用的是 Vue Syntax Highlight（作者 vuejs-sublime-project），不是早已停更的 Vuejs 或只提供片段的 Vuejs Snippets。装错名字，高亮就永远不生效。

• 用 Ctrl+Shift+P → Package Control: Install Package → 搜 Vue Syntax Highlight，认准 github 仓库名 vuejs-sublime-project/vue-syntax-highlight
• 装完必须重启 Sublime（2026 年 2 月最新版仍需重启才能加载 .sublime-syntax 文件）
• 装完后进 Preferences → Package Settings，确认只有 Vue Syntax Highlight，如果还列着 Vuejs，右键禁用它，否则会冲突

手动绑定 .vue 扩展名到 Vue Component 语法

插件装了 ≠ 自动生效。Sublime 不会主动把 .vue 后缀和插件提供的 Vue Component 语法关联起来——这是最常被跳过的一步，也是 80% 用户“明明装了却没高亮”的原因。

• 打开任意 .vue 文件，看右下角状态栏显示的是 Plain Text 还是别的
• 点击它 → Open all with current extension as… → 搜索并选中 Vue Component（注意不是 Vue 或 HTML）
• 如果菜单里没看到 Vue Component，说明插件没正确解压：进 Preferences → Browse Packages…，检查是否存在 Vue Syntax Highlight/ 目录（不是 vuejs/）

template 中 Emmet 不工作？要显式启用作用域

<template></template> 块本质是 HTML，但 Sublime 不会自动继承父语法上下文，Emmet 默认只在 HTML、xml 等原生语法下激活，所以在 .vue 里敲 div.my-class + Tab 没反应，不是 Emmet 没装，是它没被“告诉”该在这里干活。

• 打开 Preferences → Settings – User
• 添加以下配置（确保 Emmet 已安装）：

  {   "emmet_syntax_scopes": {     "vue": "html"   } }

• 保存后重启，<template></template> 内即可正常使用 Emmet 缩写

script 区块里 TypeScript 或 es6 高亮异常？检查嵌套语言开关

Vue Syntax Highlight 支持在 <script></script> 里自动切换 JS/TS 高亮，但默认只开 JS；如果你用 setup + lang="ts"，却还是灰扑扑的，大概率是 enable_ts_in_script 没开，或者缺少底层 TS 语法支持。

立即学习“前端免费学习笔记（深入）”；

• 进 Preferences → Package Settings → Vue Syntax Highlight → Settings
• 确认开启：

  "enable_vue_blocks": true, "enable_ts_in_script": true,

• 同时确保已安装 TypeScript 插件（不是 Babel，后者会抢走作用域导致 TS 高亮失效）
• 若仍无效，右键 <script></script> 块 → Set Syntax → TypeScript 临时验证是否是插件问题

最容易被忽略的其实是「绑定扩展名」那一步——很多人装完插件就以为结束了，结果每次打开 .vue 还得手动点右下角。还有人把 enable_vue_blocks 设为 false，以为只是个小开关，其实关了它，整个区块嵌套高亮就全崩了。