必须安装vue syntax highlight插件并手动将.vue文件关联为vue component语法，否则无法实现template、script、style三部分基础高亮；script中defineprops等api需额外安装javascriptnext或typescriptsyntax插件并单独设置语法。

Sublime Text 本身不支持 Vue 单文件组件（SFC）语法，装了插件不配置等于没装——.vue 文件打开后仍是纯文本，<script setup></script> 里 ref()、defineProps 全白，v-if 和普通属性一个颜色，不是插件坏了，是语法识别链断在了某一步。

怎么让 .vue 文件一打开就有基础高亮

核心就两步：装对插件 + 手动绑定文件类型。别信“安装完自动生效”这种说法。

• 用 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（macOS）呼出命令面板，输入 Package Control: Install Package 回车
• 搜 Vue Syntax Highlight 并安装（不是 Vuejs，那个已废弃且会覆盖语法）
• 装完重启 Sublime，打开任意 .vue 文件，右下角点当前语言标识（比如 “Plain Text”），选 Open all with current extension as → Vue Syntax Highlight
• 之后所有 .vue 文件都会默认用该语法，<template></template>、<script></script>、<style></style> 三块应有不同颜色

为什么 <script> 块里 defineProps、ref() 还是白的</script>

因为 Sublime 自带的 JavaScript 语法不认识 Vue 3 组合式 API 和 TS 类型标注。这不是 Vue 插件该管的事，得换 JS 语法引擎。

Ainative Vue Sdk

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

下载

• 用 Package Control: Install Package 安装 JavaScriptNext - ES6 Syntax
• 在 .vue 文件的 <script></script> 块内右键 → Set Syntax → JavaScriptNext → JavaScriptNext - ES6 Syntax
• 如果用了 lang="ts"，还得额外装 TypeScriptSyntax 插件，并为该 <script></script> 块单独设置语法
• ⚠️ 不要在整文件设成 JavaScriptNext，否则 <template></template> 块会失去高亮

怎么让 v-if、@click 这类指令有独立颜色

默认 Vue Syntax Highlight 只做 HTML 级别高亮，指令和普通属性同色。想区分，得确认语法 scope 被主题渲染了。

• 检查你当前使用的配色主题是否支持 entity.other.attribute-name.vue 或类似 scope；很多轻量主题压根没定义这些
• 若主题不支持，可手动编辑主题文件（如 Monokai.sublime-color-scheme），添加对 entity.other.attribute-name.vue 的颜色规则
• 更简单的方法：换用支持 Vue scope 的主题，比如 Dracula 或 Nord（需确认其最新版已包含 Vue 相关 scope）
• 注意：v-model:value、#default 插槽等新写法，旧版 Vue Syntax Highlight（

保存时自动格式化为什么无效或只格式化部分

Sublime 本身不带格式化能力，“保存即格式化”必须依赖外部工具（如 prettier）+ 插件桥接，而 Vue 的多块结构会让配置更脆弱。

• 推荐组合：JsPrettier 插件 + 全局安装的 prettier + prettier-plugin-vue
• 确保 JsPrettier.sublime-settings 中启用了："auto_format_on_save": true
• 关键配置项必须加："prettier_options": { "parser": "vue" }，否则 <template></template> 块可能被当成 HTML 格式化
• 若使用 lang="ts"，还需在项目根目录放 prettier.config.js，显式指定 plugins: ['prettier-plugin-vue', 'prettier-plugin-ts']
• ⚠️ HTML-CSS-JS Prettify 默认不支持 .vue，需手动修改其 allowed_file_extensions 加入 "vue"，但该插件对 <script setup></script> 支持极差，不推荐

最常被忽略的一点：Sublime 的语法高亮本质是正则匹配，不运行代码，也不理解编译时行为。所以 defineProps 高亮了 ≠ 类型推导正确，v-for 有颜色 ≠ 模板语法无误。真要靠住类型和语义检查，得上 ESLint + eslint-plugin-vue，但那已是另一层配置了。

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