评论

动手打造更强更好用的微信开发者工具-编辑器扩展篇

合理利用第三方编辑器插件,可以极大的提升开发效率。大家一起来扩展下你的微信开发者编辑器吧

1. 写在前面

1.1 微信开发者工具现状

具备一些基本的通用IDE功能,但是第三方的支持扩展需要加强。

1.2 开发者工具自带的编辑器扩展功能

可能很多老铁没用过官方的微信开发者工具的编辑器扩展(我一般称为编辑器插件)。官方把这块功能也隐藏得很深,也没有相关文档介绍,但是预留了相关的入口。合理利用第三方编辑器插件,可以极大的提升开发效率。下面先来看看官方预留的编辑器插件入口:

(图一)

2. 几个不错插件安装效果

2.1 标签高亮插件-vincaslt.highlight-matching-tag


功能:可以把当前行对应的标签开头和结尾高亮起来,让开发者一目了然

2.2 小程序开发助手插件-overtrue.miniapp-helper

功能:必须要说的这个是纯国产的插件,里面的代码片段功能很全,具体介绍:小程序开发助手 - Visual Studio Marketplace
https://marketplace.visualstudio.com/items?itemName=overtrue.miniapp-helper

2.3 minapp插件-qiu8310.minapp-vscode

功能:这个是今天的明星插件,里面的跳转功能很强,可以在wxml里CMD+点击对应变量/方法和CSS样式名称直接跳转到对应的js/wxss文件对应的地方。具体的下面是官方介绍:

  1. 标签名与属性自动补全
  2. 根据组件已有的属性,自动筛选出对应支持的属性集合
  3. 属性值自动补全
  4. 点击模板文件中的函数或属性跳转到 js/ts 定义的地方(纯 wxml 或 pug 文件才支持,vue 文件不完全支持)
  5. 样式名自动补全(纯 wxml 或 pug 文件才支持,vue 文件不完全支持)
  6. 在 vue 模板文件中也能自动补全,同时支持 pug 语言
  7. 支持 link(纯 wxml 或 pug 文件才支持,vue 文件不支持)
  8. 自定义组件自动补全(纯 wxml 文件才支持,vue 或 pug 文件不支持)
  9. 模板文件中 js 变量高亮(纯 wxml 或 pug 文件才支持,vue 文件不支持)
  10. 内置 snippets
  11. 支持 emmet 写法
  12. wxml 格式化

3. DIY添加适合自己的插件

3.1 添加插件功能简介

仔细研究过微信开发者工具的人可能知道或者了解,其实微信开发者工具编辑器跟微软的开源编辑器vsCode「颇有渊源」。再深入研究发现,vsCode的插件完全可以无缝移植到微信开发者工具编辑器里来,所以今天的内容就是移植vsCode的插件到微信开发者工具。咱们先看看微信开发者工具自带的「管理编辑器扩展」功能(图1标注为2的地方)
(图二)

3.2 插件添加具体步骤

3.2.1 安装插件,获取插件文件

安装vsCode并安装你需要移植的插件,必须要说的是vsCode的插件非常多,好的插件也很多。相关安装,搜索插件教程建议大家百度相关教程。或者直接下载vsCode亲自体验,插件安装过程还是非常简单的。

3.2.2 复制插件文件夹

找到vsCode相关插件的安装文件夹:
操作系统 安装路径
windows %USERPROFILE%.vscode\extensions
macOS ~/.vscode/extensions
Linux ~/.vscode/extensions
复制对应插件文件夹到微信开发者工具的「打开编辑器扩展目录」(图一标注为1的地方)

3.2.3 添加插件配置文件

新版开发者工具直接进入图形设置,扩展设置里勾选对应插件即可。如下图:

旧版操作方法:进入微信开发者工具的「管理编辑器扩展」功能页面,在尾端加入对应添加的插件名称。以以上3个介绍的插件为例,在原来的尾端加入:
“vincaslt.highlight-matching-tag”,
“overtrue.miniapp-helper”,
“qiu8310.minapp-vscode”

3.2.4 见证奇迹

重启微信开发者工具,见证插件带来的编码便利吧!

4 需要注意的

vsCode的插件很多,小程序相关的也越来越多了,但是插件质量参差不齐,所以安装时建议选择「标星」star比较多的插件。

最后一次编辑于  2020-05-02  
点赞 12
收藏
评论

