简介
在前端开发中，调用层级关系（Call Hierarchy）是十分重要的一种语言特性，它可以在代码中快速的找到某个函数或者方法的被调用情况，便于修复代码问题和分析代码结构。 而在 VSCode 中，@theia/callhierarchy 是一个非常好用的 npm 包，它提供了一些非常方便的接口，帮助我们快速查看调用层级关系。
安装
在项目中，可以使用以下命令进行安装:
--- ------- --------------------
API 接口
首先引入 @theia/callhierarchy 包。
------ - --------------------- ----------------------- ----------------- - ---- -----------------------
CallHierarchyItem
CallHierarchyItem 是 @theia/callhierarchy 包中用来存储层级信息的基本单元。
----- ----------------- -
---- -------
----- -------
----- -----------
------ ------
--------------- ------
---------- --------------------
-它包含了以下重要属性:
- uri（必需）：文件的 URI。
- name（必需）：函数或方法的名称。
- kind（必需）：函数或方法的类型。
- range（必需）：函数或方法在文件中的位置。
- selectionRange（必需）：函数或方法名称选中的位置。
- children（可选）：一个子级的 CallHierarchyItem 数组。
其中，SymbolKind 表示函数或方法的类型，是一个枚举类型，包括以下几个：
Module：模块。Namespace： 一些有层次结构的分组。Package： 编译器自动生成的一些文件的分组。Class：类（包括 TypeScript 中的 interface）。Method：类的 method 类型或者函数的类型。Property：对象属性或者类上面定义的属性。Field：类的成员字段类型。Constructor：类构造函数的类型。Enum：枚举类型。Interface：TypeScript 中的 interface。Function：函数类型。Variable：变量类型。Constant：常量类型。String：字符串类型。Number：数字类型。Boolean：布尔类型。Array：数组类型。Object：对象类型。Key: 表示类型的 key。
CallHierarchyService
CallHierarchyService 是一个可以根据某一个函数或方法名称提供深度信息的类,它包含了以下重要方法：
prepareCallHierarchy
获取指定文件中函数或方法的 CallHierarchyItem[] 数组信息。
------------------------------ -------------- --------- ---------- --------------------------- - ----------
该方法接受两个参数:
document：文档对象。position：函数或方法的位置。
provideIncomingCalls
获取指定函数或方法的入栈层级信息。
-------------------------- ------------------ ------ ------------------- ------------------- - ----------------------------
该方法接受以下两个参数：
item：要查找的 Call Hierarchy item，该项包括以下字段：name：函数或方法名称。uri：文件的 URI。
token（可选）：取消操作的 token。
provideOutgoingCalls
获取指定函数或方法的出栈层级信息。
-------------------------- ------------------ ------ ------------------- ------------------- - ----------------------------
该方法接受以下两个参数：
item：要查找的 Call Hierarchy item，该项包括以下字段：name：函数或方法名称。uri：文件的 URI。
token（可选）：取消操作的 token。
使用示例
下面，我们给出了一个示例，其中包含了如何使用 @theia/callhierarchy 这个 npm 包。
获取文件内函数或方法的层级信息
-- ------ ----- -------- - ----- -------------------------------- -- ---- ----- -------- - --- -------------------- ----------- -- -- ---- --------- ----- ---- ----- ----- - ----- --- ----------------------------------------------------- ----------
获取某个函数或方法的入栈层级信息
-- -- ---- ----- ----------
----- ---- - -
---- ----------------
----- ---------------
--
-- --------
----- ----- - ----- --- --------------------------------------------------获取某个函数或方法的出栈层级信息
-- -- ---- ----- ----------
----- ---- - -
---- ----------------
----- ---------------
--
-- --------
----- ----- - ----- --- ----------------------
----------------------------注意事项
uri应该是打开的ITextDocument对象的 URI 属性；- 如果
CallHierarchyItem的kind属性是Method，则CallHierarchyItem必须有一个selectionRange属性； - 函数或方法的名称应该指的是其在代码中被定义时的名称，而非在调用中使用的别名。
总结
本文介绍了如何使用@theia/callhierarchy npm 包来快速查看函数或方法的调用层级信息。文章详细介绍了该 npm 包的常用 API 接口以及示例代码，希望能给大家带来帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/theia-callhierarchy