体验Sublime Text 2更多的功能

注：该文为翻译版。 原文请见http://www.creativebloq.com/web-design/get-more-out-sublime-text-2-10134873

 

    在首次发布数年后，Sublime Text 2 目前已经成为全世界范围内开发者使用最广的文本编辑器。由于它闪电般的响应时间，高可配置性以及一系列的杀手级特性，这样的结果似乎也是理所当然了。

 

    在本文中，作者将会给大家带来一系列能够提高你开发效率的的使用小技巧。

 

>>快速导航

 

    在任何一个正式项目中，如何快速遍历你的代码库对于提高开发效率来说非常重要。虽然 Sublime text 2 提供了一个侧边导航栏来帮助你遍历你代码库中的各个目录和文件，但当你的文件数百上千的时候，这似乎也变成了一个巨大的体力活。

    幸运的是，通过使用"Goto Anything"功能可以给你带来巨大帮助。 使用 Cmd/Ctrl+P 组合键可以弹出一个包含你项目中的所有文件并提供自动补全功能的下拉列表。你可以键入任何内容从而使用 Sublime Text 2 提供的模糊匹配功能来过滤结果以快速的定位你要打开的文件。

 

 

>通过使用 Sublime Text 2 强大的快键命令功能来使你成为键盘流高手

 

     如果你有一个MyAwesomeThinger.js的文件，你只需要在列表中输入"MAT"即可以快速的定位到它。如果你同时还有一个MyAwesomeThinger.css文件，你只需要输入“MATcss"即可。模糊匹配的功能同样可以实现跨路径的匹配，因此当你输入"tesMAT"，你就可以快速的匹配到你的tests/MyAwesomeThinger.js的文件。

     因此你可以极其快速的找到你的文件。但是这还不是“Goto Anything"所有的功能。就像它的名字所暗示的那样，它并不是只用于匹配文件的。如果你能够知道你的错误信息中的某行的行号的话，你可以通过输入:<number>来快速的定位到那一行。

     例如，如果你想定位到文件的第123行，输入"MAT:123"即可。如果你想定位一个函数，你甚至可以通过输入@<function name>来达到目的。例如输入MAT@render。当然:和@也可以用来在当前文件中达到同样的检索目的。

 

>>更好的帮你记住快捷命令

     Sublime Text 2 拥有一大堆令人激动的功能；但是想要记住所有功能的快捷键太难了，而通过查找目录来查询有太麻烦。幸运的事，使用"command palette(Cmd/Ctrl+Shift+P)"功能可以带来巨大的帮助。就像"Goto Anything"功能那样， "command palette"功能也提供一个拥有模糊匹配和自动补全功能的下拉列表。使用它可以很容易的找到你想要使用的快捷命令。

     想不起来怎么隐藏侧边导航栏？你只需要在"command palette"中输入sidebar, 就可以看到所有与sidebar有关的快键命令。想要将你的代码块折叠起来？输入fold试一试。你还可以看到命令所对应的快捷键显示在结果中，从而帮你更好的记住它们。

 

>>学习使用mutiselection功能

      Sublime Text 2 搞定了很多不错的事情，但mutiselection绝对是其中最好的一件。那些使用如java那样的静态语言的程序员们可以通过他们的IDE获得许多的帮助，尤其是像重命名变量这样的功能。multiselection可以在这方面提供帮助。精通这项功能的话绝对可以给编码人员带来神一样的感觉。

     共有6种方式来启用mutiselection功能：

 

