Sublime Text 4支持Vue高亮与语法提示配置教程-sublime-PHP中文网

必须安装vue syntax highlight插件、手动将.vue后缀绑定为vue component语法、配置vue_version为3并启用ts/scss等子语言支持，三步缺一不可；装错插件名或未绑定后缀会导致白底黑字。

sublime text 4支持vue高亮与语法提示配置教程

Sublime Text 4 默认完全不识别 .vue 文件，打开就是白底黑字——这不是你配错了，是它压根没语法定义。要真正高亮 <template></template>、<script setup lang="ts"></script>、<style scoped lang="scss"></style> 这三块，必须装对插件、手动绑定后缀、确认子语言支持，三步缺一不可。

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

Package Control 搜索时必须严格输入 Vue Syntax Highlight（首字母大写、中间空格、末尾带 s），不是 VueJS、vue-component 或漏掉 s 的旧版。

VueJS 是 ST2 旧包，装上直接报 ImportError: No module named 'sublime_plugin'
vue-component 已停更，不兼容 ST4，defineProps() 和 withDefaults() 会漏高亮
装完检查 Preferences → Browse Packages… 下是否存在 Vue Syntax Highlight/ 文件夹（不是 vuejs/）
如果已装了 VueJS，进 Preferences → Package Settings 把它禁用，否则语法冲突导致高亮降级

手动把 .vue 文件绑定为 Vue Component 语法

插件只提供语法定义，不会自动注册文件关联。跳过这步，.vue 文件永远显示 Plain Text。

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

打开任意一个 .vue 文件
点击右下角当前语法名（如 Plain Text）
选择 Open all with current extension as… → 找到并点击 Vue Component（注意不是 Vue 或 HTML）
如果菜单里没出现 Vue Component，说明插件未加载成功，按 Ctrl+` 查控制台是否有报错；常见原因是 Package Control 版本太旧，先升级它

确认 vue_version 为 3 并检查子语言嵌入是否生效

<script setup lang="ts"></script> 仍是灰色？大概率是 Vue 语法层解析失败，不是 JS 引擎问题。

进 Preferences → Package Settings → Vue Syntax Highlight → Settings，确认 "vue_version": "3" 已设为 "3"（默认可能是 "2"）
<style lang="scss"></style> 不高亮？单独装 SCSS 插件（作者 css415），装完开一个 .scss 文件确认右下角显示 SCSS，再切回 .vue
<script lang="ts"></script> 无 TS 高亮？检查是否启用了 enable_ts_in_script（部分版本需手动开启）
临时验证法：把 .vue 文件后缀临时改成 .js，看 <script></script> 区块是否恢复高亮——能恢复说明是 Vue 层解析失败

代码提示要另装插件，Vue Syntax Highlight 不提供语义能力

Vue Syntax Highlight 只负责颜色，不做类型推导、跳转或补全。想用 ref()、defineProps() 的语义提示，必须额外配 SublimeLSP + Volar（不是 Vetur）。

补全和 snippet 可选 Vuejs Complete Package，提供 v-if、props/data/methods 等 Tab 补全
若发现 this.$refs、this.$emit 无提示，建议加装 JS Custom 或启用 SublimeLSP-eslint 配合项目级 .eslintrc.js
不要同时装多个 Vue 高亮插件，比如 Vue Syntax Highlight 和 VueJS 二选一，否则冲突概率极高