Volar 是 Vue 3 唯一推荐插件，必须禁用 Vetur；启用 Take Over Mode 并确认右下角显示“Volar (Take Over)”；确保 .vue 文件语言模式为 vue；项目根目录需有 tsconfig.json 且未排除 node_modules。

Vue 3 代码在 VSCode 里不亮、defineProps 报红、<template></template> 里变量没颜色——不是配置漏了，是插件装错或冲突了。Volar 是唯一推荐方案，Vetur 必须禁用，否则高亮和类型提示一定出问题。

装 Volar 而不是 Vetur，且必须禁用 Vetur

Vetur 已归档，对 <script setup></script> 和 Vue 3 响应式类型支持极弱，和 Volar 共存时会直接导致语言服务降级。VSCode 可能自动禁用其中一个，但行为不可控。

• 打开扩展面板（Ctrl+Shift+X），搜 Vetur → 点击齿轮图标 → 选择“禁用”（不是只关配置项）
• 搜 Volar，认准发布者为 Vue（蓝标认证），安装主插件
• 如已装过 Volar 但没生效，先禁用再重装，避免缓存残留

启用 Take Over Mode 并确认右下角状态

Volar 默认只当普通 TS 插件用，不接管 .vue 文件。不开启 Take Over，ref 解包、defineProps<{...}> 泛型推导全失效。

• 按 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（macOS）→ 输入 Volar: Take Over Mode → 回车
• 弹窗点 “Yes”，等待语言服务器重启完成
• 打开任意 .vue 文件，看右下角状态栏是否显示 Volar (Take Over)，不是 Vue 或 HTML

检查 .vue 文件是否真被识别为 vue 语言模式

即使装了 Volar，VSCode 仍可能把 .vue 当作纯文本或 HTML 处理，尤其从其他编辑器迁移项目后。

Ainative Vue Sdk

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

下载

立即学习“前端免费学习笔记（深入）”；

• 点击右下角语言标识（比如显示 Plain Text 或 HTML）→ 选 Configure File Association for '.vue' → 输入 vue 回车
• 或手动在 settings.json 中加："files.associations": {"*.vue": "vue"}
• 新开一个 test.vue，确认右下角显示 vue，且 <template></template> 标签有颜色、<script></script> 里能 F12 跳转

确保 tsconfig.json 存在且未 exclude node_modules

Volar 的类型服务严重依赖 tsconfig.json。没有它，或它错误地把 node_modules 排除，@vue/runtime-dom 类型就加载不了，defineProps 直接报红。

• 项目根目录必须有 tsconfig.json（或 jsconfig.json，但需含 "allowJs": true）
• 检查 "exclude" 字段：不能写 "**/node_modules" 或 "node_modules"，否则 Volar 找不到 @vue/language-core
• 如果用 pnpm，运行 pnpm store path 查路径，确保 VSCode 有权限读取（macOS 上偶尔因全盘访问权限被拦）

最易忽略的一点：Volar 的 Take Over 模式需要完整重启窗口（不是重载），且 tsconfig.json 的 include 必须覆盖 .vue 文件路径；否则哪怕所有插件都对，高亮也只在部分文件生效。