为什么选择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:
点击 添加项:
现在注释不再告警了: