如何让VSCode像ESLint一样显示vue-tsc的类型检查错误？

以下是具体配置步骤：

1. 配置Volar扩展的类型检查模式 #

Vue官方的Volar扩展已集成vue-tsc的类型检查能力，只需开启对应设置：

• 打开VSCode设置（快捷键Ctrl+,/Cmd+,）
• 搜索Volar: Type Checking Mode，将其设置为strict（或vue-tsc，strict会启用更严格的检查规则）
• 确保Volar: Tsc Plugin Enable选项处于开启状态（默认已开启）

2. 完善项目的tsconfig.json配置 #

确保tsconfig.json正确包含Vue文件并配置合适的TypeScript选项：

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

重点保证include数组包含.vue文件，让vue-tsc能扫描到所有Vue组件。

3. 验证配置效果 #

完成设置后重启VSCode，在Vue组件中故意编写类型错误代码（比如给number类型变量赋值字符串），此时编辑器会像ESLint一样在错误位置显示红色波浪线，鼠标悬停可查看vue-tsc的错误提示。

若配置后仍不生效，可尝试：

• 执行npm install确保依赖安装完整
• 点击VSCode右下角的TypeScript版本号，切换为项目本地的工作区版本
• 打开VSCode“输出”面板，选择Vue Language Features查看是否有报错信息

内容的提问来源于stack exchange，提问作者Voicu Seiche