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

前言

  • 为什么选择 VsCode?
    • HbuilderXTS 类型支持暂不完善;
    • Vs CodeTS 类型支持友好,自己常用的编译器;

一、安装对应插件

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这个版本安装;
  • 我不管采用其中的哪一种情况都不行,最后两种都采用了,就好了;

四、拓展 - 安装 vscode Insiders版本

  • 就我自己来说,我喜欢用最新版的插件,不然编译器老是提醒我更新插件(而且有红点),很烦人(强迫症😂);
  • 平时开发的项目有v2、v3,react、小程序
    • v2、小程序 我用的是 Insiders版本(装V2和小程序相关的插件);
    • v3、react 我用的是 正式版本(装的都是最新的插件);
  • 点击图片进入下载入口
  • 在这个版本的VsCode上面,就可以配置小程序相关的插件了;
  • 注意
    • 不要登录,否则同一个账号的两个版本编译器会同步插件和设置;
相关推荐
不会算法的小灰11 分钟前
HTML简单入门—— 基础标签与路径解析
前端·算法·html
zero13_小葵司15 分钟前
在Vue项目中构建后端配置的动态路由及权限控制体系
前端·javascript·vue.js
GISer_Jing15 分钟前
前端框架篇——Vue&React篇
前端·javascript
面向星辰16 分钟前
css其他选择器(精细修饰)
前端·css
子兮曰20 分钟前
WebSocket 连接:实现实时双向通信的前端技术
前端·javascript·websocket
宁雨桥22 分钟前
从视口到容器:CSS 容器查询完全指南
前端·css
wu~9701 小时前
web服务器有哪些?服务器和web服务器有什么区别
运维·服务器·前端
FIN66681 小时前
募投绘蓝图-昂瑞微的成长密码与未来布局
前端·后端·5g·云原生·信息与通信·射频工程·芯片
cooldream20091 小时前
深度解析中秋节HTML5动画的实现
前端·html·html5
羊羊小栈2 小时前
基于「YOLO目标检测 + 多模态AI分析」的光伏板缺陷检测分析系统(vue+flask+模型训练+AI算法)
vue.js·人工智能·yolo·目标检测·flask·毕业设计·大作业