Sublime Text 实用快捷键汇总

Sublime Text 是个十分好用的编辑器,众多的快捷键是一大亮点能很大地提高效率。但是快捷键实在太多,我搜集汇总了一下方便查阅,都是我觉得非常有用的快捷键。其实不需要刻意去记住,用得多了自然就熟了。

以下快捷键基于 Win 平台。

Ctrl + Shift + P

首先介绍一下这个,按下之后打开一个命令框,绝大部分的命令都可以在这里找到,并且在后面附有快捷键。包括插件的命令也包含在此。

Ctrl + R

跳转到函数定义、CSS 选择器的定义等。

F12

如果当前光标所在位置是函数名或 CSS 选择器,按下 F12 可以直接跳转到其定义。

Ctrl + ;

跳转到变量定义所在处。比如,输入 foo 会找到 var foo = ... 在哪。

Ctrl + G

跳转到指定行。

Ctrl + P

快速导航。可以快速定位项目中的文件并打开。(前提是要把目录先添加进 Sublime Text 的项目中。点击 “Project” -> “Add Folder to Projet” 添加以后,按 Ctrl + KB 看看侧边栏,如果你的目录在里面,那么就可以使用了。再次按 Ctrl + KB 关闭侧边栏。)

例如:在 Ctrl + P 中输入 style.css 可以直接打开 style.css 文件。

在此处也可以使用冒号来跳转到行,如 style.css:123 会直接打开并定位到 123 行。Ctrl + G 其实就是冒号的一个快捷用法。

使用 @ 来跳转到函数或选择器定义,如 style.css@.search 会直接打开并定位到 .search 选择器所在的位置。Ctrl + R 是冒号的快捷方式。

要跳转到变量定义可以使用 #,如 script.js#foo。其实 Ctrl + ; 就是使用 # 的另一种方式。

由于 Ctrl + P 有如此多的功能,故而得名“Go To Anything”。

Ctrl + Alt + Up/Down

多行编辑。用于在多行的同一个位置放置光标。也可以按住 Shift,然后按着右键往上/下拉,就可以同时创建多个光标。

Ctrl + 鼠标左键

可以放置多个光标,同时编辑。

Ctrl + L

选中当前行。多次按下可以连续选中多行。

Ctrl + Shift + L

假如有多个长短不一的行,要在每行都放置一个光标,如何做?按住 Ctrl 一个个点吗?太费事了,可以这么做:先 Ctrl + L 选中这些行,然后 Ctrl + Shift + L 就可以了。

Ctrl + Shift + K

删除当前行。

Ctrl + X

剪切当前行。注意你不需要选中再按 Ctrl + X,只要光标定位到本行就可以了。

Ctrl + KK

删除从光标到行尾的内容。

Ctrl + J

删除行末的换行符。效果就是下一行跑到了当前行的行尾。如果同时选中多行以后按 Ctrl + J,就是多行合并。

Ctrl + F2

在当前光标位置做标记。然后可以随时按下 F2 回到这个位置。可以同时做多个标记,按 F2 则是在各个标记间跳转。

Ctrl + Tab

切换文件。打开了多个文件以后用这个快捷键来回切换。也可以用右键 + 滚轮。或者 Alt + 数字 可以直接跳到该窗口。

Ctrl + Enter

在下方插入一行。对应的:

Ctrl + Shift + Enter

在上方插入一行。这两个非常好用,你不需要先把光标移到行尾再按回车建立新行了。

阅读全文 »

Sublime Text 的代码片段功能

很多人都和我一样喜欢用 Sublime Text,非常好用的一款编辑器,今天主要探索一下里面自带的代码片段功能。对于程序员来说代码复用是很常见的事,总有那么几段代码会在各个项目中反复地用,这种情况下,除了给它保存起来随时粘贴,还可以用一个代码片段管理工具,建立起自己的代码库。代码库的管理工具很多,不过编辑器自带的一般已经够用。

创建代码片段

打开“Tools” > “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>

这就是创建代码片段所用的模板,把第三行内容换成自己的代码就可以了。后面几行是配置项,使用前先去除注释符号。其中 <tabTrigger> 用来设置快捷键。

比如,设置 <tabTrigger>hello</tabTrigger>,在编辑器里输入 hello 然后按 Tab,代码就出来了。

编辑完要保存文件到 /Packages/User 目录(你也可以在这新建一个子目录专门存放),扩展名用 .sublime-snippet,代码片段就创建成功了。

配置项详解

<content>

这是代码的主要部分,必须放在 <![CDATA[…]]> 里。如果代码中某些字段你想手动填入,就需要用到 $,比如一个 HTML5 的例子:

<snippet>
    <content><![CDATA[
<!doctype html>
<html lang="zh-cmn-Hans">
    <head>
        <meta charset="utf-8">
        <title>$1</title>
    </head>
    <body>
        $2
    </body>
</html>
]]></content>
    <tabTrigger>html5</tabTrigger>
</snippet>

输入 html5 按下 Tab,代码出现,并且光标处于 $1 的位置。还可以指定更多 $2$3 等,按 Tab 键光标会依次跳转。按下 Esc 终止跳转过程。

还可以指定默认值,比如上例,如果用 <title>${1:Demo}</title>,按下 Tab 后,“Demo”会处于自动选中状态:

snap1

可以直接编辑,也可以按 Tab 保留。

所以 $ 在这里是一个特殊字符,如果你得代码出现了 $,需要转义成 \$

<tabTrigger>

这是触发代码片段的快捷键。

<scope>

定义代码片段可以在什么地方使用,比如 <scope>source.html</scope> 定义片段可以在 html 文件中使用,或者指定多个文件格式 <scope>source.html,source.js</scope>source 是个固定用法,记住这么用就行了,也可以写成 text.html)。Scope 在 Sublime Text 中是一个重要概念,指的是光标所在的上下文,不光可以指示所在的文件类型,还可以指示光标是否处在一对双引号之间等等,都可以用来更细致地限制在何处触发代码片段。具体可以参考文档

<descriptiom>

给片段拟一个描述信息,用以显示在提示框中:

snap2

例子

这是两个我所用的代码片段,第一个 clearfix:

<snippet>
    <content><![CDATA[
/* clearfix */
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

]]></content>
    <tabTrigger>clearfix</tabTrigger>
    <scope>source.html,source.css</scope>
</snippet>

第二个是 JS 中常用的闭包,或者叫 IIFE:

<snippet>
    <content><![CDATA[
;(function() {
    $1
})();
]]></content>
    <tabTrigger>iife</tabTrigger>
    <scope>source.html,source.js</scope>
    <description>闭包</description>
</snippet>

使用闭包避免了污染全局环境。前面的分号如果觉得奇怪也可以去掉,但有时可以防止错误的出现,比如下面例子,前一行漏加了分号,后面的闭包就导致报错了:

var a = [1, 2]
(function() {})(
  ...
)();

这时分号的作用就体现出来了。加分号,保平安。

flight