07讲如何快速在文件、符号、代码之间跳转

今天的内容,跟之前略有些不一样。在前面的几讲里,我们的侧重点一直是 VS Code 的“编辑器”特性。编辑器命令、快捷键、多光标,无一例外都是想要提高编辑文本的效率。

但相信你还记得,在专栏的第二讲 “VS Code的Why、How 和What”里我提到过,VS Code 是想在传统编辑器和 IDE 之间找到一个平衡点,让你在编辑器上也一样能体验到 IDE 那些出色的语言支持。

今天,我们就会一起探讨, VS Code 是如何借力于编程语言支持,让代码的跳转更智能的。

文件跳转

当你在开发一个新功能或者修复一个 Bug的时候,你同时在阅读和修改的文件可能就有几个或者十几个。从资源管理器里打开文件固然方便,但是如果这个项目里的文件非常多,并且经常需要在资源管理器里寻找文件,那“眼花缭乱”的,肯定要浪费你不少宝贵的时间。

在VS Code中,解决这个问题的第一个方法,就是按下 “Ctrl+Tab”,然后继续按着 “Ctrl”键但是松开 “Tab” 键,这样你就可以打开一个文件列表,这个列表罗列了当前打开的所有文件。接下来,你可以通过按下 “Tab”键在这个列表里跳转,选择你想要打开的文件。最后选到你想打开的文件后,松开 “Ctrl” 键,这个文件就被打开了。

通过“Ctrl+Tab”组合键选择并打开文件

不过,使用这个方式切换文件,最大的问题在于,文件一旦多了,你就得不停地按 “Tab” 键,没完没了地上下跳转和挑选,这会是一个恼人的耗费时间和眼力的操作。

还好,VS Code 在命令面板里提供了一种支持搜索的文件跳转方式。当你按下 “Cmd + P” (Windows 上是 Ctrl + P)时,就会跳出一个最近打开文件的列表,同时在列表的顶部还有一个搜索框。

看到这里想必你应该明白了,你可以使用这个搜索框来快速地找到你想要的文件,然后按下 “Enter” 键直接打开,这整个过程简单而且顺畅。

按下“Cmd + P”打开最近打开的文件列表

在这里,我再分享给你一个小技巧,当你找到目标文件后,可以按下 “Cmd + Enter ” (Windows 上是 Ctrl + Enter)组合键。你会发现与上面不一样的是,这个文件在一个新的编辑器窗口中打开了(关于编辑器窗口的管理,我会在之后的章节里介绍)。

按下 “Cmd + Enter ”组合键在新窗口中打开文件

行跳转

打开某一个文件之后,你的另外一个需求可能就是要快速跳转到这个文件的某一行。你可能会想,VS Code是不是可以像Vim那样,输入“:13”就能跳转到第13行。是的,VS Code也提供了一种极为简单的方式来支持行跳转,你只需要按下 “Ctrl + g”,紧接着编辑器就会出现一个输入框。如下图所示:

按下 “Ctrl + g”,调出行输入框

你会惊喜地发现,这个输入框的第一个字符就是 “:”,在这之后输入数字,你就能够将光标快速地移动到那一行。是不是很便捷?

输入行数3,跳转到第3行

接下来我再给你介绍一个高阶组合技巧。如果你想跳转到某个文件的某一行,你只需要先按下 “Cmd + P”,输入文件名,然后在这之后加上 “:”和指定行号即可。

跳转到指定文件的指定行数

符号 (Symbols) 跳转

文件跳转和行跳转,是代码跳转的基本操作,也是日常编码中的高频操作。不过有的时候,你可能会希望能够立刻跳转到文件里的类定义,或者函数定义的位置。为了支持这种跳转,VS Code 提供了一套 API 给语言服务插件,它们可以分析代码,告诉 VS Code 项目或者文件里有哪些类、哪些函数或者标识符(我们把这些统称为符号)。

如果要在一个文件里的符号之间跳转,你只需按下 “Cmd + Shift + O” (Windows 上是 Ctrl + Shift + O),就能够看到当前文件里的所有符号。

使用 “Cmd + Shift + O”组合键,调出当前文件的符号

使用方向键,或者搜索,找到你想要的符号后,按下回车,就能够立刻跳转到那个符号的位置。如下图所示:

通过符号功能跳转到指定的代码位置

请注意,在按下 “Cmd + Shift +O”后,输入框里有一个 “@”符号,这个符号在这里的意义,我会在后面的章节里去介绍,你可以先留个心眼。这时,如果你输入 “:”,就可以将当前文件的所有符号,进行分类,这样搜索符号也就更加方便。

