WebStorm开发uniapp代码提示及编译运行方法 非vue

之前开发uniapp是用HBuilderX创建的，但是由于HBuilderX真是太难用了，特别是多项目的时候，多开项目用起来简直是灾难。多项目同时运行到微信小程序也不支持。

HBuilderX Alpha版 3.7.13.20230411 及以上版本 现已支持多个项目同时运行到微信开发者工具。

后来改用vue-cli创建项目，但是安装和更新插件又没有HBuilderX那么方便。

现在无意中看到一个WebStorm的插件，可以运行和编译HBuilderX创建的项目，可以不用运行HBuilderX。但是只限于微信小程序和H5。

插件名: Uniapp Tool

Uniapp Tool

插件主页: https://plugins.jetbrains.com/plugin/21470-uniapp-tool

WebStorm搜索“Uniapp Tool”或者打开插件主页安装

安装好以后在设置->工具->UniApp  添加HBuilderX和微信开发者工具的路径

并在运行/调试配置里面添加运行配置

运行/调试配置后点“+”号选择“UniApp”，根据自己的需要添加运行配置

添加好配置后，在状态栏上即可选择运行

运行成功

如果运行失败，请检查HBuilderX路径是否配置正确

经过两天的使用，发现插件有个小问题，重新打开项目或者重启ide的话，运行配置可能会丢失，需要重新配置。

现在不会出现配置丢失的问题了。

如果使用WebStorm打开HBuilderX创建的项目没有uniapp代码提示或者代码上有黄色波浪线警告uniapp组件或api不支持的话，可以安装npm插件解决

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

或者添加 uniapp库支持，打开设置-> 语言和框架 ->JavaScript ->库->下载...  选择uni-app下载并安装