Sublime使用常见技巧举例

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:Rix Tox
链接:http://www.zhihu.com/question/24896283/answer/40135140
来源:知乎

1. 更改变量名的几种方法
<img src="https://i-blog.csdnimg.cn/blog_migrate/02c77daae62a43dd904f97b75294d5d1.png" data-rawwidth="153" data-rawheight="46" class="content_image" width="153">
这种情况下该如何快速选中正确的内容?
第一种方法:让Cmd-D (Win: Ctrl-D)只选择同一个变量。
把光标移到第一个i后面:
<img src="https://i-blog.csdnimg.cn/blog_migrate/a96c6a9269839ee2255f216a9247d8d2.png" data-rawwidth="159" data-rawheight="43" class="content_image" width="159">按Cmd-D (Win: Ctrl-D): 按Cmd-D (Win: Ctrl-D):
<img src="https://i-blog.csdnimg.cn/blog_migrate/97c1f1dc6b039aa03907808fcd300731.png" data-rawwidth="160" data-rawheight="49" class="content_image" width="160">再按一次: 再按一次:
<img src="https://i-blog.csdnimg.cn/blog_migrate/61afdcafdd56471e3bab35505a5717bc.png" data-rawwidth="152" data-rawheight="48" class="content_image" width="152">限制:选取范围中不能有别的同名同类token,如: 限制:选取范围中不能有别的同名同类token,如:
<img src="https://i-blog.csdnimg.cn/blog_migrate/0d5f8efdac2c56f6864fa41401a42f99.png" data-rawwidth="141" data-rawheight="45" class="content_image" width="141"> 第二种方法:自动选取所有同名同类token。
把光标移到第一个i后面:
<img src="https://i-blog.csdnimg.cn/blog_migrate/a96c6a9269839ee2255f216a9247d8d2.png" data-rawwidth="159" data-rawheight="43" class="content_image" width="159">
按Ctrl-Cmd-G (Win: Alt-F3):
<img src="https://i-blog.csdnimg.cn/blog_migrate/61afdcafdd56471e3bab35505a5717bc.png" data-rawwidth="152" data-rawheight="48" class="content_image" width="152">
限制:会将别的作用域中的同名同类token都选中,如:
<img src="https://i-blog.csdnimg.cn/blog_migrate/082cf22a43e5cec1e3d52c1f74075f23.png" data-rawwidth="199" data-rawheight="89" class="content_image" width="199"> 第三种方法:Cmd-K, Cmd-D (Win: Ctrl-K, Ctrl-D) 跳过选区。
这个方法能解决所有问题,先把光标移到第一个i后面:
<img src="https://i-blog.csdnimg.cn/blog_migrate/57e4f7d0794223679626e0a2a81745d8.png" data-rawwidth="211" data-rawheight="58" class="content_image" width="211">按Cmd-D (Win: Ctrl-D): 按Cmd-D (Win: Ctrl-D):
<img src="https://i-blog.csdnimg.cn/blog_migrate/6b1c2cb6348dbcd43b7d664b3c450ce2.png" data-rawwidth="204" data-rawheight="60" class="content_image" width="204">再按一次: 再按一次:
<img src="https://i-blog.csdnimg.cn/blog_migrate/7dee8736a30c7653187dc16ebef9a607.png" data-rawwidth="205" data-rawheight="60" class="content_image" width="205">这个token我们不想选中,这时候只要分别按 Cmd-K, Cmd-D (Win: Ctrl-K, Ctrl-D) 就可以跳过这个选区: 这个token我们不想选中,这时候只要分别按 Cmd-K, Cmd-D (Win: Ctrl-K, Ctrl-D) 就可以跳过这个选区:
<img src="https://i-blog.csdnimg.cn/blog_migrate/b31979653a4ab1bae64e159b5d38608e.png" data-rawwidth="206" data-rawheight="59" class="content_image" width="206">这个token也不要,再按一次跳过: 这个token也不要,再按一次跳过:
<img src="https://i-blog.csdnimg.cn/blog_migrate/498a1da6a59c262fd79747d8dc6e8735.png" data-rawwidth="201" data-rawheight="58" class="content_image" width="201">你会发现执行跳过选区后就不再是同名同类的token选择了,不过不要紧,我们继续跳过就好: 你会发现执行跳过选区后就不再是同名同类的token选择了,不过不要紧,我们继续跳过就好:
<img src="https://i-blog.csdnimg.cn/blog_migrate/14ea040b011a67c9390e9e7ae59c3a64.png" data-rawwidth="204" data-rawheight="59" class="content_image" width="204">这个token我们要保留,于是只按Cmd-D (Win: Ctrl-D): 这个token我们要保留,于是只按Cmd-D (Win: Ctrl-D):
<img src="https://i-blog.csdnimg.cn/blog_migrate/3d0ef6f2240151019378c69ae8a0bf0a.png" data-rawwidth="208" data-rawheight="64" class="content_image" width="208">然后就能正确地重命名了。 然后就能正确地重命名了。

