问题描述

对于一个完整陌生的大项目源码库，如何能够快速的找到自己心中预期的目标文件甚至是目标函数？

这里我使用的开发工具是vsCode，项目是一个前端项目。（万变不离其宗，其它开发工具甚至是其它类型项目也可以找到类似的查找方法）

解决方案

vsCode全局文件搜索

默认快捷键ctrl+p即可打开如下搜索界面：

通过此方法我们可以通过文件名进行高效的文件搜索，但是前提是我们需要知道目标文件名。
例如下面就是进行搜索包含字段index的文件结果：

vsCode全局变量搜索

点击vsCode左侧工具栏的第二个功能按钮即可进行全局变量搜索：

（注：其实此完整功能是进行全局变量替换，所以在这里我们只需要使用第一个Search功能即可。）
此方式是实际中最常用的查找方式，因为很多时候我们可能只知道某个函数里面的某个变量名，并且想要通过它来找到此目标文件。
例如下面就是进行搜索包含main字段的变量结果：

devtools中Elements页面的蛛丝马迹

其实在很多时候我们甚至都不知道如何确定目标字段，因为我们能看到的只是前端UI页面的绘制效果，但是并不知道这里面所涉及的目标字段。这时候我们就通过devtools的Elements面板来寻找蛛丝马迹。
目标页面：

下面我们想知道页面中最下面一栏中的布局是在代码中的什么位置，那么我们可以通过Elements面板精准的找到目标元素：

然后我们很快的找到了蛛丝马迹：目标元素的className为table！
下一步，我们可以以table为目标变量进行全局变量搜索：

如此一来，目标元素所在文件的位置甚至是所在函数的位置即可快速得到。

devtools中React页面的蛛丝马迹

如果此时我们所运行的前端项目是使用的react框架，那么我们也可以在Components面板寻找一些蛛丝马迹。
打开刚才那个页面所对应的Components面板：

通过使用此面板中的箭头确定页面中目标元素所对应的react组件：

我们不难发现All这个元素所对应的组件名为FilterLink，那么我们接下来可以进行全局变量搜索：

在很多时候react组件名和其文件名具有一致性，所以我们还可以使用此名字进行全局文件搜索：

果不其然，决定就是它了！

结语

这篇博客讲述了四种常用的文件搜索方法，掌握这四种方式其实足以查找到九成以上的目标文件。
相信有心的朋友不难发现其实本质上只有两种方法，这里的第三种方法和第四种方法主要是帮助自己如何快速的定位自己想要寻找的目标元素，而这种手段往往在实际应用中不胜枚举，需要靠自己的有心积累。
最后，我把这篇博客中用到的源码给出，大家完全可以自己动手操练着玩玩，毕竟百闻不如一练。
源码链接：https://github.com/rookieery/TodoListApp