Sublime Text2使用教程

编程知识 更新时间:2023-04-26 09:21:14

代码编辑器或者文本编辑器,对于程序员来说,就像剑与战士一样,谁都想拥有一把可以随心驾驭且锋利无比的宝剑,而每一位程序员,同样会去追求最适合自己的强大、灵活的编辑器,相信你和我一样,都不会例外。

我用过的编辑器不少,真不少~ 但却没有哪款让我特别心仪的,直到我遇到了 Sublime Text 2 !如果说“神器”是我能给予一款软件最高的评价,那么我很乐意为它封上这么一个称号。它小巧绿色且速度非常快,跨平台支持Win/Mac/Linux,支持32与64位,支持各种流行编程语言的语法高亮、代码补全等,但它有着很多其他编辑器没有的超酷的特性,让它的好用达到了前所未有的程度……

关于 Sublime Text 2:

曾经有人说过,世界上有两种编辑器,好用和不好用的;而在好用的编辑器中,又分两种,免费的和死贵死贵的。譬如说 VIM 和 TextMate,就是免费和死贵的典型。很不幸,今天的主角 Sublime Text 2 也是个死贵死贵的代表,它是一款收费的商业软件,个人授权费高达 59 美刀。


不过大家不用慌,虽然它很贵,但作者很厚道地给用户们提供了免费无限制无限期的试用权,它只会偶尔提醒一下你木有购买,而且频率也很低,仅此而已,一直免费使用下去几乎是没有任何影响的。另外值得一提的是,用户购买一个授权即可同时在不同平台上使用,对于像我这种经常需要在 Mac 和 Win 之间切换使用的用户来说的确能省下一笔钱了。

因为 Sublime Text 2 编辑器的特性和使用技巧实在太过多,本人也未算用得精通,所以无法一一列举展现,只能选几个我认为比较有特色的特点进行介绍,而且这里也没有篇幅去介绍各种编辑技巧、快捷键使用之类的了。如果你愿意花时间折腾一下,你会发现它的能力是远超本文介绍的那么几点的,所以本文只能算是抛砖引玉吧,希望大家有好的技巧可以分享出来。

语法高亮、代码提示补全、代码折叠、自定义皮肤/配色方案、多便签页:

SublimeText2 支持但不限于 C, C++, C#, CSS, D, Erlang, HTML, Groovy, Haskell, HTML, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, Matlab, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL, Textile and XML 等主流编程语言的语法高亮。ST2 拥有优秀的代码自动完成功能 (自动补齐括号,大括号等配对符号;自动补全已经出现的单词;自动补全函数名),非常智能;另外 ST2 也拥有代码片段(Snippet)的功能,可以将常用的代码片段保存起来,在需要时随时调用。当然,语法高亮、代码折叠、行号显示、自定义皮肤、配色方案等这些已经是一款现代编辑器应有的标配功能了,所以这里就不多做介绍了。


实用方便的代码提示补全功能

代码地图、多种界面布局与全屏免打扰模式:

Sublime Text 2 在界面上比较有特色的是支持多种布局和代码地图,也提供了 F11 和 Shift+F11 进入全屏免打扰模式,文字难描述,看下图吧。


完全开放的用户自定义配置与神奇实用的编辑状态恢复功能:

Sublime Text 2 的各种配置均由配置文件控制,完完全全的可以由用户自定义,如果你愿意折腾,甚至可以将它改得于原版完全不一样的操作体验。看下面的图,Setting - Default 菜单会打开默认的软件配置文件(这个文件会记录一些诸如使用什么字体等很多很多配置信息),Key Bindings - Default 是默认的快捷键配置文件,大家可以打开它们看看原本的一些设置是怎样配置的,但非常不建议直接在这里修改!你可以在 - User 结尾的文件(也就是用户自定义配置的意思)里面照样画葫芦那样来改,如果两边有相同的项目,它会以 - User 文件里面定义的为准。


这个例子里我在 Key Bindings - User 里面的第一行:{ "keys": ["alt+up"], "command": "swap_line_up" }, 意思就是按 Alt+方向键上时将当前选择的那一行向上移(与上一行交换位置),如果语法神马的没问题,保存好这个文件之后马上就可以使用这个快捷键了。

Sublime Text 2 的快捷键还支持双重组合,譬如默认情况下,将选中的文字改成大写的热键是“Ctrl+K, Ctrl+U”,意思是当你先按下 Ctrl+K 之后迅速再按 Ctrl+U 进行触发(只按下Ctrl+K是没有作用的),这样可以避免很多热键冲突,也可以更灵活更多选择地进行热键自定义。不过在这里就不打算教大家怎样修改各种配置或修改热键了,这恐怕能出一个手册的,这里有一个套比较完整的官方文档(鸟语),有兴趣的朋友可以去参考一下。

另外,SublimeText  还有一个值得一提的细节——”编辑状态恢复”,就是当你修改了一个文件,但没有保存,这时退出软件,ST2是不会很烦人地提示你要不要保存的,因为无论是用户自发退出还是意外崩溃退出,下次启动软件后,你之前的编辑状态都会被完整恢复,就像你退出前一样。这个细节我认为非常非常的赞!因为我经常会尝试性地去修改一些地方,但在确保没有问题之前又不想保存,这时如果有些事情打断自己,需要离开时,这个特性就很有用了,直接退出就行,不用烦,下次回来打开软件继续编辑即可。当然,有了这个恢复特性再也不怕系统崩溃、断电了吧,真心让人觉得ST2特别特别的安全可靠,妥妥的啊!

