微信小程序开发 Vim 插件 - Wxapp.vim

2016-09-26      171      JavaScript
项目简介 前往项目首页

微信小程序开发 Vim 插件。

提供包含文件检测、智能补全、文档跳转、语法高亮、缩进、代码段、单词列表、语法检查等功能。

安装方式

以下分别是使用NeoBundleVundle vim-plug 安装的命令:

NeoBundle 'chemzqm/wxapp.vim'
Plugin 'chemzqm/wxapp.vim'
Plug 'chemzqm/wxapp.vim'

效果图

文件生成

插入代码块

使用unite 查找并插入代码

功能列表

  • 页面目录生成
  • 智能刷新开发者工具映射(仅支持 macos)
  • wxml 和 wxss 文件检测, 代码高亮, 缩进函数 (推荐快捷键=at=a{)
  • wxml, wxss 以及 javascript dictionary 文件, 使用参考: vim dictionary 的使用方式
  • wxml 和 javascriptUltisnips 代码块补全
  • wxml 和 wxss 的语法检查支持

智能补全

本插件提供比官方 IDE 更为完整实用的智能补全, 具体实现和使用方式如下:

  • 针对 wxcss 使用的 vim runtime 自带的 css 补全,插件内已进行如下配置:

    setl omnifunc=csscomplete#CompleteCSS

  • 针对 wxml 实现并且配置了函数wxmlcomplete#Complete, 它能提供标签、 属性、属性值的智能补全(官方 IDE 仅支持标签)

  • 针对 javscript 本插件提供了tern 的插件,内含所有 API 的函数补全,使用前需要首先安装tern-for-vim 插件,使用npm install命令安装 tern 之后将文件tern/wxapp.js拷贝到tern_for_vim/node_modules/tern/plugin目录下,最后在小程序项目根目录下配置文件.tern-project为:

    {
      "libs": [
        "ecmascript"
      ],
      "plugins": {
        "wxapp": {}
      }
    }

    即可为项目的 javscript 文件启用omnicomplete了

目录生成

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

:Wxgen component product

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

刷新开发者工具

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

nmap <leader>r <Plug>WxappReload

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

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

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

推荐插件

  • 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'}],
        \   }
        \ },
        \}

    如果你已经配置了变量g:user_emmet_settings, 注意避免重复设置。

语法检查

  • 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 代码检测。

待完成

  • 文档跳转支持