相信很多人喜欢sublime编辑工具有两个原因：第一sublime很轻巧方便；第二sublime提供很多自定义拓展功能，包括很简单且和很好用的代码片段功能snippet文件。

今天，在这里就介绍下sublime如何自定义各种代码片段，先来感受一下效果：

上面看到的是我用sublime初始化一个html文件的操作gif，相信这是很多人在新项目必经的步骤。而我里面不同的时，不需要任何复制，只需几秒钟就完成整个初始化的工作，这就是sublime的魅力之一：代码片段snippet。

下面我就拿上面的动画里面用到的两个初始化：html初始化和css reset初始化来介绍，如何建立自己的代码片段。

第一：html初始化代码片段：

首先打开sublime，在顶部工具条，找到preferences > browser packages 浏览程序包，找到Packages\User文件夹，我们一般自定义的东西都放在user这个文件夹，方便以后直接拷贝这个文件夹，可以到新的安装环境直接使用，不需要重新配置。

然后在这个user下面建立snippet文件，最好能够分类，建立对应的文件夹。比如html的代码片段新建一个html文件夹，css也如此类推。

需要用到snippet语言很简单，主要有4个参数，content、tabTrigger、description、scope

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<snippet>
    <content><![CDATA[
     
// 缩写展开后的代码
 
]]></content>  
 
    <tabTrigger>xxxxxx</tabTrigger>  // 快捷输入的缩写
     
    <description>xxxxxxx</description>  // 片段的描述
     
    <scope>xxxxxxx</scope>  // 仅对 html 文件有效
     
</snippet>

比如，需要新建一个html5格式的初始化html代码片段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<snippet>
<content><![CDATA[
 
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>标题</title>
<meta name="keywords" content="标题" />
<meta name="description" content="标题" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
</head>
<body>
 
</body>
</html>
 
]]></content>
<tabTrigger>html5</tabTrigger>
<description>html5文件</description>  // 片段的描述
<scope>text.html</scope>
</snippet>

content里面填你需要自动生成的代码，tabTrigger是代表这段代码并经过简化后的缩写名称，输入者个缩写，再按tab键就可以提示生成这段代码。description是紧跟在缩写名后面的提示，告诉你这段代码是代码什么，可以不要。scope是代表这个自动代码片段需要在什么文件类型下生效。细心的童鞋应该看到我上面的gif，第一步是调出控制面板，把新建文件设为html格式，否则上面的html5代码片段是无法生成的，因为它是被定义在text.html格式下生效。而css测试source.css。

第二：css初始化代码片段