强大的多行选择和多行编辑:

在写代码的过程中,我们经常需要同时编辑多行代码或者多个变量。在 Sublime Text 2 中拥有非常实用的多行操作技巧,灵活运用可以大大提高编辑速度哟!相信日后你可能会这样问自己:“当年没有这种方式的编辑器时我究竟是怎么活过来的?!”

下面是一些我所了解的多行编辑方法:
鼠标选中多行,按下 Ctrl+Shift+L (Command+Shift+L) 即可同时编辑这些行;
鼠标选中文本,反复按 CTRL+D (Command+D) 即可继续向下同时选中下一个相同的文本进行同时编辑;
鼠标选中文本,按下 Alt+F3 (Win) 或 Ctrl+Command+G(Mac) 即可一次性选择全部的相同文本进行同时编辑;
Shift+鼠标右键 (Win) 或 Option+鼠标左键 (Mac) 或使用鼠标中键可以用鼠标进行竖向多行选择;
Ctrl+鼠标左键(Win) 或 Command+鼠标左键(Mac) 可以手动选择同时要编辑的多处文本
类似的技巧还有很多,求大家补充……

Shift+鼠标右键轻松实现多行编辑,批量给变量加前缀了

雷电般快速的文件切换:

如果你同时打开了多个文件,或者你的项目里经常需要编辑不同的文件,在文件数量较多的时候,在过去往往需要花费很多的精力去寻找,很是烦人。而现在,Sublime Text 2 里只需按下 Ctrl+P(Win) 或 Shift+Command+P(Mac) 即可调出文件切换面板,接着你只需输入文件名,回车后即可瞬间切换过去!并且它支持模糊匹配,只需输入你记得的一部分即可,譬如我想要找一个“www.iplaysoft.php”的文件来编辑,那么你只需要输入“ipl”或者是”ips.c”这样的字符都能匹配出来,这个特性非常非常的棒!


图中 ca 匹配了 capabilities.php 和 classese.php,选择就能快速切换

类似的功能,我只在类似 Eclipse 等大型(笨重)的IDE中才见到过,然而小巧快速的编辑器中,我还是首次遇到。使用这个功能,你除了可以在已打开的文件中切换之外,如果你使用项目管理(将一个文件夹设置成一个项目),它还能懂得去搜索匹配项目文件夹下未被打开过的文件。现在你还需要用鼠标去一个一个点标签页来切换吗?你还要打开“我的电脑”慢慢在各个不同文件夹去找需要编辑的文件吗?使用ST2,你只需输入几个字符即可~只有一句话:前所未有的方便!

随心所欲的跳转:快速罗列与定位函数/HTML的元素、跳转到指定行

使用上面介绍的快速文件切换功能,可以很轻易地打开/切换到自己想要编辑的文档了,但如果这个文件的代码很长很长,想要轻松跳到要编辑的地方又有什么好方法呢? Sublime Text 2 早就帮你想好了,同样是按下前面所说的 Ctrl+P(Win) 或 Shift+Command+P(Mac),这次试试先输入一个 @ 号看看?嗯,好样的!这列表马上帮你罗列出这文件里全部的 Function 了!同样使用模糊匹配,快速输入几个关键字,马上就能定位到那个Function去了!!!在需要不停在多个Function之间跳转的时候这个功能尤显实用~妈妈再也不用担心我找函数找到蛋疼了!当你编辑的是HTML时,这货给你罗列的则是HTML的各个ID元素,相信搞前端的同学们都鸡冻了吧。


Ctrl+P之后输入@号或者 直接按Ctrl+R,即可列出该文件里的全部function

输入@号开始有此般神奇功效,那么再试试输入一个英文冒号 : 开始吧,然后再输入一个数字,嗯,这次则可以跳到指定的行数了;输入一个#号开始,可以罗列/搜索文本;而且你还可以使用更快速的快捷键,譬如快速列出/跳转函数就是 Ctrl+R (Mac下是Command+R),它完全等同于Ctrl+P之后输入@;跳转到指定行号是 Ctrl+G (Mac是Command+G)。

而且更让人叫绝的是,这些切换定位方法你还可以配合在一起使用!譬如我有一个名为”hello-iplaysoft.js”的文件,里面其中有一个function叫做”visit_iplaysoft_com”,我现在想要编辑这个函数,那么我只需按下 Ctrl+P,然后输入“heip@vi”回车(模糊匹配,注意前面有颜色的字符),ST2 马上就给我到打开这个文件并定位进去了!够方便了吧?!熟记这几个快捷键,你可以很一气呵成地进行文件切换和编辑,你会发现世界更美好哦亲……

集所有功能于一身的命令面板:

Sublime Text 2 的一大特色是拥有一个相当强大的命令面板,它几乎无所不能!任何时候,按下 Ctrl+Shift+P(Win) 或 Command+Shift+P(Mac) 即可调出。利用它,你可以实现很多很多很多很多很多功能,例如“Set Syntax:PHP”即可将当前文档设置成PHP语法高亮;“Convert Case: Swap Case”可以将选中的文本大小写反转;“File: Save All”可以一次保存全部文件;“File: Close All”一次关闭全部文件等等……而且,这里的列表一样支持模糊匹配(这货真心是个好东西啊!)。因为这里面命令实在太多了,覆盖的作用范围也很广,我这里实在不能一一介绍,大家如果有兴趣,可以经常调个面板出来看看列表中都有些什么命令,多多去了解、尝试、再慢慢消化,相信它会让你再也离不开它。


强大的命令面板,可以在这里调用一切SublimeText提供的功能

