登录 注册

php|python|golang|C语言|XMl|前端|数据库|运维|工具类|微信|JAVA|

VSCode中如何开发uni-app？（教程分享）

VSCode中如何开发uni-app？下面本篇文章给大家分享一下VSCode中开发uni-app的教程，这可能是最好、最详细的教程了。快来看看！

VSCode中如何开发uni-app？（教程分享）

我们将使用VSCode写uni-app，不同于Hbuilder X，用VSCode是通过脚手架来创建项目，为什么我要用VSCode写呢？可能还是不太习惯Hbuilder X等等原因，还有就是不想换开发工具，觉得开发前端一个VSCode就够了，也不用去比较两者谁好谁坏，自己喜欢哪个用哪个，这里就不过多赘述了。【推荐学习：《vscode入门教程》】

自己也用VSCode做了几个uni-app项目了，主要是写小程序，总体体验下来还是非常不错的。

1.png

简述一下这个教程能给VSCode开发 uni-app带来的体验

  • 增强pages.json和manifest.json开发体验（语法提示、颜色块、写注释）
  • 一键创建页面、组件、分包
  • 完善的API，组件，uni.scss语法提示
  • 条件编译注释高亮

可以说，VSCode开发uni-app的槽点基本上都解决了，有很多地方我觉得体验还更好。

文章比较长，写的也比较详细，小白也能看懂。

初始化项目

我们使用 vue2 创建工程作为示例，uni-app中Vue2版的组件库和插件也比较多，稳定、问题少，可以先参考下官方文档：工程化

既然是使用vue脚手架，那肯定要全局安装@vue/cli，已安装的可以跳过。

注意：Vue2创建的项目，脚手架版本要用@4的版本，用@5的版本运行项目会报错，这里推荐 @4.5.15

npm install -g @vue/cli

创建项目，后面是你的项目名字。

vue create -p dcloudio/uni-preset-vue uni_vue2_cli

这里我们选择默认模板。

2.png

在VSCode打开这个项目，可以看看整个项目项目结构，src下项目结构跟HbuilderX创建的根目录基本一样，说明两种项目转换还是比较方便的。

提示：既然是Vue2项目，有scss文件，那肯定要装vetur和sass这两个插件吧，不会有人还没有装吧。

3.png

tsconfig.json报错问题

4.png

创建tsconfig.json配置文件时，VSCode会自动检测当前项目当中是否有ts文件，若没有则报错，提示用户需要创建一个ts文件后，再去使用typescript。其实即使报红，但运行项目是没有问题的，但有强迫症的人肯定受不了，不可能一直看着报错吧。

解决方案很简单，就是在项目根目录下，随便建一个ts文件，不用写任何东西，然后在tsconfig.json配置 files 这个就好了。

我们在项目根目录下新建一个puppet.ts，puppet：傀儡的意思，哈哈，这里名字可以自己随便起。

5.png

tsconfig.json：

{
  "compilerOptions": {
    "types": ["@dcloudio/types", "miniprogram-api-typings", "mini-types"]
  },
  "files": ["puppet.ts"]
}

增强pages.json和manifest.json开发体验

json文件写注释

我们打开pages.json和manifest.json，发现会报红，这是因为在json中是不能写注释的，而在jsonc是可以写注释的。

6.png

解决方案：我们把pages.json和manifest.json这两个文件关联到jsonc中，然后就以写注释了。在设置中打开settings.json，添加：

7.png

千万不要把所有json文件都关联到jsonc中，你感觉在json中都能写注释了，觉得更好用了，其实不然，json就是json，jsonc就是jsonc，这两个是不一样的，例如，你在package.json写注释VSCode是不报错了，但编译的时候还是会报错的，因为package.json就是不能写注释的。

语法提示

很多人刚开始使用VSCode写uni-app时，因为pages.json没有任何语法提示，直接被劝退了，当初我也差点被劝退了，不过经过我的不懈努力，终于解决了。

其实现在VSCode已经有第三方插件提供语法提示和简单的校验了，体验也是相当的不错。

8.png

而且鼠标悬浮还有提示，相当的贴心了。

9.gif

颜色块显示

VSCode在json文件是不显示像css中一样的颜色块，但有个插件可以帮我们做到。

10.png

当然，我们要对这个插件进行相关的配置，以便更好的使用。

"color-highlight.enable": true, // 开启插件
// 颜色块的样式，这里我选择了跟VSCode中css差不多样子的颜色块，自己选择喜欢的就行
"color-highlight.markerType": "dot-before", 
// 这个插件起效果的语言，这里设置只在jsonc起作用
"color-highlight.languages": ["jsonc"],
// 是否在旁边的滚条显示颜色，个人觉得不好看，关了
"color-highlight.markRuler": false,
// 是否匹配单词，如white，black
"color-highlight.matchWords": false,

11.png

一键创建页面、组件、分包

然后就是怎么快速创建页面、组件、分包，那就要推荐以下这款插件了，支持一键创建，并且添加到paegs,json中。

12.png

13.png

14.gif

条件编译注释高亮

在Hubilder X条件注释是有高亮的，以便区分开普通注释，在VSCode也有对应的插件可以实现，不得不说，VSCode的生态真的太好了，要啥插件都有。

15.png

16.gif

这个插件可以定制化我们的注释，比如颜色、加粗、斜体，怎么好看怎么来。

"better-comments.tags":[
  {
    "tag": "#",
    "color": "#18b566",
    "strikethrough": false,
    "underline": false,
    "backgroundColor": "transparent",
    "bold": true,
    "italic": false
   },
]

API，组件，uni.scss语法提示

API语法提示

用Vue2创建的uni-app的cli项目默认是已经安装对应的Api语法提示，并且默认已经在tscongfig.json配置好了，有三个：

  • @dcloudio/types，uni语法提示
  • miniprogram-api-typings，微信小程序wx语法提示
  • mini-types，支付宝小程序my语法提示

17.png

18.gif

组件提示

接下来就是组件语法提示，如、