如何设置VSCode以支持Uni-app开发？

本文共计967个文字，预计阅读时间需要4分钟。

VSCode 支持 Uni-app 开发，但默认配置下缺少类型提示、页面生成、JSON 注释等关键功能 —— 必须手动安装插件和配置。否则，如 `uni.showToast()` 无参数提示、`pages.json` 添加注释报错等问题将出现。

装对插件：uni-helper + uni-create-view 是核心

只装官方推荐的 uni-app-vscode 或 vetur 不够用，它们不提供 API 类型推导和页面自动注册。真正起作用的是：

• uni-helper（必装）：提供 uni.* API、组件属性、生命周期的完整 TS 提示，依赖 @uni-helper/uni-app-types 类型包
• uni-create-view（强推）：右键 pages 目录就能新建页面，并自动写入 pages.json；默认建单文件，需在插件设置里勾选「创建同名文件夹」才符合主流项目结构
• Vue - Official（Vue 3 项目必装）：替代已弃用的 vetur，支持 <script setup> 和组合式 API 的语法高亮与跳转

其他如 Easy LESS、ESLint 属于通用辅助，不装也能跑，但缺了上面三个，开发体验会明显卡顿。

TS 类型要手动接上，否则 uni.getSystemInfoSync() 返回值是 any

即使项目是 TypeScript，uni.* 方法也默认无类型。必须做两件事：

• 执行 pnpm add -D @uni-helper/uni-app-types @dcloudio/types（或 npm install -D）
• 修改 tsconfig.json 的 compilerOptions.types，确保包含这两个包：
  ["@dcloudio/types", "@uni-helper/uni-app-types"]
• 如果用 Vite 模板，还要确认 vueCompilerOptions.nativeTags 包含 "component" 和 "slot"，否则自定义组件标签会标红

漏掉任意一项，VSCode 就无法识别 <uni-button> 的 type 属性或 uni.login 的 success 回调参数。

manifest.json 和 pages.json 注释报错？改文件关联类型

这两个文件允许写 // 注释，但 VSCode 默认按严格 JSON 解析，一加注释就红波浪线。解决方法简单直接：

• 打开 VSCode 设置（Ctrl+, ），搜 files.associations
• 添加两条规则：
  "manifest.json": "jsonc"
"pages.json": "jsonc"
• 保存后重启窗口，注释立刻生效，无需删掉已有注释或改后缀名

这是纯编辑器级配置，不影响构建，也不需要动项目代码。

运行命令别硬记，package.json 里配好常用脚本

每次都要敲 pnpm run dev:mp-weixin 容易手误，且不同平台命令差异大。建议在 package.json 的 scripts 里固化：

"scripts": { "dev:h5": "pnpm run dev:h5", "dev:mp": "pnpm run dev:mp-weixin", "dev:app": "pnpm run dev:app-plus" }

这样终端里只输 pnpm run dev:mp 就行。注意：dev:mp-weixin 输出目录是 dist/dev/mp-weixin，微信开发者工具必须指定到这个路径，不是项目根目录。

最常被忽略的是：微信开发者工具导入时，appid 必须填进 manifest.json 的 name 字段下，否则白屏且无报错提示；另外 H5 模式若空白，大概率是 vue.config.js 里 publicPath 没设成 './'。