关于#vscode#的问题：使用vscode开发uniapp时报错

Question

使用vscode开发uniapp时报错，使用原来的nativeTags配置不行，参考官网也没有用，试着降低了Vue - Official的版本也还是不行

Answer 1

您好题主！
🍭本答案参考GPT-4o，由爪磕整理并总结，希望对您有所帮助！

---

从截图中可以看到你在 VSCode 中使用了 uni-app 开发，并且配置了相关的 TypeScript 类型和插件，但仍然遇到类型报错的问题。我们可以尝试以下方法来解决这个问题：

1. 确认 tsconfig.json 配置

确保 tsconfig.json 文件中包含了正确的配置，特别是类型定义和插件部分。你的配置看起来大体是正确的，但我们可以进行一些调整和确认：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": [
      "@dcloudio/types",
      "miniprogram-api-typings",
      "@uni-helper/uni-app-types",
      "@uni-helper/uni-ui-types"
    ],
    "vueCompilerOptions": {
      "experimentalRuntimeMode": "nativeTags",
      "plugins": ["@uni-helper/uni-app-types/volar-plugin"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "exclude": ["node_modules"]
}

2. 安装必要的依赖

确保你已经安装了所有必要的依赖项。你可以使用以下命令来安装：

npm install @dcloudio/types miniprogram-api-typings @uni-helper/uni-app-types @uni-helper/uni-ui-types

3. 安装和配置 Vetur 或 Volar 插件

如果你使用 Vue 3 和 TypeScript，推荐使用 Volar 插件。确保你已经禁用了 Vetur 插件，以避免冲突。

• Volar 插件:
  • 安装 Volar 插件：在 VSCode 的扩展市场中搜索并安装 Volar 插件。
  • 禁用 Vetur 插件：在已安装的扩展中找到 Vetur 插件并禁用它。

4. 确认 vueCompilerOptions 配置

确保 vueCompilerOptions 中的 experimentalRuntimeMode 设置为 nativeTags，如你的配置中所示。

5. 重启 VSCode

有时需要重启 VSCode 以使配置生效。关闭所有 VSCode 窗口并重新打开项目。

6. 检查 vue 和 @vue/compiler-sfc 版本

确保你的 vue 和 @vue/compiler-sfc 包版本匹配。例如，如果你使用 Vue 3，那么这些包的版本应该都是 3.x。

你可以在 package.json 中确认这些包的版本：

"dependencies": {
  "vue": "^3.2.0",
  "@vue/compiler-sfc": "^3.2.0"
}

7. 清除缓存

有时可能需要清除 TypeScript 服务的缓存。你可以尝试以下步骤：

1. 打开 VSCode 命令面板（Ctrl+Shift+P）。
2. 输入 TypeScript: Restart TS Server 并选择这个选项。

8. 检查代码中的类型定义

确保你在代码中正确使用了类型定义。例如，在组件中正确定义了 props 类型。

<script lang="ts" setup>
import { ref } from 'vue';

interface Props {
  src: string;
  class: string;
  mode: string;
}

const props = defineProps<Props>();
</script>

通过以上步骤，你应该能够解决 VSCode 中 uni-app 项目的类型报错问题。如果问题仍然存在，请提供更多的错误信息或日志，以便进一步排查。