操作流程和html是一样的，新建snippet文件，填上对应的代码就行了，然后scope要写成source.css才行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<snippet>
<content><![CDATA[
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
ul,li,div,p,body{margin:0;padding:0;text-align:left;}
input{-webkit-appearance:button;}
li{list-style:none;}
a{text-decoration:none;}
img{vertical-align:top;}
i,em{font-style:normal;}
.hide{display:none;}
body, html {background:#fcf8ed;text-align: left;height: 100%;width: 100%;font-family: "Microsoft YaHei","Helvetica Neue",Arial, HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif;font-size:62.5%;font-weight: normal;}
*{-webkit-tap-highlight-color:rgba(14,159,111,0.5);-webkit-touch-callout:none;}
#main{margin:0 auto;overflow:hidden;}
@media only screen and (min-width:1025px){
#main{max-width:320px}
}
]]></content>
<tabTrigger>re</tabTrigger>
<scope>source.css</scope>
</snippet>

看完上面，基本都学会自己自定义代码片段了，但是可能大家还有个疑问，那个score参数又时候是test，有些又是source，我们怎么知道到底是什么。这个我们在需要自定义代码片段时，打开Packages文件，下面可以看到各种类型格式的文件：HTML/CSS/PHP....，找到你想定义的格式，在里面找找是否有snippet文件，一般都会有的，你打开snippet文件看看给出的例子就知道score参数怎么写了。

比如php的，score是source.php。

sublime自定义snippet代码片段的更多相关文章

  1. VS code自定义用户代码片段snippet

    打开VS code,“文件-首选项-用户代码片段-选择新建全局代码片段文件 “ 属性介绍:prefix   就是你自定义的快捷键 body    就是你自定义的代码片段 description 就是这 ...

  2. VS Code项目中共享自定义的代码片段方案

    VS Code项目中共享自定义的代码片段方案 一.问题背景 项目中注释风格不统一,如何统一注释风格 一些第三方组件库名称太长,每次使用都需要找文档,然后复制粘贴 部分组件库有自己的Snippets插件 ...

  3. sublime text 2代码片段（Snippet）功能的使用

    “snippet”在英语里面是“片段”的意思.当我们编码时候,通常想要打几个简略的字符串,就出来一些固定的模板. 例如:使用snippet在新建文件时快速生成HTML头部信息等. 定义很简单,菜单:t ...

  4. sublime 自定义快捷代码

    选择打开tools ->developer->new snippet <snippet> <content><![CDATA[Hello, ${1:this} ...

  5. sublime text3 增加代码片段(snipper)

    有时候编写代码时有些代码片段经常会用到,如果能将这些代码片段整理,再在需要的时候通过某些条件触发,那无疑是非常方便的! 创建方法:工具->插件开发->新建代码片段 默认产生的内容是: &l ...

  6. VSCode添加用户代码片段,自定义用户代码片段

    在使用VScode开发中经常会有一些重复使用的代码块,复制粘贴也很麻烦,这时可以在VScode中添加用户代码片段,输入简写即可快捷输入. VScode中添加用户自定义代码片段很简单. 1.在VScod ...

  7. 2019-01-29 VS Code创建自定义Python代码片段

    续前文[日常]Beyond的歌里最多是"唏嘘"吗? - Python分词+词频最后的想法, 发现VS Code支持用户自定义代码片段: Creating your own snip ...

  8. Sublime Text 新建代码片段（图解）

    新建代码片段 1.打开NEW Snippet- 2.编辑代码片段 3.设置快捷键,按tab键执行 更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_4451949 ...

  9. 工作中常用的js、jquery自定义扩展函数代码片段

    仅记录一些我工作中常用的自定义js函数. 1.获取URL请求参数 //根据URL获取Id function GetQueryString(name) { var reg = new RegExp(&q ...

随机推荐

  1. table中嵌套table，如何用jquery来控制奇偶行颜色

    总是要趁着自己还有记忆的时候,把该记录下来的都记录下来,着实是不敢恭维自己的记性. 相信很多时候,我们前端人员,经常会用到table里面的某个td中还嵌套着table,而这个时候还总要去弄奇偶行的颜色 ...

  2. Oracle 课程八之性能优化之10046事件

    Oracle 的事件很多. 具体参考blog: Oracle 跟踪事件 set event 转摘:http://blog.csdn.net/tianlesoftware/archive/2009/12 ...

  3. msssql 用numberic(38)替代int去解决int不够的问题

    发现ms sql server的问题int(-2^31 ~ 2 ^ 31 -1)与程序中的UINT有时会对不上的时候, 发现如果用numberic(32)来做判断好像解决, 暂时就现在的插入操作来看, ...

  4. Minimax Triangulation

    题意: 按顺序给定一些点,把这些点分割为n - 2个三角形,花费为最大三角形面积,求最小花费 分析: 区间dp,dp[i][j]表示完成区间[i,j]最小花费,dp[i][j]=min(dp[i][j ...

  5. 《Python核心编程》 第六章 序列 - 课后习题

    课后习题 6–1.字符串.string 模块中是否有一种字符串方法或者函数可以帮我鉴定一下一个字符串是否是另一个大字符串的一部分? 答:成员关系操作符(in.not in) import string ...

  6. 软件测试技术（五）——Software Review

    本周的测试课上进行了一次同行评审的演练,大家讨论的很热烈,不过我也发现了一些不太理解的过程,如如何进行计划活动,走读.技术评审.正规检视是基于什么目的,并应该在何时进行.我做了一下详细的研究. 首先, ...

  7. [Web API] 如何让 Web API 统一回传格式以及例外处理[转]

    [Web API] 如何让 Web API 统一回传格式以及例外处理 前言 当我们在开发 Web API 时,一般的情况下每个 API 回传的数据型态或格式都不尽相同,如果你的项目从头到尾都是由你一个 ...

  8. [CODEVS1697]⑨要写信

    题目描述 Description 琪露诺(冰之妖精)有操控冷气的能力.能瞬间冻结小东西,比普通的妖精更危险.一直在释放冷气的她周围总是非常寒冷. 由于以下三点原因…… 琪露诺的符卡 冰符“Icicle ...

  9. DOM笔记（三）：Element接口和HTMLElement接口

    一.Element接口 Element接口表示一个元素,该接口扩展自Node接口,自然继承了Node接口的属性和方法,也有一套针对元素的属性和方法. Element接口常见的属性比较少,常用的就是一个 ...

  10. jquery阻止冒泡事件：$('span').bind("click",function(event){event.stopPropagation();})（有用源）

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. <body> <div id="content"> 外层div元素 <span> ...