sublime text 2学习(二):创建可复用的代码片段
对于前端工程师来讲,写一个html页面的基本结构是体力活,每次去拷贝一个也麻烦,sublime text 2 提供了一个很好的复用代码片段。下面介绍一下创建一个html5的代码片段的过程。
在菜单上点击Tools -> New Snippet,会新建一个xml文件页签:
<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> -->
</snippet>
注释已经说的比较详细了。
content 里面就是代码模版:${序号:默认值} ,序号相同的地方光标会同时停在那可以多处同时编辑。序号大小就是tabindex。在实际使用代码的时候,可以使用tab切换光标位置。
tabTrigger是指输入该字符串后tab就是在光标插入content中的内容。
scope是指在何种文件类型中使用。
下面是html5代码片段的定义:
<snippet>
<content><![CDATA[
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>${1}</title>
</head>
<body>
<h1>${1}</h1>
Hello, ${2:this} is a ${3:snippet}.
</body>
</html>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>html5</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
编辑完之后保存为 C:\Users\[用户]\AppData\Roaming\Sublime Text 2\Packages\User\html5.sublime-snippet (Win7下) 默认的保存路径就行。后缀必须是.sublime-snippet。
保存完重启Sublime text 2,新建文件:输入html5,tab会出现如下效果:

${1}出现了两次,所以光标同时编辑图中两处。
${2:this},所以在2处出现this默认值。${1}处编辑完按tab就到${2}处。
OK, That's all。
http://www.blogjava.net/Hafeyang/archive/2012/08/17/how_to_create_code_snippet_in_subline_text_2.html
sublime text 2学习(二):创建可复用的代码片段的更多相关文章
- Sublime Text 2创建可复用的代码片段
对于前端工程师来讲,写一个html页面的基本结构是体力活,每次去拷贝一个也麻烦,sublime text 2 提供了一个很好的复用代码片段.下面介绍一下创建一个html5的代码片段的过程.在菜单上点击 ...
- subllime text 创建可复用的代码片段
对于前端工程师来讲,写一个html页面的基本结构是体力活,每次去拷贝一个也麻烦,sublime text 2 提供了一个很好的复用代码片段.下面介绍一下创建一个html5的代码片段的过程. 在菜单上点 ...
- Sublime text 入门学习资源篇及其基本使用方法
Sublime text 学习资源篇 史上最性感的编辑器-sublimetext,插件, 学习资源 官网 http://www.sublimetext.com/ 插件 https://packagec ...
- Sublime Text:学习资源篇
官网 http://www.sublimetext.com/ 插件 https://packagecontrol.io 教程 Sublime Text 全程指南 Sublime Text 2 入门及技 ...
- Sublime text追踪函数插件:ctags 和php代码格式化
转自:http://blog.csdn.net/zm2714/article/details/8076077 这两天一直纠结两款编辑器——eclipse和sublime Text. eclipse的p ...
- Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧
<!DOCTYPE html> Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧--summer-rain博客园 xiayuhao 东风夜放花千树. 博 ...
- sublime text 2 学习(一):快捷键
初用sublime text 2,还不错,不装任何插件,能很好的编辑javascript,css,html,很赞.整理一下快捷键:常用的比如Ctrl+S就不列了:而且只列举Windows的. Ctrl ...
- sublime text 的小细节设置,让你的代码更优美
这些属性都可以在 首选项>设置-默认 里修改下面也会介绍几个比较常用的几个插件 字体大小: "font_size": 17 高亮编辑中的一行 "highlight_ ...
- Sublime Text 3下载安装以及安装HTML-CSS-JS Prettify代码格式化插件
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 Sublime Text的安装以及安装插件步骤. 下载Sublime Text 官网地址:http://www.sublimetex ...
随机推荐
- Django笔记 —— 基础部分总结
最近在学习Django,打算玩玩网页后台方面的东西,因为一直很好奇但却没怎么接触过.Django对我来说是一个全新的内容,思路想来也是全新的,或许并不能写得很明白,所以大家就凑合着看吧- 本篇笔记(其 ...
- 获取.jar文件运行时所处的路径
在Windows控制台中运行.jar文件时的两种环境: (1)控制台当前所在目录是.jar文件所在的目录 (2)控制台当前所在目录不是.jar文件所在的目录 我的期望: 我希望在上述两种环境下均可以得 ...
- 【个人训练】(UVa11129)An antiarithmetic permutation
题意与解析 一条非常有趣的二分题.一开始没有懂解法,去网上看了半天全是做法没有这样做为什么是对的(或者说的很含糊).一做完回顾一下立刻有点开朗的感觉. 题意很简单,维护一个0-n-1的数列,使其选出长 ...
- ADB常用指令
adb 命令是adb程序自带的一些命令:adb shell则是调用Android系统的命令,Android系统特有的命令都放在Android设备的/system/bin目录中 MonkeyRunner ...
- 【app.json】配置说明,不断更新中
app.json文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 注意: 1) json配置中键名.键值必须使用双引号,不能使用单引号. 2) 以 ...
- CentOS 6.5 下安装redis
1.登录虚拟机后,直接输入命令:yum -y install redis 会出现一个错误: 是因为少了epel源, 2.运行:yum -y install epel-release 最后出现 Comp ...
- struts2中的action为什么要继承ActionSupport类,不继承也可以,有什么好处?
简单来说,有很多相关的方法都加载进来,你直接调用就行了,而且在安全上和稳定性上做了很好的处理 实际上继承ActionSupport之后 就等同于实现了很多接口 Action,Validateable, ...
- css制作环形文本
css制作环形文本 在项目开发中,我们可能会遇到环形文本的需求,这个时候,怎样在代码以通俗易懂的前提下实现我们需要的效果呢?可能你会想到用一个一个的span元素计算出旋转的角度然后拼接起来,这个方案不 ...
- UVA 437 The Tower of Babylon(DAG上的动态规划)
题目大意是根据所给的有无限多个的n种立方体,求其所堆砌成的塔最大高度. 方法1,建图求解,可以把问题转化成求DAG上的最长路问题 #include <cstdio> #include &l ...
- 文本太长,用省略号显示的css样式
——html代码 <divid="d1" title="鼠标放上显示的文字"></div> ——css代码 #d1{ width:300 ...