关闭

Sublime使用常见技巧举例

标签: sublime Text编辑器
276人阅读 评论(0) 收藏 举报
分类:
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:Rix Tox
链接:http://www.zhihu.com/question/24896283/answer/40135140
来源:知乎

1. 更改变量名的几种方法
<img src="https://pic4.zhimg.com/d93cf0e8987e0117f3a3187cfe8e53fb_b.jpg" data-rawwidth="153" data-rawheight="46" class="content_image" width="153">
这种情况下该如何快速选中正确的内容?
第一种方法:让Cmd-D (Win: Ctrl-D)只选择同一个变量。
把光标移到第一个i后面:
<img src="https://pic4.zhimg.com/6ce2f0076218bc0af57eb60b8d6ef70b_b.jpg" data-rawwidth="159" data-rawheight="43" class="content_image" width="159">按Cmd-D (Win: Ctrl-D):按Cmd-D (Win: Ctrl-D):
<img src="https://pic1.zhimg.com/7884206f74d8d9ea74b123b96ed329ec_b.jpg" data-rawwidth="160" data-rawheight="49" class="content_image" width="160">再按一次:再按一次:
<img src="https://pic3.zhimg.com/f8c368de62bc1f18dd662b6f7401c9b2_b.jpg" data-rawwidth="152" data-rawheight="48" class="content_image" width="152">限制:选取范围中不能有别的同名同类token,如:限制:选取范围中不能有别的同名同类token,如:
<img src="https://pic2.zhimg.com/342e09c89789c07c87577b5bc1185edd_b.jpg" data-rawwidth="141" data-rawheight="45" class="content_image" width="141">第二种方法:自动选取所有同名同类token。
把光标移到第一个i后面:
<img src="https://pic4.zhimg.com/6ce2f0076218bc0af57eb60b8d6ef70b_b.jpg" data-rawwidth="159" data-rawheight="43" class="content_image" width="159">
按Ctrl-Cmd-G (Win: Alt-F3):
<img src="https://pic3.zhimg.com/f8c368de62bc1f18dd662b6f7401c9b2_b.jpg" data-rawwidth="152" data-rawheight="48" class="content_image" width="152">
限制:会将别的作用域中的同名同类token都选中,如:
<img src="https://pic4.zhimg.com/7fbe31352e237a5919f8af07ae58cc2b_b.jpg" data-rawwidth="199" data-rawheight="89" class="content_image" width="199">第三种方法:Cmd-K, Cmd-D (Win: Ctrl-K, Ctrl-D) 跳过选区。
这个方法能解决所有问题,先把光标移到第一个i后面:
<img src="https://pic4.zhimg.com/b573887a8e337ea7007cc11ba3c0db07_b.jpg" data-rawwidth="211" data-rawheight="58" class="content_image" width="211">按Cmd-D (Win: Ctrl-D):按Cmd-D (Win: Ctrl-D):
<img src="https://pic4.zhimg.com/61bcc0c1314d0d9b107f38d14032025f_b.jpg" data-rawwidth="204" data-rawheight="60" class="content_image" width="204">再按一次:再按一次:
<img src="https://pic4.zhimg.com/0a301ac65f66633c405cc173e7e8c66b_b.jpg" 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://pic1.zhimg.com/e33c3b80e3ed788424214ba77e3dd894_b.jpg" data-rawwidth="206" data-rawheight="59" class="content_image" width="206">这个token也不要,再按一次跳过:这个token也不要,再按一次跳过:
<img src="https://pic4.zhimg.com/3cb50429830cb1baf3daa714c31e76a7_b.jpg" data-rawwidth="201" data-rawheight="58" class="content_image" width="201">你会发现执行跳过选区后就不再是同名同类的token选择了,不过不要紧,我们继续跳过就好:你会发现执行跳过选区后就不再是同名同类的token选择了,不过不要紧,我们继续跳过就好:
<img src="https://pic1.zhimg.com/7fb1540e66f1a19bcaaed8f7a269c258_b.jpg" 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://pic1.zhimg.com/75d373cab8eec15fc6a58f21f17daeec_b.jpg" data-rawwidth="208" data-rawheight="64" class="content_image" width="208">然后就能正确地重命名了。然后就能正确地重命名了。

