sublime 3 新建代码片段

新建代码片段的目的就是快速实现自定义的代码，从而提高开发效率。

1. 点击 sublime 菜单栏中的工具 –> 插件开发 –> 新建代码片段选项

这里写图片描述

2. 以下就是生成的代码片段的模板，我们要使用该模板自定义我们想要的代码片段

这里写图片描述

在生成的代码片段的模板中

① <snippet> </snippet>标签表示代码片段；

② <content></content>标签中表示要自定义哪些代码片段（也就是存放你要自定义的代码片段）；

③ ${1:this} 表示代码插入后，光标第一次停留的位置，可同时插入多个，this为自定义参数；

④ ${2:snippet}表示代码插入后，按Tab键，光标会根据第一次的顺序跳转到相应位置（也就是按按Tab键后光标跳转到第二次的位置）；

⑤ <tabTrigger>hello</tabTrigger> 标签中的内容是我们给代码片段起的名字（也就是当我们定义好代码片段后，我们通过这个名字可以找到我们自定义的代码片段），当然需要把这个标签的注释打开哈;

⑥ 其它代码可以忽略；（(#^.^#)，容我偷个懒！）

<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>

注意 : <content><![CDATA[ ]]></content> 该格式不要删除，里面需要存放我们自定义的代码片段。

3. 打比方我们要自定义以下代码片段（也就是我们要快速生成的结构）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src=""></script>
<body>

</body>
</html>

4. 然后把该自定义的代码片段粘贴到代码片段模板中，如下图所示

这里写图片描述

<snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src=""></script>
<body>

</body>
</html>

]]></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>

5. 表急！马上快好了哈！我怕你坚持不住往下看了！（什么？你能坚持往下看一下去，那好吧，你赢了！我继续往下码字，都快凌晨了，写完了就睡觉觉了。）

这里写图片描述

按照如下所示

<snippet>
    <content><![CDATA[

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${1:Document}</title>
</head>
<script src="${2:}"></script>
<body>
    ${3:}
</body>
</html>

]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>html5</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

6. 此时，我们定义好的代码段 ctrl+s 保存一下

这里写图片描述

7. 然后给这个代码片段起名字，然后点击保存

这里写图片描述

8. 新建一个html文件

这里写图片描述

9. 然后选中html5，大功告成！！（洗洗睡了，(¦3[▓▓] 晚安！）

这里写图片描述

作者：蔡国庆（筱竹）