Sublime Text 插件开发流程

2016-12-01 本文已影响1282人 invalid_name

Sublime Text 是个轻量而强悍的跨平台文本编辑器，它具有很强的扩展能力。Sublime的自动补全，语言定义，代码片段，宏定义，快捷键绑定，鼠标事件绑定和插件。都是通过文件构成的包来实现。一个包就是在'Packages'目录下的一个文件夹，也可以把一个包打成一个zip文件，然后把扩展名改成.sublime-package。Sublime默认捆绑了很多包。大部分的包都是跟特定语言相关的。其中有2个包：Default和User。
Default包里包含了所有标准的键盘绑定，菜单定义，文件配置和一大堆用python写的插件。可以参考这些现成的插件进行开发。
User包总是在最后加载。通过在User包里的自定义文件，允许用户重写所有默认行为。

要写好插件首先要了解 Sublime插件开发API手册；另外，sublime插件需要使用python开发，它内置了python环境。了解这些之后，便可以开始开发自己的插件了。下面我们来一个简单的示例(以SublimeText 2为例)：

Sublime Text 2 插件开发示例：

1.通过Tools > New Plugin…菜单就可以自动创建一个插件的样板。

import sublime, sublime_plugin

class ExampleCommand(sublime_plugin.TextCommand):
    def run(self, edit):
        # 0 代表文件起始位置，如果要在光标位置可改成：self.view.sel()[0].b
        self.view.insert(edit, 0, "Hello, World!")

#import了2个模块，创建了一个command的类。

保存的时候要创建一个包。保存弹出框默认是在Packages\User目录下
我们要创建一个自己的包保存。在Packages目录下创建一个myplugin目录：
然后把文件保存在myplugin目录下命名为myplugin.py。
myplugin.py这个文件也可以是其它名字，但必须要.py文件后缀，最好跟插件目录的名称一致。

2.打开sublime的控制台 ctrl+`。这其实就是一个Python控制台，可以在里面运行python代码。在控制台输入：
view.run_command('example')
就可以看到"Hello World"被插入在当前编辑文件的开头。

sublime给插件提供了3中类型的command.
-Text Commands提供了对当前View对象(就是正在编辑的文件)内容的访问。
-Window Commands提供里对当前编辑器Window对象的引用。
-Application Commands不提供对任何window或者文件的引用，而且也很少用到。

sublime会把所有继承自sublime_plugin（TextCommand,WindowCommand,ApplicationCommand）
的类都去掉Command后缀，然后把驼峰格式转换成下划线格式，当做command的名称

3.为了方便使用插件，还需要给它定义一个快捷键。在我们的插件目录下，创建:
Default (Windows).sublime-keymap、Default (Linux).sublime-keymap和Default (OSX).sublime-keymap这3个文件，它们分别对应的不同平台。
如果我们是windows系统，那么打开刚才所创建的Default (Windows).sublime-keymap文件，输入：

[
    {"keys": ["F12"], "command": "example"}
]

现在只要按F12就可以在当前编辑文件的开头插入"Hello, World!"，如果需要传入参数就要加一个 args，现在我们改下插件代码，插入"Hello, World!"之后让它自动换行：

import sublime, sublime_plugin

class ExampleCommand(sublime_plugin.TextCommand):
    #接收一个参数 char ，拼接到 "Hello, World!" 后面
    def run(self, edit, char):
        self.view.insert(edit, 0, "Hello, World!" + char)

#key-bindings 改成：
[
    // 这里我们传了一个换行符过去，args中参数的命名要和插件代码中接收的参数名一致。否则会出错
    {"keys": ["F12"], "command": "example"，"args":{"char": "\n"}}
]

现在按 F12之后每插入一行"Hello, World!" 都会自动换行。调试时可以打开python控制台【ctrl + `】，如果出错可以看到信息。

修改菜单

sublime有个很爽的事就是通过创建 .sublime-menu文件就可以修改菜单。配置文件需要根据要修改的菜单类型来命名：
Main.sublime-menu 控制了程序的主菜单
Side Bar.sublime-menu 控制侧边栏文件或者目录的右键菜单
Context.sublime-menu 控制处于编辑状态的文件右键菜单

