VSCode Development UNI-APP Configuration Tutorial and Plugin

Written in front

uni-app is a framework for developing all front-end applications using Vue.js. Developers write a set of codes and publish them to multiple platforms such as iOS, Android, H5, various mini-programs (WeChat/Alipay/Baidu/Toutiao/QQ/DingTalk/Taobao), quick applications, etc. The best tool for developing UNI-APP is HbuilderX, but this does not make you wonder why you should develop UNI-APP in VsCode. In official terms, HBuilderX is an editor specially built for Vue, so what should you do if it is not Vue? At this time, you have to choose other products, so why not transfer UNI-APP to other products for development? Therefore, from the perspective of a unified editor, VsCode was recently chosen.

HBuildex may be the best tool for developing UNI-APP, but it is not the most comprehensive tool.

• Before using VS Code to develop UNI-APP, I strongly recommend reading the official guide When uni-app meets vscode. Of course, I will emphasize some important steps again later. And the official tutorial vue-cli development uni-app tutorial

Precautions

• VsCode can only act as an editor when developing UNI-APP. Program debugging must be done in the corresponding environment. For example, WeChat applets can only be debugged in WeChat developer tools (this is the same as HX)
• You can use npm commands to run and package in VsCode, but you cannot directly call the real machine simulator, nor can you use functions such as APP packaging. If you have such needs, you can only edit the code in the VSCode environment and then package it through HX.

Development environment construction

1. Install Vue-cli 3.x globally (skip if already installed)

npm install -g @vue/cli

If Taobao mirror is installed, it is recommended to use cnpm installation

cnpm install -g @vue/cli

2. Create a uni-app project via CLI

vue create -p dcloudio/uni-preset-vue my-project

3. Open the project using VsCode

4. Install the Vue syntax prompt plugin

Install the syntax prompt plug-in in the Vscode plug-in market. Here are some practical plug-ins recommended

• Vetur Vue syntax hint plugin
• vue-helper is another Vue syntax plugin, used in conjunction with Vetur
• Auto Close Tag is a self-closing plugin for tags, which is very useful when using external components.
• Auto Rename Tag tag renaming plug-in, very useful when you need to change the tag name
• Highlight Matching Tag Highlight the selected tag and quickly locate the beginning and end of the tag
• TODO Highlight Highlight the to-do items in the code
• Todo Tree and TODO Highlight are combined to build a more perfect todo management system
• koroFileHeader quickly generates header comments and code comments

5. Install UNI-APP syntax prompt

npm i @dcloudio/uni-helper-json

6. Import HX custom code blocks

Download the uni-app code block from github and put it in the .vscode directory under the project directory to have the same code block as HBuilderX.

If there is no .vscode , create a new one in the project root directory

You can also customize your own commonly used code blocks

7. Run & Publish Project You can run and publish projects through the VSCode left explorer/NPM script quick start command

Run the project

npm run dev:%PLATFORM%

Publish a project

npm run build:%PLATFORM%

The possible values ​​for %PLATFORM% are as follows: