BlogJava-我是FE，也是Fe-随笔分类-sublime texthttp://www.blogjava.net/Hafeyang/category/52363.html前端来源于不断的点滴积累。我一直在努力。zh-cnThu, 31 Oct 2013 05:01:16 GMTThu, 31 Oct 2013 05:01:16 GMT60sublime text 2 (四) Emmet(之前叫Zencoding)的安装以及新特征http://www.blogjava.net/Hafeyang/archive/2013/01/19/emmet_fomer_zencoding_in_sublime_text_2.html衡锋衡锋Sat, 19 Jan 2013 13:06:00 GMThttp://www.blogjava.net/Hafeyang/archive/2013/01/19/emmet_fomer_zencoding_in_sublime_text_2.htmlhttp://www.blogjava.net/Hafeyang/comments/394449.htmlhttp://www.blogjava.net/Hafeyang/archive/2013/01/19/emmet_fomer_zencoding_in_sublime_text_2.html#Feedback10http://www.blogjava.net/Hafeyang/comments/commentRss/394449.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/394449.html阅读全文

衡锋 2013-01-19 21:06 发表评论
]]>sublime text 2 (三) 在sublime text 2 中写coffeescripthttp://www.blogjava.net/Hafeyang/archive/2012/10/25/using_sublime_text_2_coffeescript_plugin_in_windows.html衡锋衡锋Thu, 25 Oct 2012 15:56:00 GMThttp://www.blogjava.net/Hafeyang/archive/2012/10/25/using_sublime_text_2_coffeescript_plugin_in_windows.htmlhttp://www.blogjava.net/Hafeyang/comments/390243.htmlhttp://www.blogjava.net/Hafeyang/archive/2012/10/25/using_sublime_text_2_coffeescript_plugin_in_windows.html#Feedback3http://www.blogjava.net/Hafeyang/comments/commentRss/390243.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/390243.html阅读全文

衡锋 2012-10-25 23:56 发表评论
]]>sublime text 2学习(二):创建可复用的代码片段http://www.blogjava.net/Hafeyang/archive/2012/08/17/how_to_create_code_snippet_in_subline_text_2.html衡锋衡锋Fri, 17 Aug 2012 05:30:00 GMThttp://www.blogjava.net/Hafeyang/archive/2012/08/17/how_to_create_code_snippet_in_subline_text_2.htmlhttp://www.blogjava.net/Hafeyang/comments/385686.htmlhttp://www.blogjava.net/Hafeyang/archive/2012/08/17/how_to_create_code_snippet_in_subline_text_2.html#Feedback3http://www.blogjava.net/Hafeyang/comments/commentRss/385686.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/385686.html对于前端工程师来讲，写一个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。









衡锋 2012-08-17 13:30 发表评论
]]>sublime text 2 学习(一)：快捷键，小技巧for前端工程师（持续更新）http://www.blogjava.net/Hafeyang/archive/2012/08/09/sublime_text_2_short_key_and_trick_for_frontend_engineer.html衡锋衡锋Thu, 09 Aug 2012 05:22:00 GMThttp://www.blogjava.net/Hafeyang/archive/2012/08/09/sublime_text_2_short_key_and_trick_for_frontend_engineer.htmlhttp://www.blogjava.net/Hafeyang/comments/384754.htmlhttp://www.blogjava.net/Hafeyang/archive/2012/08/09/sublime_text_2_short_key_and_trick_for_frontend_engineer.html#Feedback5http://www.blogjava.net/Hafeyang/comments/commentRss/384754.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/384754.html
Ctrl+W 关闭当前页签，很通用。
Ctrl+Shift+W关闭所有页签，估计能猜到。

Ctrl+Shift+v 粘贴并且格式化，比较实用。

Ctrl+[ 减少缩进
Ctrl+] 增加缩进

Ctrl+k,Ctrl+u 先按Ctrl+K,再按Ctrl+U，大写，这有点不习惯
Ctrl+k,Ctrl+l 小写

ctrl+left,ctrl+right 先左/右移动一个单词，VI中的W,B

Ctrl+Shift+up ,当前上上移一行，跟Eclipse一样
Ctrl+Shift+down，不说了

Ctrl+Shift+K 删除当前选中行，后来发现Ctrl+X也可以，Eclipse里面的Ctrl+D。
Ctrl+Shift+D 复制当前选中行，程序员的挚爱
Ctrl+D 是高亮光标所在词，类似VIM中的#

Ctrl+M 到匹配的{[( 与vim 中的%一致
Ctrl+Shift+M 可以选中{[(内容，类似vim中的va( vi{

Ctrl+J join rows 合并选中行
Ctrl+Shift+J 打散行

Ctrl+Shift+T 旋转功能这个标签内容 vim中的vat
Ctrl+shift+a 选中匹配的标签

Ctrl+T 可以选中多行，然后讲这些行顺序反转。如果没有选中多行，会讲光标前后的字母换顺序。

双击选中一个单词,Ctrl+F3跳至下一个匹配处，F3上一个匹配处。

F11，我最喜欢的全屏快捷键。
Shift+F11更狠，只编辑当前的文件。免打扰模式。两耳清静。

alt+. 如果输入<div> 然后alt+. 可以自动完成这个tag，变成<div></div>

Ctrl+/ Ctrl+Shift+/ 注释/取消注释，各种语言都行。

一个小技巧：选中一个单词如abc ，然后输入" 这样 会变成"abc",同理还可以用( { [ '

Ctrl+shift+P 调出一个功能列表，可以探索一些好玩的功能，比如我找到了这个功能：HTML:Encoding Special Characters。选中 & 运行一下可以变成 &amp;

Ctrl+P 会调出一个对话框框，下拉选项中有当前打开的文件，可以切换，文本框非常强大，输入@funcName 可以直接到函数定义处，输入#key 可以直接查找，输入:行数可以直接到某行，也可以用快捷键Ctrl+g

安装了ZenCoding之后可以使用的快捷键： 安装教程

Ctrl+alt+Enter,zencoding开始了
alt+shift+W 环绕选中内容


官方文档中有快捷键列表：http://docs.sublimetext.info/en/latest/reference/keyboard_shortcuts_win.html







衡锋 2012-08-09 13:22 发表评论
]]>