我们在编写代码的时候，总会遇到一些需要反复使用的代码片段。这时候就需要反复的复制和黏贴，大大影响效率。我们利用Sublime Text的snippet（代码片段）功能，就能很好的解决这一问题。通俗的讲，就是把我们常用的代码分别保存起啦，然后通过插件的形式来反复调用。

创建方法：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> -->

    <!-- <description>description</description> -->

</snippet>

其中，content中由CDATA包裹起来的部分是我们要插入的代码片段，可选。

tabTrigger是我们tab键触发的自动补全代码功能的一个名字，可选。

scope，可选，使用范围，不填写代表对所有文件有效。附：source.css和test.html分别对应不同文件。

description，可选，在snippet菜单中的显示说明（支持中文）。如果不定义，菜单则显示当前文件的文件名。

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

现在，你应该有了个大致的了解。那我们就开始自己动手编写一个实例。我们都知道，再Sublime中，输入！或者html:5再按tab键，可以自动补全HTML结构，但是这个结果相对很简单，我自己扩展了它的结果内容，新增了几个mate标签，增加了页面描述。

<snippet>

    <content><![CDATA[

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <meta name="Generator" content="Sublime Text3">

    <meta name="Author" content="dunizb">

    <meta name="website" content="http://www.mybry.com">

    <meta name="Description" content="读你，这世间唯有梦想和好姑娘不可辜负~~">

    <link type="image/x-icon" rel="shortcut icon" href="image/favicon.ico" />

    <script type="text/javascript">

        ${1:}

    </script>

<body>

    ${2:这是html内容}

</body>

</html>

]]></content>

    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->

    <tabTrigger>hjs</tabTrigger>

    <!-- Optional: Set a scope to limit where the snippet will trigger -->

    <!-- <scope>source.python</scope> -->

    <description>custom-html</description>

</snippet>

然后保存代码片段，保存到Sublime Text3\Data\Packages\User下面，取个名字

Paste_Image.png

就这样，在HTML页面中输入hjs+tab，就可以自动补全这一系列代码了

文／dunizb（简书作者）
原文链接：http://www.jianshu.com/p/c828dea65e07
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。
文章首发于《读你》博客http://www.mybry.com，转载请注明出处

如何在Sublime Text中添加代码片段的更多相关文章

  1. sublime text 3 添加代码片段

    工具>插件开发>新建代码片段 <snippet> <content> <![CDATA[ Hello, ${1:this} is a ${2:snippet} ...

  2. 如何在Sublime text中运行PHP文件

    如何在Sublime text中运行PHP文件 2014-06-14 17:17 3709人阅读 评论(1) 收藏 举报 phpSublime Text 一.将PHP安装目录放如环境变量PATH 二. ...

  3. 如何在VScode中添加代码片段

    拿 VUE 举例,新建 VUE 文件,输入前缀,出现代码段 文件 --->  首选项 ---> 用户代码片段  在输入框中输入 vue ,找到 vue.json ,然后在 vue.json ...

  4. Sublime Text自定制代码片段(Code Snippets)

    在编写代码的整个过程中,开发人员经常会一次又一次的改写或者重用相同的代码段,消除这种重复过程的方法之一是把我们经常用到的代码保存成代码片段(snippets),这使得我们可以方便的检索和使用它们. 为 ...

  5. 在sublime text中添加JavaScript的build-system

    -step 1: 下载安装node.js, 并添加到path变量中. -step 2: 在sublime text中新建一个build-system. tools --> build-syste ...

  6. Sublime Text Snippets（代码片段）功能

    原文链接:http://www.bluesdream.com/blog/sublime-text-snippets-function.html 我们在编写代码的时候,总会遇到一些需要反复使用的代码片段 ...

  7. sublime text 2自定义代码片段

    本文引用   http://www.blogjava.net/Hafeyang/archive/2012/08/17/how_to_create_code_snippet_in_subline_tex ...

  8. 如何在 sublime text 中以当前文件目录打开 cmd

    需求描述 sublime 固定可以自己设置和添加新的编译环境,比如在我们写 js 的时候可能会添加 node 来对 js 文件进行运行.但是,这样做的结果是,我们只能看到运行结果.有时候还希望能做些其 ...

  9. Sublime Text 中使用Git插件连接GitHub

    sublime Text的另一个强大之处在于它提供了非常丰富的插件,可以帮助程序员来适合大多数语言的开发.这些插件通过它自己的Package Controll(包管理)组件来安装,非常方便.一般常用的 ...

随机推荐

  1. eclipse 中导入 maven项目 启动报错

    导入Maven项目到Eclipse中时,出现问题如下: java.lang.ClassNotFoundException: org.springframework.web.context.Contex ...

  2. Linux系统下给非root用户添加sudo权限

    Linux系统下给非root用户添加sudo权限 有时,在linux系统中非root用户运行sudo命令,会提示类似信息:  xxx is not in the sudoers file. This ...

  3. HDU1496 hash

    Equations Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  4. 关于preg_match()函数的一点小说明

    int preg_match ( string $pattern , string $subject [, array &$matches [, int $flags = 0 [, int $ ...

  5. JMeter处理Cookie与Session

    1.Cookie 添加方式:线程组-配置元件-HTTP Cookie 管理器,如下图: 2.Session 添加方式:线程组-前置处理器 -HTTP URL 重写修饰符,如下图: 有些tomcat的s ...

  6. nordic DFU固件升级

    一:测试固件芯片类型: nordic 52832 二:下载升级源码 1>nRF Toolbox App 源码  https://github.com/NordicSemiconductor/IO ...

  7. windows下后台运行程序

    方法一:使用vbs启动,新建一个vbs脚本,内容如下: set ws=WScript.CreateObject("WScript.Shell") ws.Run 方法二:将程序注册成 ...

  8. 遇到个奇怪的问题，同时开启本地和远程两个事务，远程事务是sql2000没问题，是sql2008的不报错，但是写不上数据

    遇到个奇怪的问题,同时开启本地和远程两个事务,远程事务是sql2000没问题,是sql2008的不报错,但是写不上数据. 倒腾了4.5天,找到最终的解决办法:直接调用AdoConnection.exe ...

  9. 常用的HTTP方法

    方法                 描述 是否包含主体 GET  从服务器获得一份文档 否 HEAD  只从服务器获得响应报文的首部 否 POST  向服务器发送需要处理的数据 是 PUT  将请求 ...

  10. 修改html 属性，css样式。

    一 通过修改标签属性来改变它的样式  js设置和获取标签的属性 <script type="text/javascript"> window.onload = func ...