Sublime Text 需安装 Vue Syntax Highlight 插件实现 .vue 文件语法高亮，配置 vue_version 为 3 并配合 SCSS/LESS 等预处理器插件支持对应 style 语言，再通过 VueJS Complete Package 添加代码片段支持。
Vue 单文件组件（.vue）在 Sublime Text 里没有语法高亮
Sublime Text 默认不识别 .vue 文件，打开后全是白底黑字，<template></template>、<script setup></script>、<style scoped></style> 全部没颜色。这不是你配置错了，是它压根没装 Vue 的语法定义。
解决办法是手动安装一个社区维护的语法包，最稳定的是 Vue Syntax Highlight —— 它不是官方出品，但长期维护、适配 Vue 2/3、支持 setup 和 defineProps 等新写法。
- 用
Package Control安装：按Ctrl+Shift+P（Win/Linux）或Cmd+Shift+P（macOS），输入Install Package，回车后搜Vue Syntax Highlight，选中安装 - 装完不用重启，但得手动把当前
.vue文件关联语法：右下角点击当前语法名（比如 “Plain Text”），选Open all with current extension as… → Vue - 如果右下角没出现
Vue选项，说明包没加载成功，检查 Sublime 控制台（Ctrl+`）有没有报错，常见是Package Control自身没更新，先升级它再重试
Sublime Text 4 安装后仍不生效，script setup 还是灰色
这是语法包版本和 Sublime 内核匹配问题。Sublime Text 4 默认启用新的 sublime-syntax 格式，而老版 Vue Syntax Highlight 用的是旧的 tmLanguage，部分新语法（比如 defineProps 类型推导、withDefaults）会漏高亮。
- 确认你装的是最新版
Vue Syntax Highlight（GitHub 上最后更新时间应在 2023 年后） - 进
Preferences → Package Settings → Vue Syntax Highlight → Settings，检查"vue_version": "3"是否已设为3（默认可能是2） - 如果仍无效，临时方案：把
.vue文件后缀改成.js或.html看对应区块是否恢复高亮——能恢复说明是 Vue 语法层解析失败，不是 Sublime 整体崩了
想让 <style lang="scss"></style> 也高亮，但只亮了 CSS 部分
Vue 语法包本身只负责结构分块（把 <style></style> 当成一个整体），具体里面写的是 SCSS 还是 Less，得靠对应预处理器的语法支持来渲染。Sublime 默认只有 CSS，没装 SCSS 插件的话，lang="scss" 区域会退化成纯文本。
立即学习“前端免费学习笔记（深入）”；
- 单独安装
SCSS包（Package Control 里搜SCSS，作者是css415） - 装完后，打开一个
.scss文件，确认右下角显示SCSS；再回去看.vue里的<style lang="scss"></style>，应该就正常了 - 同理，
lang="less"要装LESS包，lang="postcss"目前无稳定支持，建议改用lang="css"+ 注释说明
用 Vue Component 快捷键生成模板，但代码片段不触发
语法高亮和代码片段是两回事。Vue Syntax Highlight 只管颜色，不管补全。Sublime 默认没有 Vue 片段，要额外装插件或自己配。
- 推荐装
VueJS Complete Package（注意不是VueJS那个老包），它带vue、vue2、vue3多套 snippet，支持<script setup></script>结构 - 装完后，在
.vue文件里输入vue+Tab，就能展开完整单文件模板 - 如果 Tab 不响应，检查当前文件语法是否真的是
Vue（右下角确认），且没被其他 snippet 插件劫持（比如 Emmet 在<template></template>里优先级更高，可临时关掉 Emmet 测试）
真正麻烦的不是装不上，而是装了多个 Vue 相关包后互相冲突——比如两个包都试图接管 .vue 关联，结果一个生效一个失效。遇到这种情况，留一个 Vue Syntax Highlight（高亮）+ 一个 VueJS Complete Package（片段），其余全禁用。
