我们都知道，如果想做一个uniapp项目，Dcloud提供了一个强大的编译器HBuilder X，它提供的可视化的方式比较简单，开箱即用，无需配置nodejs。 但是，HBuilder X对于强类型的支持和监测是没有vsCode那么完善的，我们习惯了用vsCode开发前端项目，今天就试试用vsCode搭建一个uniapp微信小程序项目。
第一步，项目创建
由于只有在HBuilder X中才可以可视化的新建uni-app项目，在其他编译器中必须使用cli脚手架来搭建项目，vsCode也不例外，以下是官网介绍的cli创建项目的几个命令 uniapp.dcloud.net.cn/quickstart-…
我们选择使用Vue3/Vite+ts版
执行
npx degit dcloudio/uni-preset-vue#vite-ts uni-app-vue3-ts
可以看到项目已经创建出来，我们使用vsCode把项目打开：
这样项目就创建成功了！
第二步，安装依赖
现在还是一个vue项目，如何把它编译成uni-app项目呢？就需要我们安装依赖，打开终端
执行 npm i
安装成功后，项目中就会出现我们熟悉的node_modules依赖包
第三步，安装插件
HBuilder X之所以方便创建开发uni-app项目，是由于他内部对uni-app特有的兼容性，而如果想在vsCode中也方便开发，vsCode提供了几个插件需要安装
1、uni-create-view
这个插件主要是帮助我们快速创建uniapp视图和组件，我们安装好后，在项目中右键就会发现：
新建uniapp页面相关操作
2、uni-helper
这个插件主要是增加代码提示功能
3、uniapp小程序扩展
这个插件提供给我们鼠标悬停查看文档功能
第四步，ts类型校验
npm i -D @types/wechat-miniprogram @uni-helper/uni-app-types
这里面一共两个，一个针对微信小程序类型声明文件，一个uniapp声明文件，执行上面代码后，我们在package.json中就可以看到这两个包：
然后我们在tsconfig.json中进行配置：
看，这样就会把错误的类型报出来！
第五步，解决json文件中的注释问题
回过头来，我们看到项目中会出现两处报错的文件，一个是manifest.json，另一个是pages.json
原因都一样，就是vsCode对json文件采取的是严格json模式，不允许有注释，所以才会报错，解决办法也很简单，我们在设置中，找到文件关联，把这两个文件改成jsonc就可以了：
第六步：项目运行调试
执行 pnpm dev:mp-weixin
项目中会出现dist文件夹，我们用微信开发者工具，打开目录 dist/dev/mp-weixin
同样在vsCode中改变某个文件，开发者工具也会同步热更新，至此，vsCode搭建一个uni-app项目就完成啦！
