Volar 为什么在 VS Code 里不提示 Vue 3 的 setup 语法？

峻豪~ 提问于 2026-03-11 06:04:20 阅读 51

框架

我用的是 Vue 3 + TypeScript 项目，装了 Volar 插件也禁用了 Vetur，但写 setup() 里的变量时完全没有智能提示，连基础的 ref 都不识别，是不是哪里配置错了？

我的组件样式部分是这样写的：

.card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.card:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease;
}

样式能正常生效，但 script 部分就是没提示，重启编辑器、重装插件都试过了，还是不行。

我来解答赞 9 收藏

反馈

1 条解答

萌新.俊含 Lv1

这问题很常见，不是你配置错了，是 Volar 的模式没开对。

Volar 有个「接管模式」(Take Over Mode) 必须手动启用，启用后它才能完全接管 Vue 文件的 TypeScript 提示。

解决方法：

1. 打开 VS Code 命令面板 (Ctrl+Shift+P / Cmd+Shift+P)
2. 搜索 "Extensions: Enable/Disable Volar Take Over Mode" 或者直接搜 "Volar: Enable Take Over Mode"
3. 启用它，然后重启 VS Code

如果搜不到这个选项，检查一下你的 Volar 版本够不够新，太老的版本没有这个功能。

另外，确保你的项目根目录有正确的 tsconfig.json，基本配置大概是这样：

{

  "extends": "@vue/tsconfig/tsconfig.dom.json",

  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],

  "compilerOptions": {

    "strict": true,

    "moduleResolution": "bundler"

  }

}

如果还没装 @vue/tsconfig，执行：

npm install -D @vue/tsconfig

搞定这些应该就有提示了。样式能生效说明 Volar 装对了，但 script 部分提示需要接管模式+正确的 TypeScript 配置，这两个缺一不可。

2026-03-11 07:00