Vite+Vue3项目VSCode使用<script setup>出现警告无提示怎么解决

修复步骤 #

1. 禁用冲突插件

• 同时安装Vetur和Volar会导致语法校验冲突，先在VSCode扩展面板中禁用Vetur，重启编辑器后观察是否恢复提示

2. 更新ESLint配置

• 你当前配置中使用的plugin:vue/essential是Vue2对应的规则集，需要替换为Vue3适配版本，修改extends字段如下：

extends: [
  "eslint:recommended",
  "plugin:vue/vue3-essential", // 替换为vue3规则
  "plugin:@typescript-eslint/recommended",
  "plugin:prettier/recommended",
  "@vue/typescript/recommended" // 新增vue+ts适配规则
],

• 同步安装缺失的依赖：npm i @vue/eslint-config-typescript -D
• 在parserOptions中新增vue文件识别配置：

parserOptions: {
  ecmaVersion: 13,
  parser: "@typescript-eslint/parser",
  sourceType: "module",
  extraFileExtensions: [".vue"] // 新增该行
},

3. 开启Volar的Take Over模式

• 打开VSCode命令面板（快捷键Ctrl+Shift+P/Cmd+Shift+P），输入「Extensions: Show Built-in Extensions」，找到「TypeScript and JavaScript Language Features」，点击「Disable (Workspace)」禁用工作区内置TS语言服务，重启VSCode即可

4. 校验tsconfig配置

• 确认项目根目录的tsconfig.json的include字段包含所有.vue和ts文件，示例如下：

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

构建正常但IDE无提示属于正常现象，因为Vite构建环节只做语法转译和生产环境校验，不会触发IDE层面的实时lint规则检查和类型提示预校验，按以上步骤调整后即可恢复正常提示。

内容的提问来源于stack exchange，提问作者Jd Li