触摸Sublime Text Plugins

在Sublime Text Snippets实用技巧二则一文中提到可以通过Sublime Text的Snippets功能快速在页面中插入图片占位符标签，本来在此基础上借助Sublime Text的Plugins(插件)功能进一步完善它。

引子

我们知道placekitten为我们提供了为我们提供了生成图片占位符的方案，比如当我们在页面中插入src设为http://placekitten.com/300/240的img标签时，返回一张300 x 240的猫咪图片如下：

kitten: 300 x 240

同样，placehold.it也提供了类似的服务，比如在页页插入src设为http://placehold.it/300x240的img标签时，返回一张标有图片尺寸的原型图，如下所示：

placehold: 300 x 240

现在我想利用同一个tab trigger可以将placekitten和placehold.it整合到一起。也就是说当我们输入kitten时触发的第一个编辑点输入格式为{width}/{height}时，得到相应尺寸的猫咪图片，而当我们输入格式为{width}x{height}时，得到标有图片尺寸的原型图。显然这涉及到逻辑判断，这时Snippets的正则功能已无能为力了，至少我没想到办法。

这时，Sublime Text提供给我们的插件功能就派上大用场了。

正文

我们在Sublime Text官网上可以了解到，在Sublime Text的早期版本中，作者原本打算将Scheme语言作为Sublime Text的插件开发语言，但考虑到Scheme语言方言多，使用人少且门槛高。后来调研后决定采用Python脚本语言作为插件开发语言，事后证明这一抉择是十分明智的，Python脚本语言易学易用，使用人群广泛，才有了如今Sublime Text插件开发活跃的生态圈。

有关Sublime Text的插件开发文档可参考这里、这里还有这里，官网论坛也是个很不错的学习交流的地方，在此就不多讲了。

本文要分享的是一个很简单的通过tab触发的插件，以整合placekitten和placehold.it服务，具体触发机制如下：

输入pi后按tab键触发placehold.it服务，触发后可交互性指定图片占位符宽高了
输入pi{numbers}后按tab键触发placehold.it服务，其中{numbers}为图片占位符的宽高（即占位符图片为正方形）
输入pi{width}x{height}后按tab键触发placehold.it服务，其中{width}指定图片占位符的宽度，{height}指定图片占位符的高度，注意{width}和{height}之间是小写的x
输入pi{width}X{height}后按tab键触发placekitten服务，其中{width}指定图片占位符的宽度，{height}指定图片占位符的高度，注意{width}和{height}之间是大写的X

具体例子如下：

在文档中输入pi后按tab键触发后返回如下标签，此时高亮显示300x240，可以交互性地指定宽高了，然后tab键跳至第2个编辑点可选择是否保留width和height属性

<img src="http://placehold.it/300x240" width="300" height="240" title="PLACE.IT: [300 x 240]" alt="" />

在文档中输入pi100后按tab键触发后返回如下标签，同时可选择是否保留width和height属性

<img src="http://placehold.it/100x100" width="100" height="100" title="PLACE.IT: [100 x 100]" alt="" />

在文档中输入pi150x180后按tab键触发后返回如下标签，同时可选择是否保留width和height属性

<img src="http://placehold.it/150x180" width="150" height="180" title="PLACE.IT: [150 x 180]" alt="" />

在文档中输入pi150X180后按tab键触发后返回如下标签，同时可选择是否保留width和height属性

<img src="http://placekitten.com/150/180" width="150" height="180" title="KITTEN: [150 x 180]" alt="" />

废话不多说，最后附上相关代码：

图片占位符插件 (PlaceImage.py) 下载

# -*- coding: utf-8 -*-

import sublime_plugin, re

class PlaceImageCommand(sublime_plugin.EventListener):
  def __init__(self):
    self.pi_snip = '<img src="http://placehold.it/${1:300x240}"${2: width="${1/^(?:[^\d]*)?([\d]*)x?.*$/$1/i}" height="${1/^(?:[^\d]*)([\d]*?)x?([\d]*)(?:[^x]*)?$/$+/i}"}${4: title="${3:PLACE.IT: [${1/^(?:[^\d]*)?([\d]*)x?.*$/$1/i} x ${1/^(?:[^\d]*)([\d]*?)x?([\d]*)(?:[^x]*)?$/$+/i}]}"} alt="${5:Edit Me}" />'
    self.placeit = '<img src="http://placehold.it/%sx%s"${1: width="%s" height="%s"}${3: title="${2:PLACE.IT: [%s x %s]}"} alt="${4:Edit Me}" />'
    self.kitten  = '<img src="http://placekitten.com/%s/%s"${1: width="%s" height="%s"} title="${2:KITTEN: [%s x %s]}" alt="${3:Edit Me}" />'
    self.pattern = r'^pi(?:(\d+)(?:(x|X)(\d+))?)?$'

  def on_query_completions(self, view, prefix, locations):
    match = re.match(self.pattern, prefix)

    if match:
      groups = match.groups()
      numNil = groups.count(None)

      # handle tab trigger: `pi`
      if numNil == 3:
        value = self.pi_snip

      # handle tab trigger: `pi{numbers}`
      elif numNil == 2:
        width  = groups[0]
        height = width
        value  = self.placeit % ((width, height) * 3)

      # handle tab trigger: `pi{width}(x|X){height}`
      else:
        width  = groups[0]
        height = groups[2]
        source = self.placeit if groups[1] == 'x' else self.kitten
        value  = source % ((width, height) * 3)
    else:
      value = None

    return [(prefix, prefix, value)] if value else []

将此段代码直接保存到Packages目录下即可使用啦！

Silent Reverie

Creating memories with the awesome stuff I've learnt.

触摸Sublime Text Plugins

引子

正文

参考

Comments