我们在编写代码的时候，总会遇到一些需要反复使用的代码片段。这时候就需要反复的复制和黏贴，大大影响效率。我们利用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. 怎么在Windows下安装Linux虚拟机

    前提:①电脑有安装好VMware Workstation Pro虚拟机,没有的话点此下载并安装.②下载好CentOS-7-x86_64-DVD-1503-01镜像文件,没有点此下载密码:lomg. 1 ...

  2. Dubbo源码学习--服务是如何发布的

    相关文章: Dubbo源码学习--服务是如何发布的 Dubbo源码学习--服务是如何引用的 ServiceBean ServiceBean 实现ApplicationListener接口监听Conte ...

  3. [ios2]tableView去除空行的singleLine

    http://www.winddisk.com/2013/03/29/tableview%E5%8E%BB%E9%99%A4%E7%A9%BA%E8%A1%8C%E7%9A%84singleline/ ...

  4. 人机ai五子棋 ——五子棋AI算法之Java实现

    人机ai五子棋 下载:chess.jar (可直接运行) 源码:https://github.com/xcr1234/chess 其实机器博弈最重要的就是打分,分数也就是权重,把棋子下到分数大的地方, ...

  5. YUI Compressor压缩失效的场景-eval和with

    一.官方文档的说明 in the face of evil features such as eval or with, the YUI Compressor takes a defensive ap ...

  6. Android之WebView网页滚动截图

    WebView 网页滚动截屏,可对整个网页进行截屏而不是仅当前屏幕哦! 注意若Web页面存在position:fixed; 的话得在调用前设置为 position:absolute; 哦,否则会出现很 ...

  7. Perf 简介

    Perf 是用来进行软件性能分析的工具. 通过它,应用程序可以利用 PMU,tracepoint 和内核中的特殊计数器来进行性能统计.它不但可以分析指定应用程序的性能问题 (per thread),也 ...

  8. 普通 Java 项目转换为 Maven 项目

    普通 Java 项目转换为 Maven 项目 本文为原创文章,转载请注明出处.源码已分享至GitHub. 本文提供一个完整可行的将遗留项目转换为Maven项目的步骤.至于转换Maven构建项目的好处不 ...

  9. Date类型常用概念及方法总结（1）

      Date类型使用UTC(国际协调时间)1970年1月1日零时开始经过的毫秒数来保存时间. (1)创建当前日期           调用Date不传递参数的情况下,创建的新对象自动获得当前日期和时间 ...

  10. Dockerfile文件格式的简单介绍

    # This dockerfile uses the ubuntu image # VERSION 2 - EDITION 1 # Author: docker_user # Command form ...