评论

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

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

写在前面

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

(图一)

几个不错插件安装效果


上图:标签高亮插件-vincaslt.highlight-matching-tag
功能:可以把当前行对应的标签开头和结尾高亮起来,让开发者一目了然

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

上图: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 格式化

DIY添加适合自己的插件

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

  1. 安装vsCode并安装你需要移植的插件,必须要说的是vsCode的插件非常多,好的插件也很多。相关安装,搜索插件教程建议大家百度相关教程。或者直接下载vsCode亲自体验,插件安装过程还是非常简单的。
  2. 找到vsCode相关插件的安装文件夹:
    操作系统 安装路径
    windows %USERPROFILE%.vscode\extensions
    macOS ~/.vscode/extensions
    Linux ~/.vscode/extensions
  3. 复制对应插件文件夹到微信开发者工具的「打开编辑器扩展目录」(图一标注为1的地方)
  4. 进入微信开发者工具的「管理编辑器扩展」功能页面,在尾端加入对应添加的插件名称。以以上3个介绍的插件为例,在原来的尾端加入:
    “vincaslt.highlight-matching-tag”,
    “overtrue.miniapp-helper”,
    “qiu8310.minapp-vscode”
  5. 重启微信开发者工具,见证插件带来的编码便利吧!

需要注意的

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

最后一次编辑于  星期二 09:30  
点赞 1
收藏
评论

5 个评论

  • Admin²⁰²⁰
    Admin²⁰²⁰
    02-25

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

    开发版 Nightly Build 1.02.2002242 macOS



    02-25
    赞同 3
    回复
  • Stephen
    Stephen
    03-06

    再贡献两个插件

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

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

    02-25
    赞同 1
    回复 1
    • Admin²⁰²⁰
      Admin²⁰²⁰
      02-26
      相信以后会有这个功能。目前感觉团队重心不在这
      02-26
      回复
  • Daniel
    Daniel
    03-20

    qiu8310.minapp-vscode 这个插件中wxml文件格式化时,text标签属性太长会自动换行,页面显示也会换行,有没有解决的方法?

    03-20
    赞同
    回复 10
    • Admin²⁰²⁰
      Admin²⁰²⁰
      03-20
      下面参数配置下。
      03-20
      回复
    • Daniel
      Daniel
      03-20回复Admin²⁰²⁰
      在开发者工具中使用怎么配置?
      03-20
      回复
    • Admin²⁰²⁰
      Admin²⁰²⁰
      03-20回复Daniel
      微信编辑器settings.json配置文件,mac下文件位置:
      ~/Library/Application Support/微信开发者工具/Default/Editor/User/settings.json
      windows下应该也能找到。
      03-20
      回复
    • Daniel
      Daniel
      03-20回复Admin²⁰²⁰
      谢谢,格式化工具都试了一下,感觉都不好用,只能把格式化文件改了名字,不想使用。
      还有一个问题,就是在不使用 qiu8310.minapp-vscode这个插件时,单单使用 overtrue.miniapp-helper 这个插件 ,在wxml注释居然js的注释方式,即/* */  而不是,不知道是不是我使用的方式不对。
      03-20
      回复
    • Admin²⁰²⁰
      Admin²⁰²⁰
      03-20回复Daniel
      这个没注意。这些插件会修改注释标签么?好像里面功能没提到这个
      03-20
      回复
    查看更多(5)
  • Wang
    Wang
    02-26

    怪不得没发现,原来是Mac版的

    02-26
    赞同
    回复 2
登录 后发表内容