我们在编写代码的时候，总会遇到一些需要反复使用的代码片段。这时候就需要反复的复制和黏贴，大大影响效率。我们利用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. java基础知识拾遗(四)

    1.Runnable对象 启动线程:(new Thread(new MyRunnable()).start() 2.jsp中<%@ page language="java" ...

  2. C#中的StringBuilder

    1. 使用StringBuilder的好处 由于string对象是不可更改的,我们每次使用string类的方法时,都会在内存中重新创建一个新的string对象,这时候就要为该对象分配内存空间了.如果在 ...

  3. 结构-行为-样式-Js排序算法之 直接插入排序

    最新因工作原因需要接触到算法,之前学习C++的时候有接触过算法,Javascript中实现算法其实也是大同小异.下面我讲下第一个实现的排序算法--直接插入排序.基本实现思路:假定一个数组中前n(n&g ...

  4. D3.js：力导向图

    var nodes = [ { name: "桂林" }, { name: "广州" }, { name: "厦门" }, { name: ...

  5. selenium2使用记录

    安装 pip install selenium web phantomjs下载 :http://phantomjs.org/download.html 浏览器驱动下载:http://www.selen ...

  6. 开学&东大一周游记

    明天就要离开生活但并没有学到多少东西的东大了,不舍,这是真的,因为真的是没学到多少就要走了.但是终归是有收获的,比如感受到了舍长这样的大牛的学习态度,东大的浴池真的很棒,我很感激吉大的伙食诸如此类.感 ...

  7. Linux scp命令

    语法 scp [-1246BCpqrv] [-c cipher] [-F ssh_config] [-i identity_file] [-l limit] [-o ssh_option] [-P p ...

  8. CentOS单独编译安装PHP gd库扩展

    注意:如果您已经编译安装过GD库,请重新编译安装php不带gd库成功后,执行以下操作 安装libpng wget http://jaist.dl.sourceforge.net/project/lib ...

  9. Android使用Eclipse遇到"java.lang.ClassNotFoundException"

    最近遇到个Android Jar的问题,找了几天才找到root cause. 在此记录下. 我们的Android项目需要使用一个供应商的Jar. 我们使用的开发环境为:Eclipse + ADT插件( ...

  10. vim - 自动补齐

    OmniComplete是基于ctags的,所以要先安装ctags 到http://www.vim.org/scripts/script.php?script_id=2358下载cpp_src.tar ...