• Add next/previous line(在OS X上使用Cmd+Ctrl+up/down, 在Linux/Windows上使用Ctrl+Alt+up/down) (注：这个我在windows上试用了一下，貌似不成功)
• 使用Cmd/Ctrl+click来增加一个选择光标
• Split into lines (Cmd/Ctrl+Shift+L)(注：这个我在windows上也试用不成功)
• Alt+鼠标拖拽 (OS X) 或 Shift+鼠标右键拖拽 (Linux/Windows)
• 快速增加下一个匹配选择项-Quick Add Next(Cmd/Ctrl+D)
•  快速找到所有匹配选择项-Quick Find All(在OS X上使用Cmd/Ctrl+G，在Linux/Windows上使用Alt+F3)

     其中最后一项是最常使用的。通过使用它可以快速的控制你所要选择的项目，而不必使用鼠标。而通过使用Quick Add Next，你可以快速的同时选中一个与你当前所选项目相同的最近的匹配项。显然，这样你就可以同时修改你的变量名了。

    Quick Add Next 并不只限制于修改变量名，它也可以用于修改标示符。比如，你可以做这样的样式调整：通过选中){来在它们中间增加空格。同时为了实现更细粒度的控制，你还可以使用Quick Skip Next(Cmd/Ctrl+K)来跳过一个选择，或使用Undo Selection(Cmd/Ctrl+U)来回退一个选择操作

 

 

>Goto Anything功能可以让你快速的在你的项目中进行遍历

 

     当然在使用mutiselection功能前，你应当知道你要使用它来达到什么目的。当然使用copy/paste也可以达到你的目的，使用command palette也可以，因此你可以快速的通过你的旧代码来构建新代码。让我们用一个实例来看一下：

 

 

<div id="animal" data-favourite-animal="dog">Dog</div>
<div id="colour" data-favourite-colour="blue">Blue</div>
<script>
  var favouriteAnimal = document.getElementById('animal').dataset('favourite-animal');
  var favouriteColour = document.getElementById('colour').dataset('favourite-colour');
</script>

 

 

 

    上面的例子中，有两个使用data属性的div，以及一些用于抽取data属性值的js代码。剩下的任务就是指定datasets的key值了，也就是这里的favouriteAnimal和favouriteColour中要使用的(在javascript中，这里的data属性应当自动的使用驼峰式声明)[1]。我们可以通过使用以下方式来做到：

 

 

• 将光标置于第一个div中的favourite处
•  使用一次Cmd/Ctrl+D来选中整个单词，然后在使用一次来选中下一行中的favourite
•  按住Cmd/Ctrl+Shift，然后按若干次右移键(→ )来将后边的词语加入选中状态中(favourite-animal和favourite-colour现在应该已经被选中了)
• 拷贝选中的内容
• 通过使用Cmd/Ctrl+Click来在dataset方法调用(dateset('')调用)中设置多个选择光标，然后将内容粘贴进去。

     现在我们就可以得到一下新代码：

 

 

var favouriteAnimal = document.getElementById('animal').dataset('favourite-animal');
var favouriteColour = document.getElementById('colour').dataset('favourite-colour');

 

 

    非常接近了！接下来我们需要将keys转换成驼峰式。

 

• 选中favourite与animal中的连字符，然后使用Cmd/Ctrl+D同时选中之后的一个
• 删掉连字符
• 使用Cmd/Ctrl+Shift+right来选中之后单词的第一个字母，这时animal的a和colour的c应当已被选中
• 激活command palette(Cmd/Ctrl+Shift+P)然后键入upper来找到并激发转为大写字符的功能。搞定!

 

var favouriteAnimal = document.getElementById('animal').dataset('favouriteAnimal');
var favouriteColour = document.getElementById('colour').dataset('favouriteColour');

 

 

 

>Sublime Text 2 的界面, 这里显示的是默认的Monokai colour主题

 

 

>>继续探索

     本文中，我们接触到了Sublime Text 2一部分功能。当然还有好多功能我们还没有探讨，大家可以在command palette中寻找更多的功能，并且尝试使用multiselection功能。另外还可以考虑一下在这之前你如何在其他编辑器中实现同样的功能。

 

 

[1]关于html5 dataset使用方式，请看http://www.cnblogs.com/atree/archive/2011/08/24/HTML5-Dataset.html