Comment développer uni-app en VSCode ? (Partage du tutoriel)

Comment développer uni-app en VSCode ? L'article suivant partagera avec vous un tutoriel sur le développement d'uni-app dans VSCode. C'est peut-être le tutoriel le meilleur et le plus détaillé. Venez jeter un oeil !

Nous utiliserons VSCode pour écrire uni-app. Différent de Hbuilder X, l'utilisation de VSCode crée des projets via un échafaudage. Pourquoi devrais-je utiliser VSCode pour l'écrire ? Peut-être que je ne suis pas encore habitué à Hbuilder. Je n’entrerai pas dans les détails ici. [Apprentissage recommandé : "tutoriel d'introduction au vscodeuni-app，不同于Hbuilder X，用VSCode是通过脚手架来创建项目，为什么我要用VSCode写呢？可能还是不太习惯Hbuilder X等等原因，还有就是不想换开发工具，觉得开发前端一个VSCode就够了，也不用去比较两者谁好谁坏，自己喜欢哪个用哪个，这里就不过多赘述了。【推荐学习：《vscode入门教程》】

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

简述一下这个教程能给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

这里我们选择默认模板。

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

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

tsconfig.json报错问题

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

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

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

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是可以写注释的。

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

J'utilise également VSCode J'ai réalisé plusieurs projets uni-app, principalement en écrivant de petits programmes, et l'expérience globale est très bonne.

• Améliorez pages.json et manifest .jsonExpérience de développement (guides de grammaire, blocs de couleurs, rédaction de commentaires)
• Création en un clic de pages, composants, sous-traitance
• API complète</code >, composant, invite de syntaxe uni.scss</li><li>Mise en évidence conditionnelle des commentaires de compilation</li></ul>🎜On peut dire que les lacunes du développement VSCode <code>uni-app Fondamentalement tout a été résolu et il existe de nombreux endroits où je pense que l'expérience est encore meilleure. 🎜

  🎜L'article est relativement long et écrit en détail, donc même un novice peut le comprendre. 🎜

  Projet d'initialisation

  🎜Nous utilisons vue2 pour créer un projet à titre d'exemple. La version Vue2 d'uni-app possède également de nombreuses bibliothèques de composants et plug-ins. ins, qui sont stables et ont des problèmes Peu nombreux, vous pouvez d'abord vous référer à la documentation officielle : Ingénierie🎜🎜 🎜Puisque vous utilisez vue scaffolding, vous devez installer @vue/cli globalement. Si vous l'avez déjà installé, vous pouvez l'ignorer. 🎜

  🎜Remarque : Pour les projets créés avec Vue2, la version d'échafaudage doit utiliser la version @4. Si vous exécutez le projet avec la version @5, une erreur sera signalée @4.5. .15 est recommandé ici. >🎜

  "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,

  Copier après la connexion

  Copier après la connexion
  🎜Créez un projet, suivi du nom de votre projet. 🎜

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

  Copier après la connexion

  Copier après la connexion
  🎜Ici, nous choisissons le Modèle par défaut. 🎜🎜🎜🎜à Ouvrez ce projet avec VSCode et vous pourrez voir toute la structure du projet sous src est fondamentalement la même que le répertoire racine créé par HbuilderX, ce qui montre qu'il l'est. relativement pratique pour convertir les deux projets. 🎜

  🎜Astuce : Puisqu'il s'agit d'un projet Vue2 et qu'il existe un fichier scss, vous devez installer vetur et sass </code >Ces deux plug-ins, personne ne les a encore installés. 🎜</blockquote>🎜<img src="https://img.php.cn/upload/image/864/182/382/165244335485627Comment développer uni-app en VSCode ? (Partage du tutoriel)" title="165244335485627Comment développer uni-app en VSCode ? (Partage du tutoriel)" alt="Comment développer uni-app en VSCode ? (Partage du tutoriel)"/ >🎜<h2 data-id="heading-2">Problème de rapport d'erreurs tsconfig.json</h2>🎜<img src="https://img.php.cn/upload/image/848/157/568/ 1652443359564732 .png" title="165244335956473Comment développer uni-app en VSCode ? (Partage du tutoriel)" alt="Comment développer uni-app en VSCode ? (Partage du tutoriel)"/>🎜🎜Lors de la création du fichier de configuration tsconfig.json, VSCode détectera automatiquement s'il existe un fichier ts dans le projet en cours. Sinon, un une erreur sera signalée, invitant l'utilisateur à le créer. Après avoir créé un fichier ts, utilisez TypeScript. En fait, même si le rapport rouge est signalé, il n'y a aucun problème à exécuter le projet, mais les personnes souffrant de trouble obsessionnel-compulsif ne pourront certainement pas le supporter et il est impossible de regarder le rapport d'erreur en permanence. 🎜🎜La solution est très simple, il suffit de créer un fichier <code>ts dans le répertoire racine du projet sans rien écrire, puis de configurer les files < dans <code>tsconfig.json /code >C'est très bien. 🎜🎜Nous créons un nouveau puppet.ts dans le répertoire racine du projet Puppet : signifie marionnette, haha. Vous pouvez choisir le nom ici par vous-même. 🎜🎜🎜🎜< strong>tsconfig.json : 🎜

  npm i @dcloudio/uni-helper-json

  Copier après la connexion

  Copier après la connexion

  Expérience de développement pages.json et manifest.json améliorée

  Écrire des commentaires sur les fichiers json

  🎜Nous avons ouvert pages.json et manifest.json et avons constaté que cela serait signalé en rouge. En effet, dans < Les commentaires ne peuvent pas être écrits en code>json, mais les commentaires peuvent être écrits en jsonc. 🎜🎜🎜🎜< strong>Solution : On associe les deux fichiers pages.json et manifest.json à jsonc, puis on écrit des commentaires. Ouvrez settings.json dans les paramètres et ajoutez : 🎜🎜🎜🎜

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

  语法提示

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

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

  

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

  

  颜色块显示

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

  

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

  "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,

  Copier après la connexion

  Copier après la connexion

  

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

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

  

  

  

  条件编译注释高亮

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

  

  

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

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

  Copier après la connexion

  Copier après la connexion

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

  API语法提示

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

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

  

  

  组件提示

  接下来就是组件语法提示，如<view>、<button>等uni-app原生组件，这个需要我们手动安装对应的依赖包。

  npm i @dcloudio/uni-helper-json

  Copier après la connexion

  Copier après la connexion

  

  如果你觉得还不够好用，你还可以安装第三方插件来提供和Hbuilder X一样的代码块，推荐插件：uniapp小程序扩展、uni-app-snippets

  uni.scss变量提示

  注意：cli创建的uni-app项目，跟web项目一样，需要安装对应的sass模块，才能写scss。安装sass-loader，建议版本@10，否则可能会导致vue与sass的兼容问题而报错。

  npm i sass sass-loader@10 -D

  Copier après la connexion

  安装SCSS IntelliSense插件，就可以提示你项目中scss文件中定义的变量了。

  

  

  运行、发布项目

  对应的命令在package.json，中，可以自行查看。

  • npm run dev:%PLATFORM%
  • npm run build:%PLATFORM%

  发现命令还是比较长的，其实有更简便的方式，VSCode支持一键运行npm脚本，我们以微信小程序为例。

  

  

  VSCode跟Hbuilder x 不同的是，VSCode不会自动在微信开发者工具导入项目并打开，我们需要手动导入项目，只需要导入一次就行了，以后直接打开微信开发者工具就行了。

  需要注意的是，需要在manifest.json配置微信小程序appid，不然微信开发者工具会报错。

  

  在微信开发者工具导入打包出来的文件夹。

  

  

  然后，就可以愉快的写代码了。不管是运行项目，还是差量化编译速度还是非常快的。

  使用 vue3 创建工程

  尤雨溪宣布Vue 3 在 2022 年 2 月 7 日成为新的默认版本，但目前uni-app对应的Vue3版的组件库和插件还是有点少了。

  使用Vue3创建项目跟Vue2有点区别，Vue3创建的项目采用的是vite，有一说一，vite是真的快，初始化项目的时候遇到了一些坑，这里说一下。

  

  我一开始也卡住了，访问仓库失败，官方文档也说了解决方案，看了下，就是去更新下@dcloudio/uvm。

  npx @dcloudio/uvm

  Copier après la connexion

  然后再试一下就没问题了，这里以javascript模板为例

  npx degit dcloudio/uni-preset-vue#vite uni_vue3_cli

  Copier après la connexion

  还有一个坑，就是Vue3创建的项目默认不安装API语法提示依赖，所以要我们手动去安装一下，然后去tsconfig.json配置一下。

  npm i @dcloudio/types miniprogram-api-typings mini-types -D

  Copier après la connexion

  VSCode有尤雨溪团队专门为Vue3打造的插件Volar，写Vue3就用 Volar，再配合Vite，开发体验真的很nice，这里就不过多讲了。

  

  DCloud插件市场的使用

  VSCode不能像Hbuilder X一样一键导入插件，一般用cli创建的项目要使用插件，一般有两种方式，第一种是支持npm安装的，那就用npm最好，如uViewUI，另一种不支持npm安装的，那就下载对应的zip压缩包，放到项目中，这种一般会有两个版本，我们选择非uni_modules版本，如uCharts。

  

  这点确实没有Hbuilder X方便，不过导入第三方插件这种事情不是经常做，这还是可以接受的。

  插件推荐

  然后顺手推荐几个非常实用的插件，帮助我们提高开发效率。

  • Image preview
  • Path Intellisense

  鼠标悬停可以预览图片。

  

  "gutterpreview.showImagePreviewOnGutter": false,// 关闭在行号中显示缩列图

  Copier après la connexion

  这个插件可以帮助我们配置路径别名，路径智能感知。

  

  "path-intellisense.mappings": {
      "@": "${workspaceRoot}/src/",
      "static": "${workspaceRoot}/src/static"
   },

  Copier après la connexion

  

  还有两个是组件库语法提示、代码块的插件，自己根据需要去安装，这里就不过多赘述了。

  • uniapp小程序扩展
  • uni-ui-snippets

  结语

  我在github仓库里建了一个模板项目，可以参考一下：uni-vscode-template。

  总的来说，配置起来还是比较麻烦的，插件也比较多，但最终获得体验也是非常不错的。

  因为uni-app项目跟其他前端项目差异较大，我还是比较推荐为uni-app项目单独做个VSCode工作区。对于VSCode工作区概念，可以看看我的这篇文章：VSCode工作区指南：回归轻量，打造全能编辑器。

  

  或者说，为每个项目单独做一个settings.json。

  原文地址：https://juejin.cn/post/7090532271257714695
  

  作者：小染Jun

  更多关于VSCode的相关知识，请访问：vscode教程！！
  

  Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!