2. 自适应缩进的复制粘贴
有些情况下我们需要直接复制粘贴一段网上的代码,有些人可能会这样选中原文进行复制:
<img src="https://pic1.zhimg.com/8efbe1b2d3cad4b8729050b13d2358a0_b.jpg" 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://pic4.zhimg.com/b62dab2dddfbd87e0532bd48c2a9f9e3_b.jpg" 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://pic4.zhimg.com/b2e85b0ef5ff89b07638f311e964494b_b.jpg" 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://pic2.zhimg.com/e9c7a055163e3b8616028c12f4c2b93d_b.jpg" 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://pic1.zhimg.com/d468abbac735c3ae7e9e2ccdc30af4e0_b.jpg" 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://pic2.zhimg.com/cf33b1dc3480104de9dcfeb3dc034dcd_b.jpg" 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://pic4.zhimg.com/e0ea29374a136c7d43ba96e1490f6e63_b.jpg" 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://pic4.zhimg.com/3b8f8f288f1ba32f8660a7dcb23241cb_b.jpg" 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://pic4.zhimg.com/5bba219e45b8af90b4684a577008263b_b.jpg" 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://pic1.zhimg.com/1672896ca70d5e194d17a0e97236bac0_b.jpg" 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://pic3.zhimg.com/caf1769fddeb5fe67b5ea530e6efc4ea_b.jpg" 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://pic1.zhimg.com/0fa54bb125449f01b6228d4ea442ef80_b.jpg" data-rawwidth="166" data-rawheight="168" class="content_image" width="166">但是如果标签中间内容很多,这样的方式会比较费时。Emmet插件提供了一个非常方便的快捷键能够快速选择对应的一组标签名。首先将光标移至标签的开头或结尾:但是如果标签中间内容很多,这样的方式会比较费时。Emmet插件提供了一个非常方便的快捷键能够快速选择对应的一组标签名。首先将光标移至标签的开头或结尾:
<img src="https://pic2.zhimg.com/3a23e74bae41ee1d7fcd2bf839dc85b9_b.jpg" 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://pic1.zhimg.com/165f42daa156c52b773cecf403d35d2c_b.jpg" 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://pic3.zhimg.com/a08be3b21e78493630a8cfb268ba22a2_b.jpg" 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://pic4.zhimg.com/01df10d516dd4050d5e133613684ec23_b.jpg" data-rawwidth="229" data-rawheight="69" class="content_image" width="229">然后按Tab展开Snippet:然后按Tab展开Snippet:
<img src="https://pic1.zhimg.com/636053c68cff7f6e39ce81bfebff7fe0_b.jpg" data-rawwidth="220" data-rawheight="65" class="content_image" width="220">
6. 2空格-4空格缩进快速切换
我之前用别人代码的时候总是遇到缩进空格数跟我不同的情况,后来我学会一种方法能够处理这样的文件。比如我要将4空格缩进转成2空格缩进,首先将目标代码复制到一个独立的编辑窗口中:
<img src="https://pic1.zhimg.com/515ddda40a0a6117d5053529b4968f2c_b.jpg" data-rawwidth="292" data-rawheight="424" class="content_image" width="292">然后在编辑器右下角的缩进选项菜单中选择Tab Width: 4:然后在编辑器右下角的缩进选项菜单中选择Tab Width: 4:
<img src="https://pic3.zhimg.com/b09449e175497e63f2f18c7f22b9c656_b.jpg" data-rawwidth="249" data-rawheight="291" class="content_image" width="249">
然后在编辑器右下角的缩进选项菜单中选择Convert Indentation to Tabs:
<img src="https://pic3.zhimg.com/58bb51b159f2f2b18af3ba4be4312776_b.jpg" data-rawwidth="249" data-rawheight="291" class="content_image" width="249">然后在编辑器右下角的缩进选项菜单中选择Tab Width: 2:然后在编辑器右下角的缩进选项菜单中选择Tab Width: 2:
<img src="https://pic3.zhimg.com/72422bc7a2be7ad3c629534e53cbe682_b.jpg" data-rawwidth="249" data-rawheight="291" class="content_image" width="249">
然后在编辑器右下角的缩进选项菜单中选择Convert Indentation to Spaces:
<img src="https://pic2.zhimg.com/df008e6771d42074785a7d52daca6b7d_b.jpg" data-rawwidth="249" data-rawheight="291" class="content_image" width="249">然后你的文档就变成2空格缩进的了:然后你的文档就变成2空格缩进的了:
<img src="https://pic2.zhimg.com/500964e96433cc4e8f5941fdbfdc0db5_b.jpg" 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://pic4.zhimg.com/71ae7a744b085d502d794d647fed4d43_b.jpg" 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://pic3.zhimg.com/63a238362e3cf03363e228151c0d21b6_b.jpg" 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://pic1.zhimg.com/9c7f85fa302c0e5ce4196d800febffc4_b.jpg" 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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:13112次
    • 积分:308
    • 等级:
    • 排名:千里之外
    • 原创:17篇
    • 转载:10篇
    • 译文:0篇
    • 评论:34条
    文章存档
    最新评论