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

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

为了提高你的编码效率,Sublime Text提供了一种让你可以轻松添加自定义代码片段的功能。这篇文章中,我们将看到在Sublime Text中如何创建、管理以及使用代码片段来极大的简化我们的工作流程。

创建代码片段

为了创建代码片段,我们需要打开 Tools > New Snipptes

New Snippets

Sublime Text会提供下面的模版供我们定制代码片段:

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

我们只需把代码添加到<content>中的<![CDATA[  ]]>元素内即可,如:

  
  
  1. <content><![CDATA[
  2. -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
  3. -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
  4. box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
  5. ]]></content>

然后在<tabTrigger>中设置让Sublime Text自动补全代码片段的触发词(trigger keyword)。触发词的名字最好方便记忆,并且与代码片段相关。这里我们设置触发词为shadow

  
  
  1. <tabTrigger>shadow</tabTrigger>

最后,我们定义代码片段的使用范围(scope)。由于这里我们添加的是CSS3的Box Shadow属性,我们可以想限制代码片段只在样式表中起作用。

  
  
  1. <scope>source.css</scope>
想指定多个 scope,可以使用英文逗号“,”来分隔。Window版Sublime Text查看文件的scope类型,使用  Ctrl+Shift+Alt+P 快捷键,scope类型会显示在编辑器左下角,多个scope类型的文件我们只需要取第一个即可。

完整代码如下:

  
  
  1. <snippet>
  2. <content><![CDATA[
  3. -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
  4. -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
  5. box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
  6. ]]></content>
  7. <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  8. <tabTrigger>shadow</tabTrigger>
  9. <!-- Optional: Set a scope to limit where the snippet will trigger -->
  10. <scope>source.css</scope>
  11. </snippet>

到这里我们已经完成了代码片段的设置,现在只需保存它。按 Ctrl+S 保存文件,Sublime Text默认会把文件保存到 /Packages/User 目录下,但是为了便于管理,我们创建一个新的文件夹来专门保存Snippets,因为可能还有一些Build文件、Plugin文件等也需要创建新的文件夹来保存。

Save Snippet

另外一点需要注意的是,文件名必须以  .sublime-snippet 为扩展名,否则Sublime Text将不能识别它是一个代码片段。

插入代码片段

在编辑器中输入触发词的时候,Sublime Text会显示选项。我们可以通过在选项中选择或者按 Tab 来触发关键词插入代码片段。

Insert Snippet

之后点击 Tab 键,自动插入代码片段如下:

Insert Snippet

由于前面我们指定了scope范围为CSS文件,所以这个代码片段只能在文件类型中是不会被触发的,像下面这样:

Scope

Tab键及域标记(Field Markers)

此外,有时我们还需要编辑代码片段中的一些特殊属性。以上面的CSS3 box-shadow为例,我们可能需要改变阴影的颜色、模糊度及偏移量。

Sublime Text提供了在插入代码片段后,高亮我们需要编辑的区域的功能。这些区域可以用 $ 符号后面跟随 { } 来指定,并且可以指定顺序,如下:

  
  
  1. -webkit-box-shadow: ${1:1px} ${2:1px} ${3:1px} ${4:0px} ${5:rgba(0, 0, 0, 0.5)};
  2. -moz-box-shadow: ${1:1px} ${2:1px} ${3:1px} ${4:0px} ${5:rgba(0, 0, 0, 0.5)};
  3. box-shadow: ${1:1px} ${2:1px} ${3:1px} ${4:0px} ${5:rgba(0, 0, 0, 0.5)};

上面的例子中,首先高亮显示的区域是${1:1px},之后按 TAB键的时候会按照指定的顺序依次高亮。在下面的截图中,请注意box-shadow属性的第一个值(包括带有前缀的)全部被高亮显示了。

Edit

Sublime Text的多点编辑功能让我们一次同时选择或高亮多行,使得编辑更加快捷。之后按 Tab键,高亮和编辑第二个数字区域${2:1px},之后继续。

edit

安装代码片段扩展包

你并不需要自己定义很多代码片段,因为已经有很多语言类型的代码片段扩展包供我们安装使用。

假设你已经安装了Package Control,你可以按 Ctrl+Shift+P ,然后进入Package Control来安装代码片段扩展包。

下面的例子中,我们发现SASS Snippets是可用的。

sass

你并不需要记住代码片段的整个触发词,因为在你输入的时候,Sublime Text会自动为了显示可用选项。

