Sublime使用技巧

Posted by JackPeng on September 10, 2018

参考:https://github.com/happypeter/happysublime

正确的 sublime 使用方式

编辑工作是非常复杂的,可以用到的技巧会很多。一个好的编辑器,必然是对这些技巧有比较好的抽象模型,只要用户理解了这个模型,就会很容易用活这个编辑器了,否则大量的技巧就会显得很杂乱。

总的来说一句话,正确使用 sublime 的方式就是:多用快捷键,少用鼠标点。不过奥秘就在于,怎么才能记住那么多得快捷键呢?

菜单项

菜单项可以稍微看看,但是都是很少用的,因为最常用的我肯定是就把快捷键记住了,不过菜单栏的存在就是一个很好的帮助记忆快捷键的资源。稍微不太常用的,可以通过呼叫命令面板来解决。

命令面板

敲 Cmd-Shift-p 就可以打开命令面板了,这个我觉得要比菜单项更好用,因为只需要敲一下要进行的操作的大概的名字,就可以自动进行模糊匹配了。很多时候要比去菜单栏中一级级的找更方便。同时弹出项目中也很多是对应有快捷键的,可以帮助记忆快捷键。

命令面板中的项目也是可以自己手动添加的,参考这里

shortcut

命令面板中如果打开 ‘key binding default’ 就可以看到 sublime 默认的快捷键绑定了。

keybinding defualt 中的命令都代表什么意义可以 参考这里

最常用的快捷键

这次来介绍常用的快捷键,一些规律性的记忆技巧,和如何管理自己的快捷键绑定。

随用随学

