背景
小程序项目接入Eslint后计划在小组内推广,然后同事问我个问题: 微信开发者工具能看到eslint报错的嘛? 这确实是个好问题,这点对于习惯用微信开发者工具的同事来说确实需要考虑下(本人习惯vscode工具开发,然后安装eslint插件这些就很方便,是我考虑不周了)。
落地方案
微信开发者工具-> 设置 -> 扩展设置 -> 编辑器设置-> 安装Eslint && Prettier,安装完后记得重新启动微信开发者工具。
进入测试
发现不满足规则的,开发者工具会置灰,鼠标移上去也支持报错提示&快速fix, 但是好像没有vscode的红色波浪线报错,就好像没这么直观了。
查看下微信开发者工具中集成的eslint的版本还是v2.1.6。
对比之后发现是eslint的版本不同导致的效果差异: v2.1.16在vscode无波浪线&问题处无问题;在v2.2.2新版本中有波浪线&问题处能实时看到问题原因。
问题: 官方能否支持开发者手动升级插件的版本?(eg: 在这个demo中若能支持手动升级到v2.2.2的版本,应该是可以更好地优化错误提示的)
官方:
相关文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/editorextensions.html
但本人在测试的时候,并未看到官方相关截图,测试微信开发者工具版本: stable 1.05.2204250。
问题处理方案:
> 秉承官方出的功能肯定是有落地方案的,在google一波果然发现了解决方案。
- 找到VSCODE中已经安装好的插件包(windows电脑默认在: C:\Users\xxx\.vscode\extensions), eg: eslint
- 找到微信开发者中扩展插件的安装目录: 右上角编辑-> 打开编辑器扩展目录即可打开。
- 找到想要替换的插件包的文件夹,打开其package.json,找到其ID(metadata字段)
- 打开编辑 -> 管理编辑器设置
到这一步就被卡死了,翻天找地都没看到网友说的下面这张图是哪里来的(猜测是版本的问题,这里就不纠结了,换个方案)
(下图来源于网络图,若有侵权等行为请随时联系删除)
建议解决方案
- 找到VSCODE中已经安装好的插件包(windows电脑默认在: C:\Users\xxx\.vscode\extensions), eg: eslint,拷贝该文件夹。
- 扩展插件-> 更多-> 导入已安装的vscode扩展,具体操作如下图:该步骤会把我们vscode工具有的扩展工具都同步过来。
注意:这里推荐从已解包的扩展文件夹安装(不一定vscode的插件都用得上,按需导入比较合理)
啊哦,导入不成功,因为版本不兼容。
终极问题:微信开发者工具扩展插件版本能否支持手动更新??对于这种版本不兼容的,普通开发者能做的是什么呢?
eslint高版本的插件依赖宿主环境更新。这里如果想在工具编辑器上使用eslint插件可以建议使用7.*版本的eslint,用默认提供的2.1.16版本插件就能给予提示。更高版本的插件需要后续工具编辑器更新才能使用