Package Control(绝不可错过的扩展包管理器)

Sublime Text 2 除了自身拥有无数实用功能和特性之外,它还能安装使用各种扩展/皮肤/配色方案等来增强自己。现在介绍的这个 Package Control 可以看做是一个ST2的扩展管理器,使用它,你可以用非常神奇、非常简单方便的方法去下载、安装、删除 Sublime Text 2 的各种插件、皮肤等,相信我,想更好地使用 ST2 绝对不能没有它!不过 ST2 本身并没有自带这个工具,我们需要自行安装它,方法很简单:
1、在 SublimeText2 的目录里面找到 Data > Installed Packages 的文件夹 (如没有请手动新建)
2、在这里下载 Package Control.sublime-package 文件
3、将下载到的文件放进去 Installed Packages 里面
4、重新启动 Sublime Text 即可

如果 Package Control 已经安装成功,那么 Ctrl+Shift+P 调用命令面板,我们就会找到一些以“Package Control:”开头的命令,我们常用到的就是几个 Install Package (安装扩展)、List Packages (列出全部扩展)、Remove Package (移除扩展)、Upgrade Package (升级扩展)。但如果你按照上面的方法确实搞不定,可以试试按键盘 Ctrl+~ (数字1左边的按键)调出控制台,然后拷贝下面的代码进去并回车,它会自动帮你新建文件夹并下载文件的,与上面的方法最终效果是一样的:

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'


成功安装 Package Control 之后,在命令面板里会出现以其命名开头的一系列命令

在命令面板输入 “Package Control: Install Package“即会列出全部可以安装的扩展(必需连接网络,如下图),从列表可以看到,4GL、AAAPackageDev 那些就是插件的名称,选择它们就可以进行下载安装了。从该列表可以看到,目前ST2的各种扩展已经非常丰富了!此外,你还可以在这里看到 Web 版的扩展列表和详细的说明(这俩列表的数据应该是同步的。在截稿为止 2012-7-8,这里已经收集了482个扩展包了)


我这里以安装“JsFormat”插件为例,简单介绍一下 SublimeText 里面怎样安装与使用插件吧。JsFormat 的功能就是可以将一些凌乱的 JavaScript 代码重新排版,以方便更好地阅读与编辑。使用 Ctrl+Shift+P 调用命令面板,输入“Package Control: Install Package”(安装扩展包),在插件列表中选择安装“JsFormat”(可以输入字符过滤),待提示成功之后即已完成安装。随便打开一个js文件(最好是换行、对齐特别凌乱的那种),按下 Ctrl+Shift+P 调用命令面板,你会发现已经多了一项命令叫做“Format: Javascript”,如图:


使用 JSFormat 插件的 Format: Javascript 命令

使用之后,你的代码瞬间就变整齐了有木有!你也可以使用这个插件的热键“CTRL+ALT+F”进行整理(命令面板右方可以看到)。


使用 JSFormat 之后的 JS 代码效果,注意上图的JS代码是一堆的

当然,不同的扩展,使用的方法与表现的形式都不一样,这个就只能去web版查一下这个插件的一些具体的使用说明了,这里是不能一概而论的。不过大体上,安装和使用插件就是这么的简单。通过各种插件,你几乎可以实现任何你想要的功能。而且 ST2 也开放了插件API,如果你有能力,也可以试试开发一个,可以参考这里的API文档。本文后面会推荐一些实用的插件。

更换主题或配色方案:

如果你看腻了 SublimeText 的原版皮肤,也可以折腾一下换肤的。譬如下图是一款比较流行的主题 Theme - Soda,和安装插件基本上一样,使用 Package Control 进入 Install Package 的列表里面找到它进行安装即可。你也可以在网上找到一些 ST2 的主题,下载回来放到安装目录的 Data\Packages 文件夹里面,然后选择切换主题。配色方案的操作也是类似,大家自己研究研究吧,这里不多做介绍了。


另外,SublimeText 还有很给力的一点,就是它能原生支持 TextMate 的 Bundle 和配色方案,同样也是放在 Packages 文件夹里即可使用。TextMate 的 Bundle 和配色方案资源都比较丰富,网上可以找到不少。

送上大城小胖同学制作的 Sublime Text 2 的介绍视频:http://v.youku/v_show/id_XMzU5NzQ5ODgw.html

这里补充一些我认为不错的插件吧,欢迎大家推荐与补充:

Gits:可以轻松集成 GitHub
SFTP:直接编辑 FTP 或 SFTP 服务器上的文件
ZenCoding:这货对于前端的同学来说不得了,可以超快速编写HTML文件 (视频演示)
ConvertToUTF8:ST2只支持utf8编码,该插件可以显示与编辑 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等编码的文件
Clipboard History:剪切板历史
WordPress:集成一些WordPress的函数,对于像我这种经常要写WP模版和插件的人特别有用!
HtmlTidy:清理与排版你的HTML代码
PHPTidy:整理与排版PHP代码
YUI Compressor:压缩JS和CSS文件

一些补充:

因为 SublimeText 是绿色软件,用户的自定义配置、下载的插件等都是位于软件目录内的,所以一旦你配置好之后,使用 Dropbox、金山快盘之类的同步网盘进行同步(无网络的朋友用U盘也行),去到哪里运行都是自己的配置,非常方便!以后大家在不同的电脑上工作相信也能很顺手了。

另外,很多朋友反映表示打开中文会有乱码,其实是因为ST2本身只支持UTF-8编码,而我们常遇到的中文文件可能是GBK或者GB2312等编码,解决方法是安装一个 ConvertToUTF8 或者 GBK Encoding Support 插件即可完美解决,这个并不是什么大问题。

