如何用 VsCode 开发 uni-app 项目？

前言

• 为什么选择 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

{
  // 其他配置项
  ...,
  
  "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这个版本安装；
      • 
• 我不管采用其中的哪一种情况都不行，最后两种都采用了，就好了；

四、拓展 - 安装 vscode Insiders版本

• 就我自己来说，我喜欢用最新版的插件，不然编译器老是提醒我更新插件（而且有红点），很烦人（强迫症😂）；
• 平时开发的项目有v2、v3，react、小程序；
  • v2、小程序 我用的是 Insiders版本（装V2和小程序相关的插件）；
  • v3、react 我用的是 正式版本（装的都是最新的插件）；
• 点击图片进入下载入口
• 在这个版本的VsCode上面，就可以配置小程序相关的插件了；
• 注意 ：
  • 不要登录，否则同一个账号的两个版本编译器会同步插件和设置；