WebStorm支持Vue3单文件组件（SFC）自动补全的设置-webstorm-PHP中文网

webstorm vue3 sfc自动补全需启用volar、禁用旧vue.js插件、正确配置tsconfig.json（含"types": ["vue"]和"include": ["*.vue"]），缺一则导致ref/props/@click等补全失效。

webstorm支持vue3单文件组件（sfc）自动补全的设置

WebStorm 默认支持 Vue3 SFC 自动补全，但必须满足三个前提：启用 Volar 插件、关闭旧版 Vue.js 插件、项目中存在 volar.config.json 或正确配置的 tsconfig.json。 缺一不可，否则你会看到模板里 ref 不提示、props 无类型、@click 后不弹出事件参数等现象。

为什么 Vue3 SFC 的自动补全和 Vue2 完全不同

Vue3 使用 Composition API + <script setup></script>，其类型推导依赖 Volar（而非旧版 Vetur 或内置 Vue.js 插件）。WebStorm 2024.2 起已默认捆绑 Volar，但它不会自动启用——你得手动开关。旧版 Vue.js 插件会与 Volar 冲突，导致模板中 defineProps 返回值无法被识别，props.xxx 补全直接消失。

禁用 Settings → Plugins → 搜索 “Vue.js”，取消勾选并重启
确认 Settings → Languages & Frameworks → JavaScript → Libraries 中没有重复添加 vue.d.ts 手动路径
Volar 需要读取项目根目录下的 volar.config.json 或 tsconfig.json 来确定 compilerOptions.types 和 include 范围；若缺失，它只对 .ts 文件生效，跳过 .vue

如何验证 Volar 是否真正接管了 .vue 文件

打开任意 .vue 文件，在 <script setup lang="ts"></script> 区域输入 defineProps，然后按 Ctrl+Click（Windows/Linux）或 Cmd+Click（macOS）。如果跳转到 node_modules/@vue/runtime-core/dist/runtime-core.d.ts 中的类型定义，说明 Volar 已生效；如果跳转失败或提示 “Cannot find declaration”，说明 Volar 未加载或配置有误。

Ainative Vue Sdk

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

下载

检查状态栏右下角：应显示 “Volar” 字样，而不是 “Vue.js” 或空白
在 <template></template> 中输入 count.（假设 const count = ref(0)），应立刻列出 value、toString 等方法；若只列 value 且无类型标注，大概率是 tsconfig.json 里漏了 "types": ["vue"]
错误提示如 “Property 'xxx' does not exist on type 'IntrinsicAttributes'” 是典型 Volar 未接管信号

tsconfig.json 必须包含的关键配置项

哪怕你用 Vite 创建项目，生成的 tsconfig.json 也可能缺关键字段。Volar 依赖这些配置才能把 .vue 当作 TypeScript 模块处理：

{
  "compilerOptions": {
    "types": ["vue", "vite/client"],
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

"types": ["vue"] 是核心，缺它则 defineProps、defineEmits 类型不识别
"include" 必须显式包含 "src/**/*.vue"，否则 Volar 不扫描 SFC
"moduleResolution": "bundler" 是 Vue3.4+ 推荐值，配合 Volar 提升导入推断精度
不要手动添加 "vue/compiler-sfc" 到 types —— 这是 Volar 内部处理的，加了反而报错