2. 自适应缩进的复制粘贴
有些情况下我们需要直接复制粘贴一段网上的代码,有些人可能会这样选中原文进行复制:
<img src="https://i-blog.csdnimg.cn/blog_migrate/d90140e5e488ea809e4e8109d4a4cdb5.png" data-rawwidth="901" data-rawheight="287" class="origin_image zh-lightbox-thumb" width="901" data-original="https://pic1.zhimg.com/8efbe1b2d3cad4b8729050b13d2358a0_r.jpg">然后在subl中这样粘贴: 然后在subl中这样粘贴:
<img src="https://i-blog.csdnimg.cn/blog_migrate/8c0c8783602f2404b21bbf0006d8e9f5.png" data-rawwidth="444" data-rawheight="244" class="origin_image zh-lightbox-thumb" width="444" data-original="https://pic4.zhimg.com/b62dab2dddfbd87e0532bd48c2a9f9e3_r.jpg">但是你会发现粘贴出来的缩进格式完全对不上号: 但是你会发现粘贴出来的缩进格式完全对不上号:
<img src="https://i-blog.csdnimg.cn/blog_migrate/a01dfd30bbf75b40bd99ecdc2607f2f5.png" data-rawwidth="467" data-rawheight="317" class="origin_image zh-lightbox-thumb" width="467" data-original="https://pic4.zhimg.com/b2e85b0ef5ff89b07638f311e964494b_r.jpg"> 正确的做法如下:
把目标代码片段的每一个整行都选中,然后进行复制:
<img src="https://i-blog.csdnimg.cn/blog_migrate/55fb1a29eb6001dffd6b9927b4e1aa94.png" data-rawwidth="436" data-rawheight="306" class="origin_image zh-lightbox-thumb" width="436" data-original="https://pic2.zhimg.com/e9c7a055163e3b8616028c12f4c2b93d_r.jpg">在subl中对插入行进行正确的缩进: 在subl中对插入行进行正确的缩进:
<img src="https://i-blog.csdnimg.cn/blog_migrate/dcc29832d9a843198e48fb25ec87a55a.png" data-rawwidth="427" data-rawheight="247" class="origin_image zh-lightbox-thumb" width="427" data-original="https://pic1.zhimg.com/d468abbac735c3ae7e9e2ccdc30af4e0_r.jpg">然后按Cmd-Shift-v (Win: Ctrl-Shift-v) 进行自适应缩进的粘贴: 然后按Cmd-Shift-v (Win: Ctrl-Shift-v) 进行自适应缩进的粘贴:
<img src="https://i-blog.csdnimg.cn/blog_migrate/4231540bf2cf34e8f11ad464f3840a67.png" data-rawwidth="426" data-rawheight="317" class="origin_image zh-lightbox-thumb" width="426" data-original="https://pic2.zhimg.com/cf33b1dc3480104de9dcfeb3dc034dcd_r.jpg">这样的粘贴方式不但能自适应缩进,还能自动将空格或Tab缩进转换成适应你代码的格式。 这样的粘贴方式不但能自适应缩进,还能自动将空格或Tab缩进转换成适应你代码的格式。