15 个评论

  • 阿欢👣
    阿欢👣
    2020-05-14

    这些插件,简直是,太太太特么的好用了!!!!效率提高100000000倍

    2020-05-14
    赞同 1
    回复
  • 阿欢👣
    阿欢👣
    2020-05-13

    非常好的帖子,支持!

    关于「minapp插件-qiu8310.minapp-vscode 」有个问题:我发现这个插件会增加缩进啊,wxml页面原本缩进是两个空格,启用这个插件后,就变成了4个空格

    看了一下设置,没发现什么异常啊?怎么解决?

    2020-05-13
    赞同 1
    回复 6
    • Admin²⁰²¹
      Admin²⁰²¹
      2020-05-14
      这个好像可以设置的。我找找设置看
      2020-05-14
      回复
    • Admin²⁰²¹
      Admin²⁰²¹
      2020-05-14回复Admin²⁰²¹
      2020-05-14
      回复
    • 阿欢👣
      阿欢👣
      2020-05-14回复Admin²⁰²¹
      我设置了,但是还是四个空格。在setting.json里面,我发现还有个「”editor.tabSize“: 2」,这个和minapp的是不是叠加导致有四个空格??
      2020-05-14
      回复
    • Admin²⁰²¹
      Admin²⁰²¹
      2020-05-14回复阿欢👣
      我的理解是「”editor.tabSize“: 2」表示一个tab代表2个空格。如果插件设置了使用tab来格式化的话,又设置了2个tab,那么就是2*2=4个空格了。
      我没做其他设置,插件也没特意配置,我对格式化空格多少个也不在意的,目前设置和效果如下,下面的应该是2个空格吧:
      2020-05-14
      回复
    • 阿欢👣
      阿欢👣
      2020-05-14回复Admin²⁰²¹
      你的截图确实是2个空格,我的设置和你的是一样的。。。
      2020-05-14
      回复
    查看更多(1)
  • Admin²⁰²¹
    Admin²⁰²¹
    2020-02-25

    上面所使用的微信开发者工具版本为:

    开发版 Nightly Build 1.02.2002242 macOS



    2020-02-25
    赞同 3
    回复
  • 吴俊伟
    吴俊伟
    2020-06-03

    我的qiu8310.minapp-vscode插件好像没生效,除了在app.js 点击方法在同一个页面跳,其他功能都不触发。 Mac

    2020-06-03
    赞同 1
    回复
  • Stephen
    Stephen
    2020-03-06

    再贡献两个插件

    "formulahendry.auto-close-tag",
    "formulahendry.auto-rename-tag",
    
    2020-03-06
    赞同 1
    回复 2
    • Admin²⁰²¹
      Admin²⁰²¹
      2020-03-06
      这么巧这两个我都在用
      2020-03-06
      回复
    • Stephen
      Stephen
      2020-03-06回复Admin²⁰²¹
      用的不方便才想着找对应插件,你上面说的几个也是编辑器功能一出就移植过来了的
      2020-03-06
      1
      回复
  • 拎包哥
    拎包哥
    2020-02-25

    用心了,如果小程序可以直接添加这些插件就好了

    2020-02-25
    赞同 1
    回复 2
    • Admin²⁰²¹
      Admin²⁰²¹
      2020-02-26
      相信以后会有这个功能。目前感觉团队重心不在这
      2020-02-26
      回复
    • 273270381
      273270381
      2020-05-08
      可能涉及到版权的问题吧
      2020-05-08
      回复
  • yangc
    yangc
    2020-11-27

    大佬,现在版本的工具,这些插件还生效吗。我的以前生效,现在一个都不生效了

    2020-11-27
    赞同
    回复
  • 阿伦
    阿伦
    2020-11-20

    终于可以用上VIM, 太感动了。。。

    2020-11-20
    赞同
    回复
  • 不知不觉
    不知不觉
    2020-11-10

    我一步步的设置了,还是不行,template里的代码还是一个色,vsCode 的 extensions里下载的插件是有版本的,例如vincaslt.highlight-matching-tag-0.10.0,在复制这个文件夹的时候,需要把版本号去掉吗?

    2020-11-10
    赞同
    回复
  • 上炁
    上炁
    2020-08-05

    楼主真赞,一直喜欢VIM,一直渴望官方能出个插件,·····今天看到帖子一试,自己动手,丰衣足食

    2020-08-05
    赞同
    回复 1
    • Admin²⁰²¹
      Admin²⁰²¹
      2020-08-05
      感谢支持
      2020-08-05
      回复

正在加载...

登录 后发表内容