调整字号

Sublime Text 的代码片段功能

很多人都和我一样喜欢用 Sublime Text,非常好用的一款编辑器,今天主要探索一下里面自带的代码片段功能。对于程序员来说代码复用是很常见的事,总有那么几段代码会在各个项目中反复地用,这种情况下,除了给它保存起来随时粘贴,还可以用一个代码片段管理工具,建立起自己的代码库。代码库的管理工具很多,不过编辑器自带的一般已经够用。

创建代码片段

打开“Tools” > “New Snippet” 会弹出如下的新文件:

<snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <!-- <tabTrigger>hello</tabTrigger> -->
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

这就是创建代码片段所用的模板,把第三行内容换成自己的代码就可以了。后面几行是配置项,使用前先去除注释符号。其中 <tabTrigger> 用来设置快捷键。

比如,设置 <tabTrigger>hello</tabTrigger>,在编辑器里输入 hello 然后按 Tab,代码就出来了。

编辑完要保存文件到 /Packages/User 目录(你也可以在这新建一个子目录专门存放),扩展名用 .sublime-snippet,代码片段就创建成功了。

配置项详解

<content>

这是代码的主要部分,必须放在 <![CDATA[…]]> 里。如果代码中某些字段你想手动填入,就需要用到 $,比如一个 HTML5 的例子:

<snippet>
    <content><![CDATA[
<!doctype html>
<html lang="zh-cmn-Hans">
    <head>
        <meta charset="utf-8">
        <title>$1</title>
    </head>
    <body>
        $2
    </body>
</html>
]]></content>
    <tabTrigger>html5</tabTrigger>
</snippet>

输入 html5 按下 Tab,代码出现,并且光标处于 $1 的位置。还可以指定更多 $2$3 等,按 Tab 键光标会依次跳转。按下 Esc 终止跳转过程。

还可以指定默认值,比如上例,如果用 <title>${1:Demo}</title>,按下 Tab 后,“Demo”会处于自动选中状态:

snap1

可以直接编辑,也可以按 Tab 保留。

所以 $ 在这里是一个特殊字符,如果你得代码出现了 $,需要转义成 \$

<tabTrigger>

这是触发代码片段的快捷键。

<scope>

定义代码片段可以在什么地方使用,比如 <scope>source.html</scope> 定义片段可以在 html 文件中使用,或者指定多个文件格式 <scope>source.html,source.js</scope>source 是个固定用法,记住这么用就行了,也可以写成 text.html)。Scope 在 Sublime Text 中是一个重要概念,指的是光标所在的上下文,不光可以指示所在的文件类型,还可以指示光标是否处在一对双引号之间等等,都可以用来更细致地限制在何处触发代码片段。具体可以参考文档

<descriptiom>

给片段拟一个描述信息,用以显示在提示框中:

snap2

例子

这是两个我所用的代码片段,第一个 clearfix:

<snippet>
    <content><![CDATA[
/* clearfix */
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

]]></content>
    <tabTrigger>clearfix</tabTrigger>
    <scope>source.html,source.css</scope>
</snippet>

第二个是 JS 中常用的闭包,或者叫 IIFE:

<snippet>
    <content><![CDATA[
;(function() {
    $1
})();
]]></content>
    <tabTrigger>iife</tabTrigger>
    <scope>source.html,source.js</scope>
    <description>闭包</description>
</snippet>

使用闭包避免了污染全局环境。前面的分号如果觉得奇怪也可以去掉,但有时可以防止错误的出现,比如下面例子,前一行漏加了分号,后面的闭包就导致报错了:

var a = [1, 2]
(function() {})(
  ...
)();

这时分号的作用就体现出来了。加分号,保平安。

还没有评论,沙发空缺中……
flight