微信小程序的 vim 插件源码下载

admin

Wxapp.vim

微信小程序开发 vim 插件。

提供包含文件检测、语法高亮、缩进、代码段、单词列表、语法检查等功能支持。

文件生成

插入代码块

使用 unite 查找并插入代码

功能列表

• 页面目录生成的命令
• 刷新和重建开发者工具的快捷键命令 (使用 osascript, 仅支持 macos)
• wxml 和 wxss 文件检测, 代码高亮, 缩进设置 (推荐快捷键 =at =a{)
• wxml, wxss 以及 javascript dictionary 文件, 使用参考：vim dictionary 的使用方式
• wxml 和 javascript Ultisnips 代码块补全
• wxml 和 wxss 的语法检查支持

目录生成

使用命令 Wxgen [folder] name 可以快速生成并打开一个页面所需的 wxml wxss 以及 javascript 文件，例如：

:Wxgen component product

将在 component 目录下生成 product 目录以及相关的三个文件并打开，如果命令只有一个参数则在当前目录下生成。

刷新/重建当前项目

只需要 .vimrc 中添加一个映射：

nmap <leader>r <lug>WxappReload

就可以使用快捷键就行刷新开发者工具的操作了，函数内部做了判定，如果当前文件类型为 wxml 或 wxss 时执行刷新操作，否则执行项目重建操作。

因为实现用到了 MacOS 独有的 osascript，所以只能在 Mac 系统上正常使用。

如果需要保存时让开发者工具自动刷新，请参考：https://chemzqm.me/vim-wxapp-reload

xml 编辑推荐插件：

• xml.vim 用于辅助编辑 xml 文件, 包含自动添加匹配标签、快速修改/删除标签等功能。

• emmet-vim 快速生成 xml 和 css, 我的配置：

      let g:user_emmet_settings = {
      \ 'wxss': {
      \   'extends': 'css',
      \ },
      \ 'wxml': {
      \   'extends': 'html',
      \   'aliases': {
      \     'div': 'view',
      \     'span': 'text',
      \   },
      \  'default_attributes': {
      \     'block': [{'wx:for-items': '{{list}}','wx:for-item': '{{item}}'}],
      \     'navigator': [{'url': '', 'redirect': 'false'}],
      \     'scroll-view': [{'bindscroll': ''}],
      \     'swiper': [{'autoplay': 'false', 'current': '0'}],
      \     'icon': [{'type': 'success', 'size': '23'}],
      \     'progress': [{'precent': '0'}],
      \     'button': [{'size': 'default'}],
      \     'checkbox-group': [{'bindchange': ''}],
      \     'checkbox': [{'value': '', 'checked': ''}],
      \     'form': [{'bindsubmit': ''}],
      \     'input': [{'type': 'text'}],
      \     'label': [{'for': ''}],
      \     'picker': [{'bindchange': ''}],
      \     'radio-group': [{'bindchange': ''}],
      \     'radio': [{'checked': ''}],
      \     'switch': [{'checked': ''}],
      \     'slider': [{'value': ''}],
      \     'action-sheet': [{'bindchange': ''}],
      \     'modal': [{'title': ''}],
      \     'loading': [{'bindchange': ''}],
      \     'toast': [{'duration': '1500'}],
      \     'audio': [{'src': ''}],
      \     'video': [{'src': ''}],
      \     'image': [{'src': '', 'mode': 'scaleToFill'}],
      \   }
      \ },
      \}

语法检查相关

• javascript 推荐使用 eslint, 然后在 .eslintrc 中加入

  "globals": {
    "App": true,
    "Page": true,
    "wx": true
  },

  避免小程序变量的未定义错误。

• wxss 推荐使用 stylelint, 针对 wxss 的参考配置, 安装本插件后可添加配置： let g:neomake_wxss_enabled_makers = ['stylelint'] 启用 neomake 的 wxss 的代码检测。

• wxml 推荐使用 tidy-html5, 可使用命令 brew install tidy-html5 进行安装, 安装本插件后添加配置 let g:neomake_wxml_enabled_makers = ['tidy'] 启用 neomake 的 wxml 代码检测。

TODO

• omnicomplete 支持
• 文档跳转支持
• 异步接收 console 消息
• 编辑同步 AppData

LICENSE

源码下载：

游客，如果您要查看本帖隐藏内容请回复

微信小程序的 vim 插件源码下载 http://bbs.jiandaima.com/thread-637-1-1.html

八角楼

登录可见评论