3. 快速创建新文件 (AdvancedNewFile)

我在使用ANF之前最快的创建新文件的方法是这样的:
Cmd-n (Win: Ctrl-n) 打开编辑窗格:
<img src="https://i-blog.csdnimg.cn/blog_migrate/c9ca597fe2c6538fdf16984c91a504e1.png" data-rawwidth="686" data-rawheight="487" class="origin_image zh-lightbox-thumb" width="686" data-original="https://pic4.zhimg.com/e0ea29374a136c7d43ba96e1490f6e63_r.jpg">然后Cmd-Shift-p (Win: Ctrl-Shift-p) 打开Command Palette,如果我想写ruby代码,我就敲ssru: 然后Cmd-Shift-p (Win: Ctrl-Shift-p) 打开Command Palette,如果我想写ruby代码,我就敲ssru:
<img src="https://i-blog.csdnimg.cn/blog_migrate/feac32feae6be6ef32249cc37a8e76b7.png" data-rawwidth="686" data-rawheight="487" class="origin_image zh-lightbox-thumb" width="686" data-original="https://pic4.zhimg.com/3b8f8f288f1ba32f8660a7dcb23241cb_r.jpg">回车后我的文档就变成Ruby语法的了,这个时候保存文件就会自动提供.rb的后缀名: 回车后我的文档就变成Ruby语法的了,这个时候保存文件就会自动提供.rb的后缀名:
<img src="https://i-blog.csdnimg.cn/blog_migrate/da4c3fbcbc158f079cfc0333d972c673.png" data-rawwidth="824" data-rawheight="666" class="origin_image zh-lightbox-thumb" width="824" data-original="https://pic4.zhimg.com/5bba219e45b8af90b4684a577008263b_r.jpg">不过这样的流程还是太繁琐了。我推荐安装使用AdvancedNewFile插件代替原有的新建文件功能。 不过这样的流程还是太繁琐了。我推荐安装使用AdvancedNewFile插件代替原有的新建文件功能。


新的流程如下:
比如我有这样一个project:
<img src="https://i-blog.csdnimg.cn/blog_migrate/ab6d33af94943da9031916a0b1d27ce2.png" data-rawwidth="837" data-rawheight="577" class="origin_image zh-lightbox-thumb" width="837" data-original="https://pic1.zhimg.com/1672896ca70d5e194d17a0e97236bac0_r.jpg">我想在script目录下建立一个utils文件夹,然后再在utils里面建立一个API.js文件,我只要按 Cmd-Opt-n (Win: Ctrl-Alt-n) 打开一个路径输入框: 我想在script目录下建立一个utils文件夹,然后再在utils里面建立一个API.js文件,我只要按 Cmd-Opt-n (Win: Ctrl-Alt-n) 打开一个路径输入框:
<img src="https://i-blog.csdnimg.cn/blog_migrate/a8f020aba1bc65d91572814316748240.png" data-rawwidth="837" data-rawheight="577" class="origin_image zh-lightbox-thumb" width="837" data-original="https://pic3.zhimg.com/caf1769fddeb5fe67b5ea530e6efc4ea_r.jpg">然后输入script/utils/API.js回车就可以自动创建目录结构以及空文件。由于我们打开了script/app.js文件,我们可以直接输入./utils/API.js创建相对路径的文件结构。另外,对于已存在的目录可以使用Tab补全。创建出来的新文件会自动打开,并且会自动选择相应的语法,没有额外的工作。 然后输入script/utils/API.js回车就可以自动创建目录结构以及空文件。由于我们打开了script/app.js文件,我们可以直接输入./utils/API.js创建相对路径的文件结构。另外,对于已存在的目录可以使用Tab补全。创建出来的新文件会自动打开,并且会自动选择相应的语法,没有额外的工作。