对当前文件的所有符号进行分类

有些语言除了提供单个文件里的符号,还支持在多个文件里进行符号跳转。比如在 VS Code 里,如果你打开了多个 JavaScript 文件,就可以按下 “Cmd + T” (Windows 上是 Ctrl + T),搜索这些文件里的符号。

通过“Cmd + T”,搜索多个文件的符号

定义 (Definition) 和实现 (implementation) 跳转

符号跳转依托于语言插件对代码的分析,已经算得上具备一定的智能特性,但是它还是不够精确。比如说我们看到某个函数的调用,想要知道这个函数的接口定义是什么样的,它的实现细节是什么样的,光靠符号跳转,还是会不方便。我们需要的是直接跳转到定义和实现的位置,Java程序员看到这里一定会深有感触。

当然,这个功能也需要语言本身的支持。比如说当你在使用 TypeScript 时,按下 F12,就可以跳转到函数的定义处。

F12跳转到函数定义的位置

也可以按下 “Cmd + F12” (Windows 上是 Ctrl + F12),跳转到函数的实现的位置。

Cmd + F12 跳转到函数实现的位置

而在书写 JavaScript 时,因为并没有接口(interface)的概念,定义和实现恰好是相同的。

JavaScript 里 F12 和 Cmd + F12 效果一样

引用 (Reference) 跳转

很多时候,除了要知道一个函数或者类的定义和实现以外,你可能还希望知道它们被谁引用了,以及在哪里被引用了。这时你只需要将光标移动到函数或者类上面,然后按下 “Shift + F12”,VS Code 就会打开一个引用列表和一个内嵌的编辑器。在这个引用列表里,你选中某个引用,VS Code 就会把这个引用附近的代码展示在这个内嵌的编辑器里。

Shift+ F12打开函数引用预览

小结

今天我介绍了如何在文件之间跳转,如何跳转到某个文件的某行代码,以及如何在编程语言插件的帮助下,跳转到符号、定义、实现和引用的位置。对这些命令和快捷键熟练掌握后,你就不用像“无头苍蝇”一样在编辑器里找代码了。

不过这并不是VS Code里代码跳转功能的全部,在之后的学习过程中,我还会给你展示更多的快捷方式,所以尽情感受你灵活的双手随心所欲地在代码之间跳转吧。