写在后面:

之前我一直使用的编辑器是 EditPlus,至少有4年+了吧,主要的原因是它的启动迅速和长久以来使用已经习惯了,但这次在试用后我毫不犹豫叛变到 SublimeText2 来了!从各种使用体验来说,ST2 给人最多的感觉就是“快”和“流畅”。“快”就像 Chrome 浏览器与其他一般浏览器的比那样,启动速度让人非常满意;“流畅”就是当你熟悉了它的一些快捷操作之后,编辑文档时那种不需打乱思绪的行云流水般的操作,非常让人有成就感!作为一款功能、扩展性如此强大,可配置性如此自由的软件,能做到速度如此之快实属极致了,想想看那些大型笨重的IDE们吧,你就恨不得马上去告诉所有人世界上还有 SublimeText 这样的神器~

Sublime Text 2 比 TextMate 在跨平台和软件更新上有很大优势,比另一款同样是神器级别的编辑器 VIM 入门又简单得多,比各大IDE又要轻巧快速,比网上大部分的编辑器功能和扩展性上要强,而且暗色系的界面也很酷很讨好人,可以说是目前除VIM、emacs外又一个代码编辑器的最佳选择了!(更现代更先进的界面比VIM更适合普通用户)

当然,一款的极致的编辑器就像小说里的绝世宝剑,从的适应到灵活运用需要很长时间的坚持、学习和尝试。建议大家多多了解和学习它的各种快捷键,那样写代码就像开极品飞车啊有木有。目前我也只是刚入门,很多技巧、快捷键和特性都还没用得上来,所以希望各界高手不吝赐教,多与我共享一些 ST2 的实用技巧与教程吧,不胜感激!

原文:http://www.iplaysoft/sublimetext.html




Sublime 常用的快捷键

  1. Ctrl  选择整行(按住-继续选择下行)
  2. Ctrl KK  从光标处删除至行尾
  3. Ctrl Shift+K  删除整行
  4. Ctrl Shift+D  复制光标所在整行,插入在该行之前
  5. Ctrl  合并行(已选择需要合并的多行时)
  6. Ctrl KU  改为大写
  7. Ctrl KL  改为小写
  8. Ctrl  选词 (按住-继续选择下个相同的字符串)
  9. Ctrl  光标移动至括号内开始或结束的位置
  10. Ctrl Shift  选择括号内的内容(按住-继续选择父括号)
  11. Ctrl  注释整行(如已选择内容,同“Ctrl+Shift+/”效果)
  12. Ctrl Shift  注释已选择内容
  13. Ctrl  撤销
  14. Ctrl  恢复撤销
  15. Ctrl  光标跳至对应的括号
  16. Alt  闭合当前标签
  17. Ctrl Shift+A  选择光标位置父标签对儿
  18. Ctrl Shift+[  折叠代码
  19. Ctrl Shift+]  展开代码
  20. Ctrl KT  折叠属性
  21. Ctrl K0  展开所有
  22. Ctrl  软撤销
  23. Ctrl  词互换
  24. Tab  缩进  自动完成
  25. Shift Tab  去除缩进
  26. Ctrl Shift+↑  与上行互换
  27. Ctrl Shift+↓  与下行互换
  28. Ctrl Backspace  从光标处删除至行首
  29. Ctrl Enter  光标后插入行
  30. Ctrl Shift+Enter  光标前插入行
  31. Ctrl F2  设置书签
  32. F2  下一个书签
  33. Shift F2  上一个书签


  Sublime Text比起Notepad++,UltraEdit之类Code编辑器来说,其功能有过之而无不及,配合着各种插件使用,Sublime Text在实际的使用中变得非常的顺手——当然,如果你还不顺手,那就请顺手写个插件吧。而在众多功能中,Sublime Text 还提供了无比强大的快捷键阵容,如果能够在Coding的时候灵活的使用快捷键,将能够使得你的效率倍增,相信在不久的将来,Sublime Text将是你跨平台使用的最佳Coding利器。

  然而,对于新入门的Sublime Text 的newbie来说,强大的快捷键阵容让人无所适从,或者连记住这些快捷键都将是一个困难重重的不可完成任务。使用Sublime Text需要的是时间和耐心,本着这个目的,Mitchell花了一些时间,将Sublime Text2中的快捷键整理了一份,同时对一些重要的快捷键进行了中文翻译,以方便和我一样的新手能够比较简单查找,然后在实践中不断的重复使用,以达到炉火纯青的地步(我是不指望这么高的追求的,但你可以有~~)。

  现在分享下在Sublime Text 2中的快捷键不完全翻译版本,用表格的形式放出,如果有错误之处,还请大家指正,如下:

 