4. 更改HTML标签
我之前更改HTML标签时要么就用上面更改变量名的方式选中一组标签,要么就手动按着Cmd (Win: Ctrl)不放双击标签的开头和结尾:
<img src="https://i-blog.csdnimg.cn/blog_migrate/9287c71ed03f6573400b344cd7f63bdb.png" data-rawwidth="166" data-rawheight="168" class="content_image" width="166">但是如果标签中间内容很多,这样的方式会比较费时。Emmet插件提供了一个非常方便的快捷键能够快速选择对应的一组标签名。首先将光标移至标签的开头或结尾: 但是如果标签中间内容很多,这样的方式会比较费时。Emmet插件提供了一个非常方便的快捷键能够快速选择对应的一组标签名。首先将光标移至标签的开头或结尾:
<img src="https://i-blog.csdnimg.cn/blog_migrate/3a08c4a353ce809d7e5e963c6a058685.png" data-rawwidth="206" data-rawheight="103" class="content_image" width="206">然后按Cmd-Shift-K (Win: Ctrl-Shift-') 就能选中这组标签: 然后按Cmd-Shift-K (Win: Ctrl-Shift-') 就能选中这组标签:
<img src="https://i-blog.csdnimg.cn/blog_migrate/3778d56175b967b56265c8ce37cd9d4f.png" data-rawwidth="199" data-rawheight="104" class="content_image" width="199">
5. CSS快速键入
Emmet插件还提供了很多非常方便的CSS Snippets。比方说我们要敲出font-size: 1.8em;其中1.8是根据一个值计算得来的,比如说是3.6/2的结果,我们可以用Emmet进行这种简单的数值计算。
键入fz3.6/2:
<img src="https://i-blog.csdnimg.cn/blog_migrate/c55829202a2dea4f7844b68a2296ce0b.png" data-rawwidth="245" data-rawheight="68" class="content_image" width="245">按Cmd-Shift-Y (Win: Ctrl-Shift-Y)计算数值: 按Cmd-Shift-Y (Win: Ctrl-Shift-Y)计算数值:
<img src="https://i-blog.csdnimg.cn/blog_migrate/39b3d0d4f95847e31c43c0b2461a00e3.png" data-rawwidth="229" data-rawheight="69" class="content_image" width="229">然后按Tab展开Snippet: 然后按Tab展开Snippet:
<img src="https://i-blog.csdnimg.cn/blog_migrate/b981ba2cb3671177113080362ba327ac.png" data-rawwidth="220" data-rawheight="65" class="content_image" width="220">
6. 2空格-4空格缩进快速切换
我之前用别人代码的时候总是遇到缩进空格数跟我不同的情况,后来我学会一种方法能够处理这样的文件。比如我要将4空格缩进转成2空格缩进,首先将目标代码复制到一个独立的编辑窗口中:
<img src="https://i-blog.csdnimg.cn/blog_migrate/1722bfd77d4e621e5fcd61c8dcbf99e4.png" data-rawwidth="292" data-rawheight="424" class="content_image" width="292">然后在编辑器右下角的缩进选项菜单中选择Tab Width: 4: 然后在编辑器右下角的缩进选项菜单中选择Tab Width: 4:
<img src="https://i-blog.csdnimg.cn/blog_migrate/46ef049ad67b7afa89b43945f82d8224.png" data-rawwidth="249" data-rawheight="291" class="content_image" width="249">
然后在编辑器右下角的缩进选项菜单中选择Convert Indentation to Tabs:
<img src="https://i-blog.csdnimg.cn/blog_migrate/0b4e093d368e0935511392f6b4cd1c2c.png" data-rawwidth="249" data-rawheight="291" class="content_image" width="249">然后在编辑器右下角的缩进选项菜单中选择Tab Width: 2: 然后在编辑器右下角的缩进选项菜单中选择Tab Width: 2:
<img src="https://i-blog.csdnimg.cn/blog_migrate/69131a1ece89ccb13740aa2947c47e9e.png" data-rawwidth="249" data-rawheight="291" class="content_image" width="249">
然后在编辑器右下角的缩进选项菜单中选择Convert Indentation to Spaces:
<img src="https://i-blog.csdnimg.cn/blog_migrate/fc7f9e085cd01901fd30978a852812ea.png" data-rawwidth="249" data-rawheight="291" class="content_image" width="249">然后你的文档就变成2空格缩进的了: 然后你的文档就变成2空格缩进的了:
<img src="https://i-blog.csdnimg.cn/blog_migrate/036f6ded538afaf8d247a51103653f46.png" data-rawwidth="221" data-rawheight="422" class="content_image" width="221">但是这样的方法太过繁琐了不是吗?于是我就写了一个宏脚本,绑定到快捷键上来做这个工作。 但是这样的方法太过繁琐了不是吗?于是我就写了一个宏脚本,绑定到快捷键上来做这个工作。
打开这个链接: gist.github.com/beaugun
把to-2.sublime-macro和to-4.sublime-macro文件下载到你Sublime Text配置目录的Packages/User路径下,然后在编辑器菜单中选择Preferences - Key Bindings - User打开用户快捷键配置文件,把Default (OSX).sublime-keymap中的内容添加到这个文件中。
然后你就可以用Ctrl-2或Ctrl-4转换文件的缩进空格数了。

