WebStorm开发uniapp代码提示及编译运行方法 非vue-cli创建项目

之前开发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下载并安装

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容