装了volar没语法提示的主因是vetur冲突，需禁用vetur（工作区）、启用volar（≥1.10.0）、完全重启vscode；根目录需有正确tsconfig.json/jsconfig.json；优先用类型声明defineprops；关闭take over mode可缓解卡顿。

为什么装了 Volar 还是没语法提示？

核心问题不是插件没装，而是 VSCode 默认启用了旧的 Vetur，它和 Volar 冲突，会抢占 .vue 文件的处理权。Volar 官方明确要求禁用 Vetur 或设为“禁用（工作区）”。

• 打开 VSCode 命令面板（Ctrl+Shift+P / Cmd+Shift+P），搜 Extensions: Show Enabled Extensions，找到 Vetur，右键 → Disable (Workspace)
• 确认 Volar 是启用状态，且版本 ≥ 1.10.0（老版本不支持 Vue 3.4+ 的 defineModel 等新语法）
• 重启 VSCode —— 不只是重载窗口，必须完全退出再打开，否则语言服务器不会重新注册

tsconfig.json 和 jsconfig.json 怎么配才不报红？

Volar 依赖 TS 语言服务解析类型，但默认不读取项目根目录外的配置，尤其当你用 Vite 创建的项目时，tsconfig.json 往往在子目录（如 src/）或压根没生成，就会导致 ref、computed 类型推导失败、props 无提示。

• 确保项目根目录有 tsconfig.json（Vite 模板默认生成），内容至少包含：

  {
    "compilerOptions": {
      "target": "ES2020",
      "module": "ESNext",
      "lib": ["ES2020", "DOM", "DOM.Iterable", "ScriptHost"],
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "moduleResolution": "Node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true,
      "jsx": "preserve",
      "types": ["vite/client", "vue"]
    },
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
    "references": [{ "path": "./tsconfig.node.json" }]
  }

• 如果项目用 JS，也要加 jsconfig.json，且 "checkJs": true 必须开启，否则 Volar 不会校验 JS 中的 defineProps 类型
• 删掉 src/tsconfig.json 这类嵌套配置 —— Volar 只认根目录的配置文件

Vue 文件里 defineProps 提示不对或报错？

常见于使用运行时声明（defineProps({ foo: String })）时，Volar 默认只对类型声明（defineProps()）提供完整支持；但即使写类型声明，也可能因 TS 版本或配置漏项而失效。

Vite

为开发、生产构建和库打包配置并优化 Vite。

下载

• 优先用类型声明：用 defineProps()，别用运行时对象形式（后者仅基础校验，无 IDE 提示）
• 确保 compilerOptions.types 包含 "vue"（上面 tsconfig.json 示例已体现）
• 如果用了 withDefaults，注意写法：

  const props = withDefaults(defineProps(), {
    bar: 0
  })

  ，不能把默认值写在泛型里
• 遇到 Cannot find name 'defineProps'，八成是 types 缺 "vue" 或 include 没覆盖到当前文件

Volar 启动慢、CPU 占用高怎么办？

Volar 的语言服务器（Volar Server）在大型项目中容易卡顿，尤其开启 Take Over Mode 后接管全部 .vue 文件，会重复加载 TS 服务实例。

• 关闭 Take Over Mode：在 VSCode 设置里搜 volar.takeOverMode，设为 false；改用 Vue 模式（右下角点击文件类型，选 Vue）手动切换
• 限制监听范围：在 settings.json 加

  "volar.trace.server": "off",
  "volar.ignorePackages": ["@vue/runtime-core", "vue-demi"]

• 禁用非必要插件：比如 Auto Import、Path Intellisense 在 Vue 项目中常与 Volar 冲突，引发重复索引

真正麻烦的是 node_modules 里带类型定义的第三方 Vue 库（比如 naive-ui），它们会让 Volar 反复解析 d.ts。这类问题没有银弹，只能靠删缓存 + 控制库版本 + 接受局部提示缺失。

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