为什么选择vscode？

• HBuilder X对TS类型支持暂不完善
• vscode 对TS 类型支持友好

安装uni-app相关插件

uni-create-view插件：快速uni-app的引导页面

在pages目录下面新建一个目录my：

右键单击，出现了 新建uniapp页面：

输入信息，然后回车：

生成了页面my.vue：

修改下my.vue页面的内容：

<template>
  <view class="my">my</view>
</template>

<script lang="ts" setup>

</script>

<style scoped></style>

在生成my.vue页面的时候，自动在pages.json文件中注册了页面信息：

uni-helper插件：uni-app代码提示

安装完uni-helper插件以后，有代码提示了：

写代码的时候也有提示：

uniapp小程序扩展 插件：鼠标悬停查文档

有文档提示：

点击官方文档：

点击 打开：

安装Vue - Official插件：Vue3 语法提示插件

完善ts类型校验

为了完善ts类型校验，要安装类型声明文件、配置tsconfig.json

miniprogram-api-typings：微信原生小程序wx API 相关的 TypeScript 类型

在终端中执行npm i -D miniprogram-api-typings:

@uni-helper/uni-app-types：为 uni-app 组件提供 TypeScript 类型

在终端中执行npm i -D @uni-helper/uni-app-types（注意，@uni-helper/uni-app-types需要Vue v3 和 TypeScript v5 相关依赖）：

备注：如果自己项目中安装的TypeScript版本与TypeScript v5 不兼容，那么执行npm i -D @uni-helper/uni-app-types会报错，不会安装。此时，可以将自己项目package.json文件中的TypeScript那一行删掉，重新安装TypeScript最新的版本。

配置TypeScript：更新tsconfig.json文件

https://uni-typed.netlify.app/guide/uni-app-types.html#%E9%85%8D%E7%BD%AE-typescript

更新 tsconfig.json，确保：

• compilerOptions.moduleResolution 为 Bundler
• compilerOptions.types 包含 @uni-helper/uni-app-types、miniprogram-api-typings、@dcloudio/types
• vueCompilerOptions.plugins 包含 @uni-helper/uni-app-types/volar-plugin
• include 包含 Vue 相关源码文件

tsconfig.json文件的内容示例，可以复制到项目中使用，可以根据自己的需要调整：

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "moduleResolution": "Bundler",
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom"
    ],
    "types": [
      // uni-app + Vue 3 使用 Vite 构建，需要安装 vite
      "vite/client",
      // uni API 相关的 TypeScript 类型，需要安装 @dcloudio/types
      "@dcloudio/types",
      // 原生微信小程序wx API 相关的 TypeScript 类型，需要安装 miniprogram-api-typings
      "miniprogram-api-typings",
      // 为 uni-app 组件提供 TypeScript 类型，需要安装 @uni-helper/uni-app-types
      "@uni-helper/uni-app-types"
    ]
  },
  "vueCompilerOptions": {
    "plugins": [
      // 调整 Volar（Vue 语言服务工具）解析行为，用于为 uni-app 组件提供 TypeScript 类型
      "@uni-helper/uni-app-types/volar-plugin"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "*.d.ts"
  ]
}

重启下vscode，确保配置正确加载。

现在vue文件中view、text都变成绿色的了，可以被正确识别了：

在image标签中增加mode属性，按Ctrl + i 快捷键激活代码提示，就能显示出合法的取值了：

解决json文件中的注释问题

现在manifest.json文件的注释报错：

pages.json文件的注释也报错：

解决方法是在vsocde的设置中设置文件关联，把 manifest.json 和 pages.json 设置为 jsonc：

点击 添加项：

现在注释不再告警了：