用vscode开发uni-app项目需要安装的插件及配置更新

听海边涛声

已于 2024-09-12 09:38:28 修改

阅读量295

点赞数 3

文章标签： vscode uni-app ide

于 2024-09-12 09:27:57 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/142142381

版权

为什么选择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"
  ]
}