网上搜一下 “sublime 常用快捷键” 可以找到一些总结的很好的文档,这个就是随用随学。我这里 show 一下最常用的一些,先让你找找感觉(已改为自己习惯快捷键,力求和AS统一)。 个人习惯将ctrl和command对调,下边的cmd对应键盘上的ctrl键。 - Cmd-n 开一个新页面 - Ctrl-tab 切换到下一个tab页面 - Ctrl+shift+tab 切换到上一个tab页面 - Cmd-j 合并一行 - Cmd-d 选中当前单词,继续敲可以选中多个 - Cmd-/ 注释掉/取消注释 - Ctrl-]/[ 缩进 - Ctrl-L 选择当前行 - Ctrl+Z 撤销 - 列选择,按住 Option(Alt) 键,用鼠标左键拖动。 - command+shift+s,同AS,模糊匹配文件名 - 打开控制台,ctrl+~,

操作粒度

同一行之上,直接用左右箭头,每次移动一个字符,Alt 加上箭头,每次就可以移动一个单词,如果配合上 Cmd 就一下到头了。 这个道理在选择的时候也管用,差别就是在加上 Shift 键,例如向左选择一个单词就是 Shift-Alt-Left 。

同样的道理再试试上下箭头?怎么样,还是有规律的吧。

绑定自己的快捷键

命令面板中敲 Key Binding,会给出两项,一个是 Default 这个前面说过了,是系统默认的快捷键设置文件,这个文件是不允许改的。 如果想重新绑定快捷键,那就在 User 这一项,打开后是一个空文件。可以从 Default 中拷贝内容过来,然后自己再改。

[
  { "keys": ["shift+tab"], "command": "reindent" , "args": { "single_line": false } },
]

有一个问题,你怎么知道一个操作的精确的命令名是什么呢?用 Ctrl加 tab 键上面这个“反引号”,这样可以打开控制台,输入

sublime.log_commands(True)

这样再次执行操作就可以看到操作的精确命令名字了。

自定义

聊一下如何对 sublime 进行自定制。主要是自定制系统结构的介绍,更多的细节后面讲具体功能的时候会再聊。反正差不多哪个功能都离不开这个系统。

One Place for All

sublime 有一个很简单的特点,就是所有用户自定制的内容都会放在一个文件夹中。不同的操作系统肯定是不同的,google 一下就知道了,不过 Mac 系统下是

~/Library/Application Support/Sublime Text 3/Packages/User

写到这里的数据是不会被自动升级而被覆盖的。可以到Sublime Text->Preferences->Browse Packages 中找到这个文件夹。

熟悉 vim 编辑器的朋友可以把这个位置当成 ~/.vim/ 文件夹。而且跟 vim 一样,sublime 的配置文件也都是,继承 Unix 哲学的简单透明原则,纯文本格式的。乍一看可能因为没有图形界面,显得简陋点,但是实际上是更加好用,因为透明嘛。

配置内容到底有哪些?可以参考我的 sublime-config 仓库。

除了这些,如果安装扩展包,包也一样有自己的 Default 设置,肯定不会放在这里。包的用户自定制内容也一样要保存到这里。这样如果重装就非常方便恢复这些设置了。

Settings

其他的也有很多,但是最重要的自定制文件有两类:Key Bindings 前面已经说了,这一集来说说 Settings 。用命令面板找到 settings 看到也一样是有两项:Default 和 User。同样也是 Default 中的内容是不许改的,要改就在 User 中改,改完了的内容会保存到 Packages/User 文件夹下面。

存放到 User 文件夹下的内容会覆盖 Settings Default 中的内容。举个例子:

Settings Default 文件中

"line_padding_top": 0,
"line_padding_bottom": 0,

现在我在 Settings User 中写上

"line_padding_bottom": 7,
"line_padding_top": 7,

直接 Cmd-S 保存,不用重启,直接生效。这些内容会保存在 User/Preferences.sublime-settings 中。

设置内容的组织和优先级

可以做到,但是并不建议,settings 内容如果很多,可以分成很多个文件,各自命名方式和覆盖优先级。参考

我这里只是要提一点。就是自定制的设置直接放到 User/Preferences.sublime-settings 这个文件中,那么就是对所有打开的项目都生效了。比如如下的设置:

"file_exclude_patterns":
[
  ".DS_Store",
  "*.sublime-workspace",
  "*.scssc"
],
"folder_exclude_patterns":
[
  ".git",
  "log",
  "tmp/cache",
  ".vagrant"
],
"tab_size": 2,
"translate_tabs_to_spaces": true,

但是,这些设置有时候对于不同的项目是会有区别的,sublime 是有相应的解决方法的,就是可以通过设置 Projects 来实现。如果觉得英文看得不顺也可以参考 这里。基本思路就是给每个项目添加 xxx.sublime-project 文件,里面的配置会把 User/ 中的设置给覆盖了。不过这样还是稍微有些麻烦,除非特别必要,自己手动临时改改 User/ 中的这个 settings 文件就好。

用 Package Control 来安装扩展包

直接安装 sublime 之后,在

/Applications/Sublime\ Text.app/Contents/MacOS/Packages

默认就安装了很多功能扩展包,但是实际中依然,肯定,需要自己安装其他的包,这个可以通过 Package Control 这个工具来完成。

这一集来介绍 Package Control 的安装和使用,并演示了几个我自己常用的包。

安装 Package Control

https://packagecontrol.io/installation 可以看到 sublime3 中的安装方式,Control+反引号打开控制台,运行代码就可以安装上了,或者直接command+shift+p打开命令面板,也有安装package control的选项。

基本使用方法

Shift-Ctl-p 打开命令面板,敲 install... 就可以找到 Install Package 这个命令 。回车,就会看到 sublime 需要处理一会儿,这是去网上读取包名列表呢。出来列表之后就可以来搜索并按照我想要的包了。

比如先来安装一个颜色主题包,叫做 “RailsCasts Colour Scheme” 。安装之后,效果是:第一,在 Sublime Text 的数据区域 Installed Packages 文件夹中,多了这个包。同时 Packages/User/ 下面的文件 Package Control.sublime-settings 里面列出了这个包,这个是为了回头重装 sublime 的时候,方便恢复所有的包。第三,在 Settings User 里面指定了用这个包当颜色主题。

推荐几个非常好用的包

我的配置文件 中列出了我自己安装过的包。下面演示一下 “AdvancedNewFile”, “Git”, “SyncedSideBar” 的作用。

快速查找文件或字符串

快速找到你想要的东西,不管是字符串,还是一个文件,写代码的时候,如果你想到之后,一瞬间你的编辑器就能把它呈现在你面前,那将会非常爽。Sublime 的一大特点就是快,即使是在很大的一颗文件树下找东西也是一眨眼就完。

我的那个文件在哪?

command+shift+s ,这个打开的功能叫做 goto anything ,见 menu->Goto 。打开后,然后敲你想要的文件名就行了,支持模糊匹配的。同时支持下面几种操作形式,让定位更准确

filename:lineno
filename@css-selector
filename@function

甚至还可以直接在新打开的文件中定位字符串。

filename#searchtext

更多内容参考 这里

如果文件想要对照着来开发,可以执行分屏操作。另外,打开一个新的项目一般会开启另外一个窗口,两个窗口之间切换用 Cmd 跟上反引号。

当前文件中查找字符串

  • 首先是在本文件中查找。敲 Cmd-f 就可以打开搜索框了。Enter 查找下一处,Shift-Enter 查找上一处。 查找替换就用 Option-Cmd-f ,这个要是快捷键忘了不怕,menu->find 下面列出了。每次搜索到结果之后,敲 esc 就可以停在那里进行编辑了。

  • 另外一种方式,就是用 Cmd-d 。把光标停留在要找的单词上面,然后 Cmd-d 连续敲多次,就可以找出所有当前文件中的这个单词,而且是直接在多点编辑模式下,可以直接进行替换。

  • 如果要在一个文件夹内全局查找。鼠标右击文件夹,Find in Folder 就可以了。打开下一个匹配项用 F4,上一处 Shift-F4,不过用鼠标直接点也挺方便。

回到老地方

每次搜索或者打开新的文件,都是一次 jump 。jump 到一个新的位置我就可以执行编辑操作,但是编辑完了很多时候还想调回到 jump 前我的那个老位置,这个时候就有个 jump_back 命令可以用了,默认的快捷键是 ctrl+minus ,也就是 ctrl 加上减号。如果点得太快,back 过头了,需要反向操作 jump_forword ,就是再加上一个 shift 。

自定制代码片段

snippet 这个英文单词的意思就是,小片段。 sublime 可以让用户创建自己的 snippet 。

寻找重复操作

创建什么呢?这个不是凭空想出来的,而是要定位自己日常工作中的重复性劳动。比如我在写视频笔记的时候,用的时 github 的 jekyll 这种格式,每个页面头上都要有这样几行内容

---
layout: default
title: 标题
---

而且输入完之后还要输入一个空行,然后再来输入正文。根据这个需求,就可以 tools->developer->new snippet,会看到如下内容:

<snippet>
 <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
     <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
     <!-- <tabTrigger>hello</tabTrigger> -->
     <!-- Optional: Set a scope to limit where the snippet will trigger -->
     <!-- <scope>source.python</scope> -->
</snippet>

翻译一下:

<snippet>
 <content><![CDATA[
    这里写你想要插入的代码段
]]></content>
    <!-- Optional: 在下一句中设置一个Tab触发键来触发你的触发器 -->
     <tabTrigger>这个就是任意设置的触发键</tabTrigger>
     <!-- Optional: 设置这个触发器的范围-->
     <scope>这里设置范围</scope>
</snippet>

最终,我配置的jekyll的markdown的snippet如下:

<snippet>
	<content><![CDATA[
---
layout:post
title:${1:标题}
date:${2:日期}
catalog:true
tags:
      - ${3:标签}
---

]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>markd</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<scope>text.html.markdown</scope>
</snippet>

命名为 jekyll-header.sublime-snippet ,保存到 Packages/User 之下。这样到一个 markdown 文件中,命令面板中输入 snippet 就可以看到这个 snippet 的信息了。

如何使用

新建文本文件,命令面板set syntax:markdown,文件输入markd,按tab键,会自动插入上边的snippet代码,然后按tab可以在变量之间切换

作用范围 scope

最后来说说上面 snippet 中填写的 scope 是怎么得到的。

在 keybinding Default 中又这样的设置

{ "keys": ["super+alt+p"], "command": "show_scope_name" },
{ "keys": ["ctrl+shift+p"], "command": "show_scope_name" },

所以可以通过上面的任意一组快捷键来读取当前文件的 scope ,爆出来的内容有可能是空格隔开的多个字符串,取第一个字符串就行了。基本上各种代码文件的 scope 都是 source 打头,例如 source.js source.ruby source.python 。其他的都是以 text 打头,例如 text.html.basic text.html.markdown text.plain 等。 那么如何给一个 snippet 定义多于一个文件类型的 scope 呢?可以这样

<scope>text.html.markdown, text.plain</scope>

代码补全

前面两集 emmet 和 snippet 其实都是属于“补全”这个功能。 英文是 Completion 。总的参考文档 在这里

Tab 补全

Settings Defualt 下有这些内容

"tab_completion": true,

意思是打开一个文件,敲一个触发词,然后敲 tab 是能补全成一个片段的。这个没有什么陌生的,前面 snippets 一集,就属于这种情况。只不过不是唯一的一种情况。

根据 这里 的说明,tab 补全功能依次会在下面四个地方去找触发词,英文术语叫 Trigger 。

 1. Snippets
 2. 通过 API on_query_completions() 设置的内容,这个咱们暂时不管
 3. 专门的自动补全文件,也就是 xxx.sublime-completions    4. 当前文件中已经敲过的词

上面这四个地方找到的触发词都会出现在 “补全列表” 中。例如在一个 markdown 文件中,已经敲过了 test 这个单词,并且也知道前面一集也定义了 top 这个 snippet 。那么敲一下 t 如何才能看到这个补全列表呢?

Keybinding Default 中有相关设置:

{ "keys": ["ctrl+space"], "command": "auto_complete" },

意思是只要敲 ctrl+space 快捷键,就可以看到跟自动补全一样的效果了。但是我这里 ctrl+space 用来切换中文输入法了,所以要在 Keybinding User 中改一下

{ "keys": ["alt+space"], "command": "auto_complete" },

这样就可以了。如果列表中只有一项,那么直接敲快捷键就补全出来了。如果有多项,每次敲一下可以跳到下一项。选中可以敲 tab 或者 Enter 。

自定制补全文件

来说说列表中提到的第三项补全文件。看怎么来自己添加触发词。参考:Completion Files

自动补全

参考 这里

“自动补全”并不说又有了一种新的补全方式。而只是说输入了触发词,那么不用敲 tab ,就可以显示可能的触发词了,默认只要敲 Enter 就可以补全了。

这个功能也是在 Settings - Default 中默认就设置好的:

"auto_complete": true,

但是,自动补全的不是在每种文件类型中都会被触发的,Settings Default 中是这样设置的

// Controls what scopes auto complete will be triggered in
"auto_complete_selector": "source - comment, meta.tag - punctuation.definition.tag.begin",

// Additional situations to trigger auto complete
"auto_complete_triggers": [ {"selector": "text.html", "characters": "<"} ],

有一个问题是这时候,自动补全生效的时候,回车就不能用来换行了,怎么解决?

Settings Default 下面有

"auto_complete_commit_on_tab": false,

在 Setting User 中

"auto_complete_commit_on_tab": true,

这样就可以敲 tab 来补全,而 Enter 现在就可以用来输入换行了。

最后,如果觉得还是补全的不够丰富,可以看看 http://sublimecodeintel.github.io/SublimeCodeIntel/

批处理任务 build system

Sublime 中有一个很有用的功能: build system,可以通过菜单->Tools->Build System查看,其作用是编译/运行代码,正因为有了这个功能 Sublime 才能成为合格的 IDE,否则就只是一个普通的文本编辑器罢了。build system 的本质是:当你执行 build 命令时(Ctrl+B),sublime 将在后台执行一段定义好的 shell 命令。

既然是执行 shell 命令,那自由度就大了去了,你可以老老实实编译你的脚本,也可以做任何你想做的事情,比如打开一个应用、放一段音乐等等。如此大尺度的自定义功能,何不尝试一下!?

下面是1个小例子,更多高端功能请自行开发~

1. 在浏览器中打开 html 文件

在浏览器中打开 html 文件想必是 前端ers 使用最频繁的功能了,但 sublime 并没有对应的原生命令可用,通常我们需要借助SideBarEnhancements这款插件来实现,它提供了open_in_browser这一命令。

现在我们就尝试使用 Sublime 的 build system 来实现这一功能:

  • 新建一个 build system:选择菜单->Tools->Build System->New Build System…,打开一个新的.sublime-build文件。里面会有一些初始内容,如下:

        {
      	     "shell_cmd": "make"
       }
    
  • 将以下内容复制进去,覆盖掉原始内容,然后以文件名open_html.sublime-build保存在默认目录即可。

      { "cmd": ["/Applications/Google Chrome.app/Contents/MacOS/Google Chrome", "$file"], "selector": "text.html" }
    

注意,根据 这里 的说明,selector 生效的前提是 menu->tools-> build system->Automatic 设置为 true 。

保存到 User/ 之下,名字叫 browse.sublime-build