前言
- 为什么选择 VsCode?
HbuilderX
对TS
类型支持暂不完善;Vs Code
对TS
类型支持友好,自己常用的编译器;
一、安装对应插件
1.1 uni-create-view ➡ 快速创建页面
- 作用 :
- 快速创建 uniapp 试图与组件;
- 安装成功之后,就可以右键pages,看到具体的新建功能了;
1.2 uni-helper ➡ uni-app代码提示
- 这是一个工具包,里面有5个插件;
- 现在鼠标悬停到具体的字段上面就会有提示;
1.3 uniapp小程序扩展 ➡ 鼠标悬停查看文档
- 作用 :
- 自动提示标签可用属性,鼠标悬浮查询属性文档,新增支持uview的组件提示;
- 鼠标悬停到具体的组件上面,有对应的提示信息及跳转到官方的链接;
二、添加 ts 类型校验
2.1 安装类型声明文件
pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types
;
2.2 配置 tsconfig.json
json
{
// 其他配置项
...,
"compilerOptions": {
"types": [
"@dcloudio/types",
"@types/wechat-miniprogram",
"@uni-helper/uni-app-types"
]
},
"vueCompilerOptions": {
"experimentalRuntimeMode": "runtime-uni-app"
},
// 其他配置项
...
}
2.3 重启VsCode
- 配置好之后,重启
VsCode
,或者Ctrl + Shift + P
,输入reload window
;
三、vue文件标签爆红解决方案
- 上述步骤完成之后,打开
.vue
文件,可能会看到这种情况😂:- 根本原因是
Vue - Official
将小程序的标签识别成了vue的组件(这个插件的版本bug吧,不知道啥时候能修复);
- 根本原因是
- 解决方案 :
- 🎯 强烈建议两种方案都采用;
- 网上的方案大致有两种:
- 1、修改
tsconfig.json
配置文件; - 2、降低
Vue - Official
版本,选择v2.0.12
这个版本安装;
- 1、修改
- 我不管采用其中的哪一种情况都不行,最后两种都采用了,就好了;
四、拓展 - 安装 vscode Insiders版本
- 就我自己来说,我喜欢用最新版的插件,不然编译器老是提醒我更新插件(而且有红点),很烦人(强迫症😂);
- 平时开发的项目有
v2、v3,react、小程序
;v2、小程序
我用的是 Insiders版本(装V2和小程序相关的插件);v3、react
我用的是 正式版本(装的都是最新的插件);
- 点击图片进入下载入口
- 在这个版本的VsCode上面,就可以配置小程序相关的插件了;
- 注意 :
- 不要登录,否则同一个账号的两个版本编译器会同步插件和设置;