#下面在 Edit 的菜单里添加一个菜单项。
[
    {
        "id": "edit", 
        "children": 
        [ 
            {"id": "wrap"}, 
            { "command": "example" ，"args":{"char":"\n"}} 
        ] 
    } 
]
*注意这里的id的就一个已经存在的菜单结构。
#或者我们可以自己添加一列菜单列表：
[   
    {
        "caption": "babybus",
        // 键盘访问键
        "mnemonic": "x",
        "id": "bb",
        "children":
        [
            { "command": "example", "args":{"char":"\n"}, "caption": "HelloWorld"},  
        ]
    }
]
* 之后sublime上会多出一个名为"babybus"的菜单选项卡，鼠标点击之后底下会出现一个"HelloWorld" 菜单和设定的快捷键:

Paste_Image.png

插件安装

Sublime支持zip文件或者一个包目录来分享插件包。把包目录打包成一个zip文件，
然后把后缀改成.sublime-package,把这个文件放到Sublime Text 2安装目录下的【Installed Packages目录】重启sublime就安装完成了。

除了 Tools 下的 New Plugin 外，还有一个 New Snippet，它的作用是保存一些经常使用的代码块，然后在编辑器中只要输入触发条件的字符+TAB键，便可自动补全代码块。

示例(js 代码的注释部分)：

<snippet>
    <content><![CDATA[
/**
 *${1:function Instructions} 
 *@parames   ${2:parame name}    [description]
 *@return    ${3:return value}   [description]
 *@author    ${4:Name}   <${5:123456789}@qq.com>
 */
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>/**</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.js</scope>

    <description>/**</description>
</snippet>

#结构说明：

<snippet>
    <content><![CDATA[ 你需要插入的代码片段${1:name} ]]></content>

    可选：快捷键，利用Tab自动补全代码的功能 
    <tabTrigger>/**</tabTrigger>

    可选：使用范围，不填写代表对所有文件有效。附：source.css和test.html分别对应不同文件。 
    <scope>source.js</scope>
    
    可选：在snippet菜单中的显示说明（支持中文）。如果不定义，菜单则显示当前文件的文件名。 
    <description>My Fancy Snippet</description>
</snippet>

${1:name}表示代码插入后，光标所停留的位置，可同时插入多个。其中:name为自定义参数（可选）。
${2}表示代码插入后，按Tab键，光标会根据顺序跳转到相应位置（以此类推）。

创建文件 filename.sublime-snippet 保存以上代码，放入myplugin 文件夹；在 .js 文件中输入 /** 之后按 TAB键，便可自动生成一段注释！

自动提示：

Sublime支持很多种语言的自动提示功能，这里面我们来介绍一下如何对javascript代码进行自动语法提示！

1.创建一个 js.sublime-completions 文件，输入一下内容：

{  
    // 这里需要根据不同语言进行修改后缀，这里是 .js,如果是其他语言只要把js改成例如 lua、php等
    "scope": "source.js - keyword.control.js - constant.language.js - string",

    "completions":
    [
        # 一些会出现自动提示的单词
        "if", "else", "return", "false", "true", "break",   
        #输入fn 时会出现 fn-function的自动提示选项
        { "trigger": "fn-function", "contents": "function ${1:fuction_name}() {\n   //${2:to-do}\n}" }        
    ]
}

将 js.sublime-completions 文件保存至 myplugin 目录，在 .js 文件中输入 fn 时会出现 fn-function的自动提示选项，点击选项会自动生成一个空函数（按Tab键光标会依次跳转并选中 function_name 和 to-do）：

 function function_name() {
    //to-do
}

Sublime Text 2 的插件开发差不多就是这样。简单的功能我们可以自己动手实现，如果需要开发一些比较复杂功能的插件就需要多熟悉 sublime 插件的 API了，在Packages目录下的Defualt文件夹也有很多插件的例子，值得参考，例如：

Packages/Default/duplicate_line.py：复制一行或者单词
Packages/Default/goto_line.py：提示输入，定位到行
Packages/Default/font.py：读取设置，调整字体
Packages/Default/mark.py：侧边栏添加图标
Packages/Default/trim_trailing_whitespace.py：保存前，去掉尾部空格

Sublime Text 插件开发流程

Sublime Text 2 插件开发示例：

修改菜单

插件安装

自动提示：

猜你喜欢

热点阅读