您的位置:首页> 日志> 前端技术 正文
DTOP

Sublime Text 2使用心得

曹佳 | 2013年03月03日 |

>>收藏本文 已有 2条评论

         Sublime Text 从字面意思翻译来说,是高级记事本。它的打开速度比DW快得多,这是我喜欢它的简单原因之一。网上大致有中文版和英文版两个版本,建议用英文版。

 

下面介绍几个比较常用的功能。

 

首先是安装插件。以安装Zen coding插件为例:

Ctrl+shift+P,在命令框内,输入install package,再输入Emmet(Zen coding现在已改名为Emmet),找到对应选项就进入自动安装了。

 

 

 

补充一点,安装过的插件如果你再搜索的话,是搜不到的。

 

下面介绍工作时输出页面的一般基本步骤

首先新建空白文件,另存为html文件,输入:html:xt,按tab键后,就会出现以下代码:

 

 

 

然后在body标签里输入:div.wrap>div.header+div.content+div.footer,按tab键后,就会出现以下代码:

 

 

 

如果你想更方便,你可以把以上代码全部选中,然后新建New Snippet复制到里面,在里面设置对应的快捷键和使用文件类型的范围。

 

 

 

当你在tabTrigger里填入对应快捷键,如f时。重启软件,这时你只需要在空白html文件上打上一个f,再按Tab键,所有的内容就都出来了。

 

此时,如果你在代码片段里,例如,在<div class=”header”></div>之间打上:${1:内容},那么当你利用快捷键打出这段代码后,你的光标会自动停在<div class=”header”></div>中间,并且选中“内容”。当你再次按下tab键的时候,光标会跳到你设置的${2:内容}里,然后是345......这对我们修改PE系统标签参数时非常有用。

 

可以利用快捷键这个功能,把之前DW整理的代码片段拷贝过来,给代码片段设定快捷键,输出的速度应该会提高不少。以“头条图文信息列表页”为例,这样设置代码片段:

 

 

 

再回到在html文件中当你需要输出“头条图文信息列表页”列表页时,你只需要打出“头条图文”四个字:

 

 

 

再按一下Tab键:

 

 

 

代码就出来了,你还可以在代码片段里设置$(),这样代码出来后,继续按Tab键就可以依次设置参数值。

 

刚刚开吃整理系统代码,暂时只弄了一小部分。

 

Sublime Text2的快捷键,志弘前辈已经介绍过了,网上也有很多相关内容,这里就不再介绍了。Sublime Text3已经出来了,下过一个需要收费的版本,用不了,所以没能了解新功能。

 

Sublime Text2插件非常多,希望可以和大家一起学习,交流。