Can's Blog

关注前端，记录，分享

导航

Sublime Text 2 技巧

前言

几个月前，写了一篇博文《Sublime Text 2 使用心得》，介绍了ST2的基本用法、扩展插件推荐、快捷键等，限于篇幅，一些功能，如snippet（代码片段）、zen coding深入介绍等内容没有涉及，加之ST2更新很快，现在已经出到2.0.1（2012-8-1）了，也新增了不少功能，本文将补上这方面内容。

2.0.1新功能

2.0版本细节做了很多改进、优化，感受比较明显的是以下几个：

  • 代码可拖拽：选中代码，鼠标拖拽到目标处释放即可
  • 增加在浏览器打开的功能：以前需要装插件实现的功能，现在ST2内置了，在html文件中，右键→Open in Browser即可在你默认浏览器打开该文件（文件必须先保存）
  • 双击Tab栏，可新建文件
  • 保存文件时可以保存代码的选中状态（类似ps的选区）
  • 双击代码中空白处，只会选中空白（比以前方便多了，以前连标签的'<'也会被选中）

Zen Coding（zen coding 貌似已停止更新，如果有发现zen coding 不能正常使用，请安装他的替代者 emmet 用法类似。）

Zen Coding在上篇文章有简单带过，是一件Web开发的神兵利器，有多个版本，对应不同的编辑器。

ST2上的Zen Coding，同样功能强大，不仅能够快速书写html/css代码，在代码编辑、查找功能方面也是独竖一帜。

基本用法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="Keywords" content="" />
        <meta name="Description" content="" />
        <link rel="stylesheet" href="css/.css" />
    </head>
    <body>
        table.demo>(thead>tr>th)+(tbody>tr>td)
    </body>
</html>

按tab展开代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="Keywords" content="" />
        <meta name="Description" content="" />
        <link rel="stylesheet" href="css/.css" />
    </head>
    <body>
        <table class="demo">
            <thead>
                <tr>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

代码编辑

Zen Coding自带丰富的代码操作快捷键，这两个快捷键我用的最多，ctrl+[ 和 ctrl+]（已改成我习惯的快捷键）。

两个功能差不多，只不过一个是从里到外，一个是从外到里。

image

有时我们经常要对一个div进行操作，而这个div里面包含有很多个子div，如果要选中这个div，必须查这个div最后在哪闭合，不仅浪费时间，还可能看错，用这个快捷键，不仅快，而且准，还能逐层往外或往内扩展收缩。

例如：要选中这个table，把光标放到<table>里，按下ctrl+]就行，自动选中代码，现在无论是删除还是移动都快捷方便多了。

imageimage

另一个常用快捷键，选中引号中内容。如果html中class名是用下划线命名的，双击就可选中，如果是中划线，双击只能选中单个单词，用鼠标按住选很不方便，可以试下ctrl+shift+.选中引号内容；ctrl+shift+u，删除包裹光标的标签；还有很多快捷操作，递增、递减数据，合并行，匹配标签名等，有兴趣的同学可以查看修改这个文件/ZenCoding/Default (Windows).sublime-keymap。这么多快捷键，如果忘记怎么办，不用怕，最新的Zen Coding增加了一个帮助面板，选择Preferences-ZenCoding-ZenCoding has command pallete，弹出的面板列出所有的Zen Coding快捷键。

image

定制自己的Zen Coding

上面介绍了Zen Coding的快捷键和修改方法，下面我们再来看怎么改Zen Coding的html和css的快捷键。Zen Coding提供的css快捷键众多，但有些却不符合我们的使用习惯，例如float:left; 要输入 fl:l，太麻烦了，我们一般使用fl更简便；还有一些例如margin、padding，我们希望输出的时候带有单位（px），这首就要修改Zen Coding的zen_settings.py文件了，该文件位于Data\Packages\ZenCoding\zencoding中，是python文件，打开该文件，修改保存，重启ST2后生效，赶紧来定制你自己的Zen Coding吧。

image

 

自定义新建文件SublimeTmpl

之前有不少同学跟我说，ST2各方面都很好，但就是有个地方很不爽，不能自定义新建文件，默认总是plain text格式，每次都要手动切换一下。目前，官方还没有提供这样的功能o(╯□╰)o，但是国人开发了一个插件，能够弥补这个缺陷。在包安装里面搜索：SublimeTmpl，安装。默认已经添加了html、css、js等常见类型的面板，按ctrl+alt+h/ctrl+alt+c/ctrl+alt+j可新建这3钟类型的文件，快捷键在这里Default (Windows).sublime-keymap，模板文件在这里Data\Packages\SublimeTmpl\templates，可修改。

image

 

代码片段（snippet）

Zen Coding快捷输入很方便，但是当要输入一大段代码，有时就不方便了，比如上面那个table，要输入 table.demo>(thead>tr>th)+(tbody>tr>td) 这么多个单词，如果预定义好table这个代码段，输入快捷键生成就方便多了，这就是代码片段了，我们可以定义一些常见的代码段，如tab、导航条、页面基本结构等。下面是几个例子：

content：放代码必须放在CDATA里，$1代表光标位置，方便编辑类名

tabTrigger：快捷键

scope: 响应范围 可以是 html css js文件等

description：代码描述 在输入快捷键的时候 提示框内的介绍描述文字

imageimage

图2是一个页面的最基本结构，在一个html页面中输入dtd，按tab即可生成，并且光标停在title处，让你输入title，类似可以写成各种各样的snippets。snippets放在哪里都可以，建议建个文件夹专门存放snippets，方便维护管理。

包安装上也提供了一些css、js的snippet下载。

总结

Sublime Text 2 功能强大，插件丰富，但要用熟它，需花时间去了解、去熟悉各种设置、各种快捷键。下篇文章将介绍《使用 Sublime text 2 Bootstrap F5 快速开发Web页面》

posted on 2012-08-02 09:46  leecan_zeng  阅读(5154)  评论(3)  编辑  收藏  举报