Vue3+Volar环境下VSCode不显示TypeScript错误的问题排查

1. 确认Takeover模式真的生效 #

打开VSCode命令面板（Ctrl+Shift+P / Cmd+Shift+P），输入TypeScript: Select TypeScript Version，如果看到Vue - take over mode且已选中，说明模式生效；如果没看到，手动选中它。同时要禁用工作区的TypeScript官方扩展——在扩展面板找到「TypeScript and JavaScript Language Features」，右键选择「禁用（工作区）」，只保留Volar提供的TS服务。

2. 检查Vue文件的语言模式 #

打开任意.vue文件，看右下角语言模式是否显示为Vue，而非Vue (Vetur)或其他。如果不对，点击语言模式，选择「Configure File Association for .vue...」，将.vue关联到Volar提供的Vue模式。

3. 验证tsconfig配置有效性 #

即使是默认生成的配置，也可以检查这几点：

• 确保tsconfig.app.json的include数组包含源码目录，比如["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]，没有遗漏.vue文件；
• 检查compilerOptions里的strict是否设为true，严格模式下TS错误检测更全面；
• 确认项目根目录的tsconfig.json正确引用了tsconfig.app.json，即存在"extends": "./tsconfig.app.json"。

4. 重启服务或窗口 #

有时候语言服务会卡住，打开命令面板输入Developer: Reload Window重启VSCode，或者输入Volar: Restart Vue Server重启Volar服务，再查看错误是否显示。

5. 更新Volar扩展 #

确保安装的是最新版的「Vue Language Features (Volar)」，旧版本可能存在兼容性问题，在扩展面板找到Volar点击「更新」即可。

6. 排除依赖冲突 #

执行npm install重新安装依赖，也可以删除node_modules和package-lock.json（或yarn.lock）后重新安装，避免依赖缓存导致的问题。

内容的提问来源于stack exchange，提问作者Jeffrey Biles