7. 扩展选区
我非常喜欢Emacs的expand-region插件,ST2提供有类似的Expand Selection to Scope功能,但是不太好用,我建议安装ExpandRegion插件。

首先把光标移到某个位置:
<img src="https://i-blog.csdnimg.cn/blog_migrate/a6d51331a38fbea13f7d75647a5330a6.png" data-rawwidth="431" data-rawheight="283" class="origin_image zh-lightbox-thumb" width="431" data-original="https://pic4.zhimg.com/71ae7a744b085d502d794d647fed4d43_r.jpg">然后按一次Cmd-Shift-Space (Win: Ctrl-Shift-Space)会选择当前的最小区域: 然后按一次Cmd-Shift-Space (Win: Ctrl-Shift-Space)会选择当前的最小区域:
<img src="https://i-blog.csdnimg.cn/blog_migrate/a3e166d65ea06f833ebca2a3d9ca827b.png" data-rawwidth="426" data-rawheight="276" class="origin_image zh-lightbox-thumb" width="426" data-original="https://pic3.zhimg.com/63a238362e3cf03363e228151c0d21b6_r.jpg">再按一次会向外扩展区域: 再按一次会向外扩展区域:
<img src="https://i-blog.csdnimg.cn/blog_migrate/e07c15d1a5a1039885552a2d9101cd35.png" data-rawwidth="432" data-rawheight="273" class="origin_image zh-lightbox-thumb" width="432" data-original="https://pic1.zhimg.com/9c7f85fa302c0e5ce4196d800febffc4_r.jpg">每次按都会不断地向外扩展区域,直到全选为止。 每次按都会不断地向外扩展区域,直到全选为止。

8. 选区增强插件
安装 MultiEditUtils 插件。
这是一个非常强大的选区增强插件,如果你喜欢用复杂的快捷键完成高难度的编辑工作,这个插件可以提供很多方面的支持。
详细的功能请阅读项目主页: philippotto/Sublime-MultiEditUtils · GitHub

9. 代码格式化
安装 CodeFormatter 和 SublimeAStyleFormatter 插件。使用时在 Command Palette 找 "format" 相关的命令即可。

10. 颜色高亮
安装 Color Highlighter,会自动高亮代码中的颜色,在写纯css的时候比较有用。

11. 语言分析增强
很多时候有些文件不能被 Sublime Text 准确识别出相应的语言,比如不带後缀名的配置脚本之类。这时可以使用 ApplySyntax 插件,参照默认配置进行调整就能识别这些特殊情况了。

12. Windows 下输入法支持
如果遇到输入法的输入栏不在光标位置的问题,可以安装 IMESupport 插件解决。

13. 忽略依赖目录
有时候我们要用 Sublime Text 的文件检索功能找到特定的文件,如果项目目录下面有 node_modules、bower_components 之类的文件夹则会影响输出结果,再加上这些文件夹中的文件平时不会去改动,我们可以修改配置把这些目录忽略掉。
"folder_exclude_patterns":
 [
	".svn",
	".git",
	".hg",
	"CVS",
	"node_modules",
	"bower_components"
],
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值