SASS

That’s All. 希望这个小技巧可以帮你提高编码效率。Happy Coding!

Further Resource

有关安装Package Control的方法,你可以参考下面的网页:

关于更多创建及自定义代码片段的说明,你可以参考:

相关链接:http://www.w3cmark.com/2014/292.html      http://www.cnblogs.com/yili16438/p/3734343.html   http://blog.csdn.net/pxzy/article/details/8490058

来源:Sublime Text自定制代码片段(Code Snippets) - Specs' Blog-就爱PHP

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
完整版:https://download.csdn.net/download/qq_27595745/89522468 【课程大纲】 1-1 什么是java 1-2 认识java语言 1-3 java平台的体系结构 1-4 java SE环境安装和配置 2-1 java程序简介 2-2 计算机中的程序 2-3 java程序 2-4 java类库组织结构和文档 2-5 java虚拟机简介 2-6 java的垃圾回收器 2-7 java上机练习 3-1 java语言基础入门 3-2 数据的分类 3-3 标识符、关键字和常量 3-4 运算符 3-5 表达式 3-6 顺序结构和选择结构 3-7 循环语句 3-8 跳转语句 3-9 MyEclipse工具介绍 3-10 java基础知识章节练习 4-1 一维数组 4-2 数组应用 4-3 多维数组 4-4 排序算法 4-5 增强for循环 4-6 数组和排序算法章节练习 5-0 抽象和封装 5-1 面向过程的设计思想 5-2 面向对象的设计思想 5-3 抽象 5-4 封装 5-5 属性 5-6 方法的定义 5-7 this关键字 5-8 javaBean 5-9 包 package 5-10 抽象和封装章节练习 6-0 继承和多态 6-1 继承 6-2 object类 6-3 多态 6-4 访问修饰符 6-5 static修饰符 6-6 final修饰符 6-7 abstract修饰符 6-8 接口 6-9 继承和多态 章节练习 7-1 面向对象的分析与设计简介 7-2 对象模型建立 7-3 类之间的关系 7-4 软件的可维护与复用设计原则 7-5 面向对象的设计与分析 章节练习 8-1 内部类与包装器 8-2 对象包装器 8-3 装箱和拆箱 8-4 练习题 9-1 常用类介绍 9-2 StringBuffer和String Builder类 9-3 Rintime类的使用 9-4 日期类简介 9-5 java程序国际化的实现 9-6 Random类和Math类 9-7 枚举 9-8 练习题 10-1 java异常处理 10-2 认识异常 10-3 使用try和catch捕获异常 10-4 使用throw和throws引发异常 10-5 finally关键字 10-6 getMessage和printStackTrace方法 10-7 异常分类 10-8 自定义异常类 10-9 练习题 11-1 Java集合框架和泛型机制 11-2 Collection接口 11-3 Set接口实现类 11-4 List接口实现类 11-5 Map接口 11-6 Collections类 11-7 泛型概述 11-8 练习题 12-1 多线程 12-2 线程的生命周期 12-3 线程的调度和优先级 12-4 线程的同步 12-5 集合类的同步问题 12-6 用Timer类调度任务 12-7 练习题 13-1 Java IO 13-2 Java IO原理 13-3 流类的结构 13-4 文件流 13-5 缓冲流 13-6 转换流 13-7 数据流 13-8 打印流 13-9 对象流 13-10 随机存取文件流 13-11 zip文件流 13-12 练习题 14-1 图形用户界面设计 14-2 事件处理机制 14-3 AWT常用组件 14-4 swing简介 14-5 可视化开发swing组件 14-6 声音的播放和处理 14-7 2D图形的绘制 14-8 练习题 15-1 反射 15-2 使用Java反射机制 15-3 反射与动态代理 15-4 练习题 16-1 Java标注 16-2 JDK内置的基本标注类型 16-3 自定义标注类型 16-4 对标注进行标注 16-5 利用反射获取标注信息 16-6 练习题 17-1 顶目实战1-单机版五子棋游戏 17-2 总体设计 17-3 代码实现 17-4 程序的运行与发布 17-5 手动生成可执行JAR文件 17-6 练习题 18-1 Java数据库编程 18-2 JDBC类和接口 18-3 JDBC操作SQL 18-4 JDBC基本示例 18-5 JDBC应用示例 18-6 练习题 19-1 。。。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值