Vue开发者必看的Sublime语法高亮与提示优化-sublime-PHP中文网

必须安装vue syntax highlight插件、手动绑定.vue为vue component语法、配置vue_version为3并启用子语言支持，三步缺一不可；否则.vue文件始终白底黑字。

vue开发者必看的sublime语法高亮与提示优化

Sublime Text 不能直接运行 Vue 项目，也不提供真正的 Vue 语义级提示（比如 this.$refs 补全、defineProps 类型推导），它只负责写代码；所谓“高亮”和“提示”必须靠插件组合+手动配置才能凑出可用效果，漏掉任意一环就会白底黑字或指令不着色。

装哪个插件？只认 `Vue Syntax Highlight`

别搜“vue plugin”或“vuejs”，Package Control 中必须严格输入 Vue Syntax Highlight（首字母大写、中间空格、末尾带 s 和 H）。其他名字相似的插件基本失效：

VueJS：已停更，ST4 加载失败，控制台报 ImportError: No module named 'sublime_plugin'
vue-component：仅适配 ST2，defineProps() 和 withDefaults() 直接漏高亮
Vuejs Snippets：只提供代码片段补全，不管语法着色

装完后检查 Preferences → Browse Packages… 下是否存在 Vue Syntax Highlight/ 文件夹（不是 vuejs/）。

为什么 .vue 文件还是 Plain Text？缺了文件绑定

插件只提供语法定义文件 Packages/Vue Syntax Highlight/Vue.sublime-syntax，不会自动把 .vue 后缀关联过去。跳过这步，永远是白底黑字。

打开任意一个 .vue 文件
点击右下角当前语法名（如 Plain Text）
选择 Open all with current extension as… → Vue Component（注意不是 Vue 或 HTML）

如果菜单里没出现 Vue Component，按 Ctrl+` 查控制台是否有报错；常见原因是 Package Control 版本太旧，先升级它。

Vue

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

`<script setup lang="ts"></script>` 还是灰色？子语言嵌入没开

Vue Syntax Highlight 不渲染 JS/TS/CSS，它靠 Sublime 的嵌入机制把 <script></script> 块交给对应语言插件处理。灰色 ≠ 插件坏了，而是子语言没接上。

进 Preferences → Package Settings → Vue Syntax Highlight → Settings
在用户配置中加入："vue_version": "3"、"enable_ts_in_script": true（不用 enable_js_in_script）
确保已安装 JavaScriptNext - ES6 Syntax 或官方 TypeScript 插件，并且单独为 <script lang="ts"></script> 块设过语法（右键 → Set Syntax）
<style lang="scss"></style> 不高亮？装 SCSS 插件（作者 css415），再开一个 .scss 文件确认右下角显示 SCSS

临时验证法：把 .vue 文件后缀临时改成 .js，看 <script></script> 区块是否恢复高亮——能恢复说明是 Vue 层解析失败，不是 Sublime 整体崩溃。

别指望它做语义提示，`Vue Syntax Highlight` 只管颜色

它不提供类型推导、跳转、this. 属性补全，也不识别 v-model:value 或 #default 插槽语法。想获得基础 JS 补全（如 console.、Array.prototype.），得靠 JavaScriptNext 或 ESLint 配合；真正语义级提示需搭配 SublimeLSP + volar，但配置复杂、稳定性差，远不如 VS Code 开箱即用。

容易被忽略的是：即使所有配置都对，v-if、@click 等指令是否独立着色，取决于你当前配色主题是否定义了 entity.other.attribute-name.vue 这类 scope —— 很多轻量主题压根没写，换 Dracula 或 Nord 才可能见效。