精选留言

  • 南京韶邵不说话
    只有vscode自身的功能,并不能好好工作,比如我们在webpack里面配置了路径别名,vscode就找不到定义了,这时候需要配合jsconfig来处理路径,让vscode可以正确识别别名。既然收了钱,应该讲深一点啊
    2018-09-27 07:14
    作者回复

    在介绍跳转功能的文章里,我觉得不必特地介绍某个编程语言或者框架的使用。你提的这个是个好问题,我会在后面的语言相关的文章里涉及。

    2018-09-28 08:23

  • L
    刚刚试了一下那个shift+F12的查找索引。发现只能查找到当前文件的引用。如果这个函数被export出去了就查不到了,这个是vscode的原因还是因为JS?如果换成TS就可以查到了吗?
    2018-09-27 10:22
    作者回复

    如果你说的问题是,在一个 js 文件里 export 了一个函数,在另外一个文件里引用了它但是 shift + F12 找不到,那么可以在这个项目下添加一个 jsconfig.json 文件,这个文件会让 VSCode 知道,当前这个文件夹下的文件都是属于同一个项目的,从而进行索引。jsconfig.json 这个文件的一个例子

    {
    "compilerOptions": {
    "target": "ES6"
    },
    "exclude": [
    "node_modules",
    "**/node_modules/*"
    ]
    }

    你也可以参考 https://code.visualstudio.com/Docs/languages/javascript#_javascript-projects-jsconfigjson 来修改 jsconfig

    2018-09-28 08:38

  • Geek_7070af
    F1-F12 快捷键在MacBook touch bar 下面都很难用。默认不是显示的,还要压着fn 键。如果还要shift,cmd 那么手指组合别扭,还需要两个手。虽然一定可以配置,但就没了开箱即用的良好体验。喜欢intellij的 无论定义还是引用都只需要 cmd 加 click。凭空少了一次废操作。
    2018-09-27 07:18
    作者回复

    所以我特别不想换最新的 MacBook ,不得不换了会搭配外接键盘使用

    2018-09-28 08:52

  • MirGhojam
    哈哈,这么多功能没用,只用cmd+f挨个搜索单词
    2018-09-27 02:51
  • TouchBar 上显示F1--F12 方法. 系统便好设置-键盘-快捷键-Fn功能键,右边添加应用。凡是添加了的,都默认显示f1-f12. 我为开发工具都设置了该功能, 为啥还要为这个发愁呢. 如果觉得虚拟键Fn 不好用. 那就没办法了.
    2018-09-29 11:02
  • wustzjf
    为啥我按shift + F12 一点反应也没…
    2018-09-29 09:41
    作者回复

    是跟文中同样的代码吗

    2018-10-01 02:32

  • gggwvg
    项目大了之后,查找全局符号或者查找函数引用速度非常非常慢,是没有缓存?每次重新index函数或符号吗?
    2018-09-27 15:35
    作者回复

    是的,现在 VSCode 的实现并没有做缓存

    2018-09-28 08:11

  • 冰山北极熊
    老师,我用的是python3 ,我自己定义了一个函数后,在另外一个文件引用该函数,按F12,无法跳转到该定义函数,这是为什么呢
    2018-09-27 13:39
    作者回复

    默认的 Python 支持没有添加 Intellisense ,你可以安装 Python 插件 https://marketplace.visualstudio.com/items?itemName=ms-python.python

    2018-09-28 08:42

  • 一步
    那个文件符号跳转列表,是不是就是大纲里面的列表?
    2018-09-27 10:20
    作者回复

    没错

    2018-09-28 08:17

  • 悬炫
    很好奇我们在webpack里面配置了路径别名,vscode就找不到定义了,这时候如何解决,jsconfig该怎么配置
    2018-09-27 09:27
    作者回复

    一个简单的例子

    ```
    {
    "compilerOptions": {
    "baseUrl": ".",
    "paths": {
    "ClientApp/*": ["./ClientApp/*"]
    }
    }
    }
    ```

    2018-09-28 08:29

  • 胡达
    C++好像用不了 查找所有引用(Shift+F12)
    2018-11-17 11:17
  • 小王做IT
    建议汇总个表把这么多快捷键总结一下.
    2018-10-22 00:02
  • Cherry
    老师,我的VSCODE 出事啦!笔掉在键盘上,代码里面突然空格被加重显示了,特别扭 , 找了半天没找到快捷键,老师知道吗?
    2018-10-09 15:05
    作者回复

    你这只笔比较厉害 可以修改 editor.renderWhitespace

    2018-10-10 10:16

  • Cody Yang
    提一个小建议:在书写快捷键的时候最好注意一下大小写
    2018-10-07 12:37
    作者回复

    没问题,谢谢提醒

    2018-10-09 08:59

  • wustzjf
    写示例代码 按shift + f12 可以显示引用,不过我得是c语言代码,就没有反应,有什么办法么
    2018-10-04 20:38
  • 虎虎
    有没有跳转到上次编辑的位置,上次光标的位置,这两项功能呢?比如跟踪代码之后,我想回到调用的最初位置该怎么操作。
    2018-10-02 21:17
  • L
    怎么在键盘上撤销多光标操作呢?有的时候使用了cmd+d来选中了很多的词进行一次操作以后,又要切换回鼠标点一下把所有光标变成一个
    2018-09-29 10:47
    作者回复

    这个忘了介绍了,按 Escape 键即可

    2018-10-01 02:31

  • L
    再补充一个吧,如果使用了commond+p 来打开一个文件,有的时候回想在一个新的tab页面来打开而不是一个新的窗口,其实这个时候可以使用方向键而不是entry键来打开。
    不过突然觉得实际上只需要开一个窗口就好了
    2018-09-29 09:53
    作者回复

    不错 这个我偶尔用,更多时候还是放在一个 tab 里

    2018-10-01 02:32

  • 风的叹息
    vs code对于go的开发环境搭建,vendor目录的索引如何解决呢?希望多一些怎么查找解决方案的思路和方法,感谢!
    2018-09-28 11:32
  • felix
    有个问题typescript。假如我在channel类中new一个user类,因为没有import所以会标红,黄色的解决提示我总是不知道如何才能让它确定出现,有什么快捷键可以手动找到import?就是手动出黄色的解决问题提示的快捷键?谢谢
    2018-09-28 09:46
    作者回复

    当光标在这个错误上时,你可以命令面包找到快速修复 Quick Fix,或者按下 cmd + .

    2018-10-01 02:35