Can vscode use uni-app?

vscode can use uni-app, the specific method: 1. Install the vue syntax prompt plug-in vetur; 2. Execute the "npm i @dcloudio/uni-helper-json" command to install the component syntax prompt; 3. Download and Just import the uni-app code that comes with HBuilderX.

The operating environment of this tutorial: Windows 7 system, Visual Studio Code version 1.45.1.0, DELL G3 computer.

uni-app is a framework that uses vue syntax to develop small programs, apps, and H5. The officially recommended development tool is HBuilderX, which provides a good development experience.

However, since HBuilderX does not have a Linux version and many front-ends have been accustomed to vscode before, they do not want to change editors. Directly using vscode to develop uni-app, the experience is not very good.

In fact, uni-app and vscode can also go well together. Next, I will show you the correct opening posture of uni-app in vscode.

CLI Project

Install vue-cli 3.x globally (skip this step if already installed)

npm install -g @vue/cli

Through CLI Create the uni-app project

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

At this time, you will be prompted to select a project template. For first-time experience, it is recommended to select thehello uni-app project template, as shown below:

Open the project in vscode

Install the vue syntax prompt plug-in vetur

The CLI project comes with uni-app syntax prompts and 5 App syntax prompts by default

##Installation Component syntax prompts

Component syntax prompts are the highlight of uni-app, which few other frameworks can provide.

npm i @dcloudio/uni-helper-json

Import the code block that comes with HBuilderX

Download from github

uni-app code block, put it in the .vscode directory under the project directory to have the same code block as HBuilderX.

##Run project

npm run dev:%PLATFORM%

Publish project

npm run build:%PLATFORM%

%PLATFORM%

Possible values ​​are as follows:

Valueh5mp-alipay mp-baidump-weixinmp- toutiaomp-qq

CLI 方式参考文档

HBuilderX 工程

HBuilderX 创建的工程默认不带 types 语法提示，在 vscode 中编辑的时候，可以自行安装

初始化npm（如已初始化跳过此步骤）

npm init -y

安装 uni-app 语法提示

npm i @types/uni-app @types/html5plus -D

另外，uni-app 项目下的 manifest.json、pages.json 等文件可以包含注释。vscode 里需要改用 jsonc 编辑器打开。

关于uni-app插件市场的插件，vscode一样可以使用。

• 如果这些插件有npm使用方式（如uni-ui），可以用npm
• 如果作者没提供npm方式，那么下载zip包解压也是可以用的

【相关推荐：《uniapp教程》、《vscode教程》】

Platform
H5
Alipay Mini Program
Baidu Mini Program
WeChat Mini Program
Toutiao Mini Program
qq Mini Program

The above is the detailed content of Can vscode use uni-app?. For more information, please follow other related articles on the PHP Chinese website!