Sublime Text怎么配置Vue3代码高亮？-sublime-PHP中文网

必须安装vue syntax highlight插件、手动绑定.vue后缀为vue component、启用嵌套语法开关并配置vue_version为3，三步缺一不可；否则.vue文件始终显示plain text。

sublime text怎么配置vue3代码高亮？

装对插件、手动绑定后缀、配好嵌套规则，三步缺一不可；跳过任一环节，.vue 文件永远显示 Plain Text。

必须严格安装 Vue Syntax Highlight 插件

Sublime 原生不识别 .vue，靠插件提供语法定义。目前唯一持续维护、兼容 ST4、支持 <script setup lang="ts"></script> 和 <style scoped lang="scss"></style> 的插件只有 Vue Syntax Highlight。

按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS），输入 Package Control: Install Package 回车
等列表加载完，严格输入 Vue Syntax Highlight（首字母大写、中间空格、末尾带 s 和大写 H）
装错名字如 VueJS 或 vue-component 会导致控制台报 ImportError: No module named 'sublime_plugin'，且右下角不出现 Vue Component 选项
装完检查 Preferences → Browse Packages… 下是否存在 Vue Syntax Highlight/ 文件夹（不是 vuejs/ 或 vue-component/）

必须手动把 .vue 后缀绑定为 Vue Component

插件只提供 Packages/Vue Syntax Highlight/Vue.sublime-syntax 文件，不会自动注册文件关联。没这步，插件等于没生效。

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 版本太旧，先升级再重试

必须在 User Settings 中启用 Vue3 嵌套高亮

Vue Syntax Highlight 不渲染 JS/TS/CSS，它靠 Sublime 的嵌入语法机制把区块交给对应语言插件处理。<script setup lang="ts"></script> 灰色 ≠ Vue 插件坏了，而是子语言链断了。

进 Preferences → Package Settings → Vue Syntax Highlight → Settings
在右侧 User 配置中确保有：

{
  "vue_version": "3",
  "enable_vue_blocks": true,
  "enable_ts_in_script": true,
  "enable_css_in_style": true
}

别改 Vue.sublime-syntax 文件——它自带嵌入声明，改错会导致整个语法崩溃

确认已单独安装对应子语言插件：用 TypeScript 就装 JavaScriptNext - ES6 Syntax 或官方 TypeScript 插件；用 SCSS 就装 SCSS（作者 css415），并打开一个 .scss 文件确认右下角显示 SCSS

临时验证法：把 .vue 文件后缀改成 .js，看 <script></script> 区块是否恢复高亮——能恢复，就说明问题出在 Vue 层解析，不是底层 JS/TS 插件失效

最常被忽略的是：绑定后缀这一步只写入当前用户配置，重装 Sublime 或换机器就得重来；另外 enable_vue_blocks 必须设为 true，否则后面所有 enable_* 开关都不起作用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！