使PHPStorm支持微信小程序代码提示,代码高亮

以PHPStorm来说,对于WebStorm 也适用

1. wxml,wxss 代码高亮

参照 https://www.jianshu.com/p/00724ab30c89

添加两个文件后缀就可以

2.微信小程序代码提示

微信小程序中有很多API :https://developers.weixin.qq.com/miniprogram/dev/api/

方案一

在 PHPStorm 是无法提示的,不便于编码,网上的教程是基本使用的都是

将其中的wecharCode.jar 下载下来，然后在webStorm 的 File -> import settings 中导入即可 (PHPStorm也适用)

这两个使用的是PHPStorm的模板来做的提示,导入以后,在 File | Settings | Editor | Live Templates 中有一个 wechatCode ,
展开里面就是提示了

enter description here

以 wx.downloadFile 为例:

enter description here

实际输入体验,出来的话旁边有中文提示还是挺清晰的,但是有时不能触发或触发很慢

enter description here

好处是因为预设了模板内容,所以可以把函数的参数也带出来

enter description here

方案二

此方法网上看到的较少,起因是我在使用了上面的方案一后不是很满意,于是想到PHPStorm是怎么提示代码的?他提示的时候好像触发很快,于是我看了一下设置,发现 File | Settings | Languages & Frameworks 是可以对项目语言和框架进行设置的,这样就可以准确进行提示.于是在 File | Settings | Languages & Frameworks | JavaScript | Libraries 中我找了一下,要不要自己编写一个?看到旁边有个Download 点击看了一下,发现里面有很多库,于是搜索了一下,找到一个 weixin-app ,看了一下后面的github地址,找到这个项目:
DefinitelyTyped

去看了一下 weixin-app的: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/weixin-app 其中的 index.d.ts 文件
里面的函数定义和小程序官方是一致的,果断下载试了一下.

enter description here

实际是可以进行提示的,下面是方案一的提示

enter description here

比较下来这样触发是很稳定和快速的,同时可以按住Ctrl + 鼠标点击函数会跳转到 index.d.ts 中,缺点是不能自动填参数,但参数可以通过 index.d.ts 追踪到.

同时看到里面还有 wepy的提示库

enter description here

尝试了一下直接将index.d.ts 下载下来放到项目根目录,不用通过PHPStorm下载也可以使用,这样团队其他人可以不用下载,直接就有提示了

至于用哪一种方案,就看个人了,我是两个都装了并不冲突.

最后编辑于：2018.11.21 19:00:30