大家好！今天我们暂不学习 Hook，给大家推荐一款好用的 VSCode 插件： 函数地图 - FnMap。

FnMap 的主要作用：能够 便捷逐级 展示代码文件的所有函数/变量列表。那么，这个功能在我们平时开发中具体有什么作用呢？下面我们来快速了解一下吧。

1. VSCode 自带的 outline

使用 VSCode IDE 开发的同学，如果用过它自带的大纲（ outline ）功能就会发现，虽然能够基本满足我们查看代码文件的所有函数/变量，但总觉着还是缺点什么。

outline 快捷方式演示效果如下：

可以看到，outline 的快捷方式仅支持全部展开和全部收起，如果某个函数或组件包含比较多的变量等元素时，一次性全部展开就不方便查看函数或组件的全貌了。

但，很多情况下，当我们看或写代码时，首先是了解下代码的整体结构，然后才会逐层去了解各函数的内部结构。

更加重要的是： 我们不仅是要从大纲看代码结构，更多时候需要在代码文件里查看代码结构 ，这是 outline 所不具备的。接下来让我们来看看函数地图（ FnMap ）插件是怎么满足需求的吧。

2. 函数地图 - FnMap

函数地图（ FnMap ）是独立开发大佬「陈随易」开发的一款提效插件，该插件有以下主要功能（其实 VSCode 找到这个插件，里面就有详细说明了）：

支持逐层显示代码：点击左右箭头（<、>）可以切换当前代码的显示层级（ 侧边栏和代码文件均可 ）。

支持一键展开和收起代码层级。

支持所有语言的函数和变量显示（除非 vscode 本身不支持）。

FnMap 演示效果如下：

从上面的演示图，我们也可以发现， 代码越长越能发挥出它的作用 ，我目前用得最多的就是在代码文件里最大层级折叠代码，这样能够比较快速撸清楚整个代码的结构，提效 UP！

需要提醒的是，函数地图（ FnMap ）是买断制付费插件： 20 元/3 个永久注册码 ，注册码跟电脑的机器码绑定，一般情况下都够用了（办公电脑 1 个，个人电脑 1 个，为未来换电脑预留一个，完美~）

3. 小结

好了，说了那么多，现在让我们简要总结比较一下官方自带的大纲（ outline ）功能和函数地图（ FnMap ）插件吧。