快捷键 功能
ctrl+shift+n 打开新Sublime
ctrl+shift+w 关闭Sublime,关闭所有打开文件
ctrl+shift+t 重新打开最近关闭文件
ctrl+n 新建文件
ctrl+s 保存
ctrl+shift+s 另存为
ctrl+f4 关闭文件
ctrl+w 关闭
ctrl+k, ctrl+b 切换侧边栏显示状态
f11 切换全屏状态
shift+f11 免打扰模式状态切换
backspace 删除左侧
shift+backspace 左侧删除
ctrl+shift+backspace 左侧全部删除
delete 右侧删除
enter 插入
shift+enter 插入
ctrl+z 撤消
ctrl+shift+z 重做
ctrl+y 重做或重复
ctrl+u 软撤消
ctrl+shift+u 软重做
ctrl+shift+v 粘贴并格式化
shift+delete 剪切
ctrl+insert 拷贝
shift+insert 粘贴
ctrl+x 剪切
ctrl+c 拷贝
ctrl+v 粘贴
left 移动
right 移动
up 移动
down 移动
shift+left 移动并选择
shift+right 移动并选择
shift+up 移动并选择
shift+down 移动并选择
ctrl+left 按\w规则移动(跳跃)
ctrl+right 按\w规则移动(跳跃)
ctrl+shift+left 按\w规则移动并选择(跳跃)
ctrl+shift+right 按\w规则移动并选择(跳跃)
alt+left 按单词移动
alt+right 按单词移动
alt+shift+left 按单词移动并选择
alt+shift+right 按单词移动并选择
ctrl+alt+up 选择多行进行编辑
ctrl+alt+down 选择多行进行编辑
pageup 移动
pagedown 移动
shift+pageup 移动+选择
shift+pagedown 移动+选择
home 移动到行首
end 移动到行尾
shift+home 选择到行首
shift+end 选择到行尾
ctrl+home 移动到页首行头
ctrl+end 移动到页尾行尾
ctrl+shift+home 选择到页首行头
ctrl+shift+end 选择到页尾行尾
ctrl+up 滚动行
ctrl+down 滚动行
ctrl+pagedown 下一视图(视觉位置)
ctrl+pageup 前一视图
ctrl+tab 栈中下一视图(打开顺序)
ctrl+shift+tab 栈中前一视图
ctrl+a 全选
ctrl+shift+l 选择多行编辑
escape 单个选择
escape 清除字段
escape 清除字段
escape 隐藏面板
escape hide overlay
escape hide auto complete
tab insert best completion
tab insert best completion
tab replace completion with next completion
tab reindent
tab indent
tab next field
tab commit completion
shift+tab insert
shift+tab unindent
shift+tab unindent
shift+tab unindent
shift+tab prev field
ctrl+] 缩进
ctrl+[ 不缩进
insert toggle overwrite
ctrl+l 选择行,重复可依次增加选择下一行
ctrl+d 选择单词,重复可增加选择下一个相同的单词
ctrl+k, ctrl+d find under expand skip
ctrl+shift+space expand selection
ctrl+shift+m expand selection
ctrl+m 跳转到对应括号
ctrl+shift+j expand selection
ctrl+shift+a expand selection
alt+. close tag
ctrl+q toggle record macro
ctrl+shift+q run macro
ctrl+enter run macro file
ctrl+shift+enter 在当前行前插入新行
enter commit completion
ctrl+p 搜索项目中的文件
ctrl+shift+p 打开命令面板
ctrl+alt+p prompt select project
ctrl+r 前往Method
ctrl+g 跳转到第几行
ctrl+; show overlay
ctrl+i show panel
ctrl+shift+i show panel
ctrl+f 查找
ctrl+h 查找替换
ctrl+shift+h 查找替换下一个
f3 下一个匹配项
shift+f3 上一个匹配项
ctrl+f3 下一个匹配项
ctrl+shift+f3 find under prev
alt+f3 find all under
ctrl+e slurp find string
ctrl+shift+e slurp replace string
ctrl+shift+f show panel
f4 next result
shift+f4 prev result
f6 toggle setting
ctrl+f6 next misspelling
ctrl+shift+f6 prev misspelling
ctrl+shift+up swap line up
ctrl+shift+down swap line down
ctrl+backspace delete word
ctrl+shift+backspace run macro file
ctrl+delete delete word
ctrl+shift+delete run macro file
ctrl+/ 当前行注释状态切换
ctrl+shift+/ 当前位置注释状态切换
ctrl+j 选择标签内容,将后继行附加到行尾
ctrl+shift+d duplicate line
ctrl+` show panel
ctrl+space auto complete
ctrl+space replace completion with auto complete
ctrl+alt+shift+p show scope name
f7 build
ctrl+b build
ctrl+shift+b build
ctrl+break exec
ctrl+t transpose
f9 行排序
ctrl+f9 行排序
// Auto-pair quotes
\ insert snippet
\ insert snippet
\ move
backspace run macro file
// Auto-pair single quotes
' insert snippet
' insert snippet
' move
backspace run macro file
// Auto-pair brackets
( insert snippet
( insert snippet
) move
backspace run macro file
// Auto-pair square brackets
[ insert snippet
[ insert snippet
] move
backspace run macro file
// Auto-pair curly brackets
{ insert snippet
{ insert snippet
} move
backspace run macro file
enter run macro file
shift+enter run macro file
ctrl+1 focus group
ctrl+2 focus group
ctrl+3 focus group
ctrl+4 focus group
ctrl+shift+1 move to group
ctrl+shift+2 move to group
ctrl+shift+3 move to group
ctrl+shift+4 move to group
ctrl+0 focus side bar
alt+1 select by index
alt+2 select by index
alt+3 select by index
alt+4 select by index
alt+5 select by index
alt+6 select by index
alt+7 select by index
alt+8 select by index
alt+9 select by index
alt+0 select by index
f2 next bookmark
shift+f2 prev bookmark
ctrl+f2 标记状态切换
ctrl+shift+f2 clear bookmarks
alt+f2 select all bookmarks
ctrl+shift+k run macro file
alt+q wrap lines
ctrl+k, ctrl+u upper case
ctrl+k, ctrl+l lower case
ctrl+k, ctrl+space set mark
ctrl+k, ctrl+a select to mark
ctrl+k, ctrl+w delete to mark
ctrl+k, ctrl+x swap with mark
ctrl+k, ctrl+y yank
ctrl+k, ctrl+k run macro file
ctrl+k, ctrl+backspace run macro file
ctrl+k, ctrl+g clear bookmarks
ctrl+k, ctrl+c show at center
ctrl++ increase font size
ctrl+= increase font size
ctrl+keypad plus increase font size
ctrl+- decrease font size
ctrl+keypad minus decrease font size
alt+shift+w insert snippet
ctrl+shift+[ 折叠(代码)
ctrl+shift+] 不折叠
ctrl+k, ctrl+1 按层级折叠(代码),数字是层级数
ctrl+k, ctrl+2 按层级折叠(代码),数字是层级数
ctrl+k, ctrl+3 按层级折叠(代码),数字是层级数
ctrl+k, ctrl+4 按层级折叠(代码),数字是层级数
ctrl+k, ctrl+5 按层级折叠(代码),数字是层级数
ctrl+k, ctrl+6 按层级折叠(代码),数字是层级数
ctrl+k, ctrl+7 按层级折叠(代码),数字是层级数
ctrl+k, ctrl+8 按层级折叠(代码),数字是层级数
ctrl+k, ctrl+9 按层级折叠(代码),数字是层级数
ctrl+k, ctrl+0 unfold all
ctrl+k, ctrl+j unfold all
ctrl+k, ctrl+t fold tag attributes
context menu context menu
alt+c toggle case sensitive
alt+r toggle regex
alt+w toggle whole word
alt+a toggle preserve case
// 查找面板的按键绑定
enter 向后查找
shift+enter 向前查找
alt+enter 查找全部
// 替换面板的按键绑定
enter 查找下一个
shift+enter 查找前一个
alt+enter 查找全部
ctrl+alt+enter 替换全部
// Incremental find panel key bindings
enter hide panel
shift+enter find prev
alt+enter find all

Sublime Text2 多行编辑快捷键 
鼠标选中多行,按下 Ctrl Shift L (Command Shift L) 即可同时编辑这些行;
鼠标选中文本,反复按 CTRL D (Command D) 即可继续向下同时选中下一个相同的文本进行同时编辑;
鼠标选中文本,按下 Alt F3 (Win) 或 Ctrl Command G(Mac) 即可一次性选择全部的相同文本进行同时编辑;
Shift 鼠标右键 (Win) 或 Option 鼠标左键 (Mac) 或使用鼠标中键可以用鼠标进行竖向多行选择;
Ctrl 鼠标左键(Win) 或 Command 鼠标左键(Mac) 可以手动选择同时要编辑的多处文本



Sublime2之Zencoding快速上手 

    1、前言     刚看完球,辽足0-0平北京国安,稳稳妥妥各拿1分,皆大欢喜。恒大4-0狂胜长春亚泰。期待恒大51主场之战,死磕全北现代。最近两天一直在研究BootStrap这个东东,做了几个例子,感觉挺好的,五岳之巅也向大家推荐。     但是心头上最激动的除了足球就是Zencoding,于是本文欲罢不能,终于产出。
    2、简介     我不是一个爱卖弄关子的人,喜欢直奔主题。所以先介绍What is the Zencoding?一个俄国小伙子Sergey Chikuyonok,主导编写了Zencoding项目,主要是仿CSS选择器语法来快速码HTML代码。能有多快?马上告诉你。
    想快速知道它的作用么,来吧,给你一个大开眼界的机会。     首先看看这个zencoding代码:

点击(此处)折叠或打开

  1. html>head>(title+style+script[src=abc$.js]*3)+body>((.content>.nav>ul>li*5>a>span)+(.sidebar>.top+.middle+.bottom)+.main>.acticle*3>h1{文章标题$}+p)+.footer{版权信息}
     哦,你会说,这行代码如何呢?请翻滚此文一直到末尾,有一个综合性的练习,练习题目就是用这行代码生成的html文件。    没错,你没看错,那么多的一大篇html代码就是由以上这句话产生的。    好奇了吧,想学了吧。看下文吧。
    3、环境配置     在上一篇博客《超级牛B编码王(一):Sublime2之WIN7下安装Zencoding 中详细介绍了Sublime2下Zencoding的安装,当然Zencoding就是一个插件,也有其他比如Notepad、DW等编辑器的版本,大家到“ http://zencoding/”这里就能全部网罗。关于环境搭建,不多说,第一篇写的很详细了。
    4、注意事项     ZC项目更新速度较快,大家现在能在百度里搜到的教程,都不太全,未能完全展示Zencoding之力。所以本文将较为完备地由浅入深讲解它。但随着时间的流逝,半年或一年后,本文也将因项目发展而变得不全,不过基本要点是没有变的。
    5、QuickStart     (1)如下图所示,到github里搜索zencoding。


    为什么要这么做,看了搜索结果你就知道了:

    搜索结果告诉我们,zencoding有多种语言扩展和IDE扩展,所以不仅能写HTML和CSS也能写Ruby和PHP等,具体内容请详见图片上的“more >>”。
    (2)在上图中点击第一项“sergeche/zen-coding”进入项目页。然后向下翻啊翻,可以看到如下一个小节,就是使用说明:
Current features of abbreviation engine: A.ID and CLASS attributes: div#page.section.main.
B.Custom attributes: div[title], a[title="Hello world" rel], td[colspan=2].
C.Element multiplication: li*5 will output
  • tag five times.

D.Item numbering with $ character: li.item$*3 will output
  • tag three times, replacing $ character with item number.

E.Multiple ‘$’ characters in a row are used as zero padding, i.e.: li.item$$$ → li.item001
F.Abbreviation groups with unlimited nesting: div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer. You can literally write a full document markup with just a single line.
G.Filters support
H.div tag name can be omitted when writing element starting from ID or CLASS: #content>.section is the same as div#content>div.section.
    为了容易分辨,我加了隔行变色。


———————————————————————————————————— ***  不要着急,现在就开始详细讲解了  *** ————————————————————————————————————

    (3)“#”表id,“.”表类,“+”表并列     使用sublime建立一个foo.html保存到桌面,然后Win7下快捷键Ctrl+Alt+Enter调出zencoding的心印(koan),koan一词源于佛语,等你学完全文才能明白它的含义。     写入如下代码,就可以产生一组HTML结构,看图吧:
    写完Enter Koan后面的代码后,上面就出现了HTML结构。这个例子可以看出一般的zencoding格式是“HTML标签#xxx”或者 “HTML标签.yyy”,而#xxx表示id为xxx,.yyy说明class为yyy。最后“+”表示标签的并列。
    小练习1:     请大家完成以下HTML的zencoding代码,时间要求30秒以内:

点击(此处)折叠或打开

  1. <div id="header"></div>
  2. <div class="content"></div>
  3. <div class="sidebar"></div>
  4. <div id="footer"></div>
      做不完本练习,不能往下学,打牢基础最重要。
    小练习2:     请大家完成以下HTML的zencoding代码,时间要求35秒以内:

点击(此处)折叠或打开

  1. <div id="header"></div>
  2. <div id="content" class="aticle posts"></div>
  3. <div id="sidebar" class="ad"></div>
  4. <div id="footer"></div>
      做不完本练习,更不能往下学,因为你根本就没明白怎样用一行zencoding写出来。     如果你5分钟后还是做不出来,教程最后一部分有练习题答案,悲催的您去看看吧。后续内容你会更不适应。但那些一下子能明白过来的人或是直接做对的同志,嗯,悟性很好,趁热打铁,再接再厉!
    (4)“>”指子内容     很容易理解,比如写下“div>p>span>a”这个Koan,那么就有这个HTML结构:

点击(此处)折叠或打开

  1. <div>
  2.     <p><span><a href=""></a></span></p>
  3. </div>
     其中,a标签里的属性href是zencoding智能加入的。总之“>”产生了标签的层级,而且zencoding会自动缩进哦。来接着练习吧。          小练习3:     按照HTML代码,回推Koan。

点击(此处)折叠或打开

  1. <html>
  2.     <head></head>
  3.     <body>
  4.         <div class="header"></div>
  5.         <div class="content"></div>
  6.         <div class="footer"></div>
  7.     </body>
  8. </html>

     小练习4:     刚才练习3做的很爽吧,在这里又给你放了一个练习,试试手气吧。Try it hard!

点击(此处)折叠或打开

  1. <html>
  2.     <head>
  3.         <title></title>
  4.         <style type="text/css"></style>
  5.         <script type="text/javascript"></script>
  6.     </head>
  7.     <body>
  8.         <div class="content">
  9.             <div class="nav"></div>
  10.             <div class="sidebar"></div>
  11.             <div class="main"></div>
  12.         </div>
  13.         <div class="footer"></div>
  14.     </body>
  15. </html>
      没错,也是一句Koan就OK的事!     如果你错了,恭喜你,你为下一步打下了重要的基础。你做对了,不是蒙的就是蒙的。
       (5)“()”指同级范围     理论叙述是枯燥的,看例子是愉快的。刚才的小练习4,答案是 html>(head>title+style+script)+body>+(div.content>div.nav+div.sidebar+div.main)+div.footer     呵呵,对照HTML代码,你自己该想明白“()”是干什么的了吧。这也就是没有()的情况下head中的style会出现在别处。     这节没有练习,和大家玩了一个朝三暮四。
     (6)“[]”表属性     如何完成<h1 title="something"></h1>的属性写法呢,就是用“[]”,即如下Koan:h1[title=someting]。     好了又到了练习时间。
     小练习5:     按照HTML代码,回推Koan。

点击(此处)折叠或打开

  1. <div id="content">
  2.     <div class="aticle">
  3.         <h1 class="ok" title="papername" sytle="color:#000;"></h1>
  4.         <h3 title="subname" sytle="color:#fff;" class="no"></h3>
  5.         <p class="words"></p>
  6.     </div>
  7. </div>
     这个练习,我感觉出的很好,即使你做出来了,也要认真地看我给出的答案,因为其中有玄妙啊!
     (6)#和.的简写     Koan中:div.ok等同于.ok,div#no等同于#no,所以直接写.或#时,默认为Div标签是也。
     小练习6:     用简写法改写练习5。
     (7)“*”表标签克隆     如果在Koan中写入一下内容:ul>li*5,就会产生以下HTML结构:
    那么,如果每个li元素中还存在<a>与<span>呢,没事照下图办:

    OK,想必大家想明白了*号的用法,继续练习。           小练习7:     按照HTML代码,回推Koan。

点击(此处)折叠或打开

  1. <div class="header">
  2.     <ul class="nav">
  3.         <li><a href="" sytle="block"><span>五岳之巅</span></a></li>
  4.         <li><a href="" sytle="block"><span>五岳之巅</span></a></li>
  5.         <li><a href="" sytle="block"><span>五岳之巅</span></a></li>
  6.         <li><a href="" sytle="block"><span>五岳之巅</span></a></li>
  7.         <li><a href="" sytle="block"><span>五岳之巅</span></a></li>
  8.         <li><a href="" sytle="block"><span>五岳之巅</span></a></li>
  9.     </ul>
  10. </div>

    没错,什么都做出来了,就是里面的“五岳之巅”弄不出来吧,这是我给你下的套,为下一节埋一个伏笔。其实我这人挺好的,总这么折腾还不是想让大家自己发现问题,自己开始思考嘛。
     (8)“{}”表标签内容     你在Koan中写:div>span>h1{这是标题},自己看看会出现什么吧。     此节无练习,只因太简单。
     (9)“$”表连续数     其实好理解,不说废话,看图吧:
    所以不论在属性如li.li-$或是id或是{}中的内容,$就代表从1开始的序列,就和Excel表一格写一个1,下拉改格拖出2,3,4,5,6的意思一样。     手痒痒了吧,该练个习了。
     小练习8:     按照HTML代码,回推Koan。难度只在“01、02...”的表示上。

点击(此处)折叠或打开

  1. <table>
  2.     <thead>
  3.         <td class="col1"></td>
  4.         <td class="col2"></td>
  5.         <td class="col3"></td>
  6.         <td class="col4"></td>
  7.     </thead>
  8.     <tbody>
  9.         <tr class="row01">
  10.             <td class="col1"></td>
  11.             <td class="col2"></td>
  12.             <td class="col3"></td>
  13.             <td class="col4"></td>
  14.         </tr>
  15.         <tr class="row02">
  16.             <td class="col1"></td>
  17.             <td class="col2"></td>
  18.             <td class="col3"></td>
  19.             <td class="col4"></td>
  20.         </tr>
  21.         <tr class="row03">
  22.             <td class="col1"></td>
  23.             <td class="col2"></td>
  24.             <td class="col3"></td>
  25.             <td class="col4"></td>
  26.         </tr>
  27.     </tbody>
  28.     <tfoot>
  29.         <td></td>
  30.         <td></td>
  31.         <td></td>
  32.         <td></td>
  33.     </tfoot>
  34. </table>

      好了,至此,讲完了Zencoding的主要而且最常用的内容。时间刚好到凌晨12点整,这篇BLOG花费了我近3个小时的时间。呵呵,不容易啊。
    最后一个综合性的练习,做一下吧,请大家一句Koan搞定它,千万别偷看文章最开始答案啊,我想你应该可以自己完成了吧:

*******************这就是文章开头的那句Koan生成的代码*********************************

点击(此处)折叠或打开

  1. <html>
  2.     <head>
  3.         <title></title>
  4.         <style type="text/css"></style>
  5.         <script type="text/javascript" src="abc1.js"></script>
  6.         <script type="text/javascript" src="abc2.js"></script>
  7.         <script type="text/javascript" src="abc3.js"></script>
  8.     </head>
  9.     <body>
  10.         <div class="content">
  11.             <div class="nav">
  12.                 <ul>
  13.                     <li><a href=""><span></span></a></li>
  14.                     <li><a href=""><span></span></a></li>
  15.                     <li><a href=""><span></span></a></li>
  16.                     <li><a href=""><span></span></a></li>
  17.                     <li><a href=""><span></span></a></li>
  18.                 </ul>
  19.             </div>
  20.         </div>
  21.         <div class="sidebar">
  22.             <div class="top"></div>
  23.             <div class="middle"></div>
  24.             <div class="bottom"></div>
  25.         </div>
  26.         <div class="main">
  27.             <div class="acticle">
  28.                 <h1>文章标题1</h1>
  29.                 <p></p>
  30.             </div>
  31.             <div class="acticle">
  32.                 <h1>文章标题2</h1>
  33.                 <p></p>
  34.             </div>
  35.             <div class="acticle">
  36.                 <h1>文章标题3</h1>
  37.                 <p></p>
  38.             </div>
  39.         </div>
  40.         <div class="footer">版权信息</div>
  41.     </body>
  42. </html>

         其实,这篇并不是最后一篇,最后一篇要写filter规则,今天太晚了,明早还有一上午课,最近一两天抽空再写吧。
    晚安,大家。晚安,自己。




    答案:
    练习1:div#header+div.content+div.sidebar+div#footer
    练习2:div#header+div#content.aticle.posts+div#sidebar.ad+div#footer
    练习3:html>head+body>div.header+div.content+div.footer
    练习4:html>(head>title+style+script)+body>(div.content>div.nav+div.sidebar+div.main)+div.footer
    练习5:div#content>div.aticle>h1.ok[title=papername sytle=color:#000;]+h3[title=subname][sytle=color:#fff;].no+p.words
(注意:1、id或class与属性的先后位置,是否无关?;2、并列属性的写法,是否很灵活?3、为什么这个例子不用(),而上一个例子必须用呢?)
    练习6:#content>.aticle>h1.ok[title=papername sytle=color:#000;]+h3[title=subname][sytle=color:#fff;].no+p.words
    练习7:div.header>ul.nav>li*6>a[sytle=block]>span{五岳之巅}
    练习8:table>(thead>td.col$*4)+(tbody>tr.row$$*3>td.col$*4)+tfoot>td*4


    五岳之巅,辛苦原创,欢迎转载,转载请必须注明出处与原创作者,谢谢!











更多推荐

Sublime Text2使用教程

本文发布于:2023-04-19 21:54:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/875e339a5fad07971321c3d0c85b1231.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:教程   Sublime

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!

  • 89174文章数
  • 22084阅读数
  • 0评论数