适用环境：Node.js v24.1+ | TypeScript 5.x | UniApp 官方 Vite + TS 脚手架

目标：实现智能提示、类型检查、小程序 API 补全、无报错开发体验

📦 第一步：从 Gitee 拉取官方脚手架（国内推荐）

由于 GitHub 在国内访问不稳定，务必使用 DCloud 官方 Gitee 镜像，拉取不下来直接下载zip文件即可：

# 创建 UniApp Vue 3 + TypeScript + Vite 项目
npx degit https://gitee.com/dcloud/uni-preset-vue.git#vite-ts my-uniapp-project

# 进入项目
cd my-uniapp-project

# 安装依赖
npm install

💡 分支说明：vite-ts 是官方提供的 Vue 3 + TS + Vite 模板分支。

🧩 第二步：安装 VSCode 插件

为获得最佳开发体验，请安装以下插件：

插件名称

作用

UniApp Helper

提供 pages.json / manifest.json 智能提示、代码片段、跳转支持

Volar

Vue 3 官方推荐的 TypeScript 支持插件（不要用 Vetur！）

vue3-snippets-for-vscode

这是一个适配 Vue3 Api 的 snippets 插件

uniapp小程序扩展

自动提示标签可用属性,鼠标悬浮查询属性文档,

⚠️ 安装 Volar 后，建议在 VSCode 设置中启用 “Take Over Mode”，确保 .vue 文件由 Volar 接管。

📑 第三步：安装类型声明文件

在项目根目录执行：

npm install -D @types/wechat-miniprogram @uni-helper/uni-app-types

这将提供：

  • uni.* API 的完整类型（如 uni.request）

  • 微信小程序 wx.* API 类型（如 wx.getUserProfile）

  • Vue 3 Composition API 与 UniApp 的深度集成提示

⚙️ 第四步：配置 tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    // 👇 替代 importsNotUsedAsValues / preserveValueImports
    "verbatimModuleSyntax": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": [
      "@dcloudio/types",
      "@uni-helper/uni-app-types",
      "@types/wechat-miniprogram"
    ]
  },
  "include": ["src/**/*"]
}

🛠️ 第五步：解决 manifest.json 和 pages.json 注释报错

VSCode 默认将 .json 文件视为标准 JSON（不支持注释），而 UniApp 的配置文件包含注释，会导致红色波浪线。

解决方法：

在 VSCode 设置中（settings.json）添加文件关联：

{
  "files.associations": {
    "manifest.json": "jsonc",
    "pages.json": "jsonc"
  }
}

jsonc = JSON with Comments，完美支持带注释的 JSON 文件。

🎯 最终效果

完成以上配置后，你将获得：

  • ✨ uni.request()、uni.navigateTo() 等 API 的参数/返回值类型提示

  • 📱 微信小程序 wx.login()、wx.chooseImage() 的完整类型支持

  • 💡 <script setup lang="ts"> 中的 Composition API 智能感知

  • 📄 pages.json / manifest.json 无报错 + 智能补全

  • 🔍 项目通过 npm run type-check 的全量类型检查

📌 附：常用命令

# 启动 H5 开发服务器
npm run dev:h5

# 编译微信小程序（开发模式）
npm run dev:mp-weixin

# 类型检查（不生成文件）
npm run type-check

编译后的微信小程序代码位于 dist/dev/mp-weixin/，用 微信开发者工具 导入即可预览。

💡 结语

这套配置已在 Node.js v24.1 + TypeScript 5.9 + UniApp 3.0 环境下验证通过，兼顾开发效率与类型安全。

告别“any script”，拥抱真正的 TypeScript 开发体验！

🌟 如果你觉得有用，欢迎点赞、收藏、转发！

🐞 遇到问题？欢迎在评论区留言交流！