当 uni-app 碰见 vscode

uni-app 是一个用 vue 语法来开发小程序、App、H5 的框架，其官方推荐的开发工具为 HBuilderX，使用起来有很好的开发体验。

不过，因为 HBuilderX 没有 Linux 版以及不少前端以前已经习惯了 vscode，不想更换编辑器。直接使用 vscode 开发 uni-app，其体验并非很好。

其实 uni-app 和 vscode 也能够很搭，接下来为大伙带来 vscode 中 uni-app 的正确打开姿式。

CLI 工程

全局安装 vue-cli 3.x（如已安装请跳过此步骤）

npm install -g @vue/cli
复制代码

经过 CLI 建立 uni-app 项目

vue create -p dcloudio/uni-preset-vue my-project
复制代码

此时，会提示选择项目模板，初次体验建议选择 hello uni-app 项目模板，以下所示：

在vscode中打开项目

安装vue语法提示插件vetur

CLI 工程默认带了uni-app语法提示和5+App语法提示

安装组件语法提示

npm i @dcloudio/uni-helper-json
复制代码

导入 HBuilderX 自带的代码块

从 github 下载 uni-app 代码块，放到项目目录下的 .vscode 目录便可拥有和 HBuilderX 同样的代码块。

运行项目

npm run dev:%PLATFORM%
复制代码

发布项目

npm run build:%PLATFORM%
复制代码

%PLATFORM% 可取值以下：

值	平台
h5	H5
mp-alipay	支付宝小程序
mp-baidu	百度小程序
mp-weixin	微信小程序
mp-toutiao	头条小程序
mp-qq	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 编辑器打开。