npm 包 @theia/callhierarchy 使用教程

简介

在前端开发中，调用层级关系（Call Hierarchy）是十分重要的一种语言特性，它可以在代码中快速的找到某个函数或者方法的被调用情况，便于修复代码问题和分析代码结构。 而在 VSCode 中，@theia/callhierarchy 是一个非常好用的 npm 包，它提供了一些非常方便的接口，帮助我们快速查看调用层级关系。

安装

在项目中，可以使用以下命令进行安装:

npm install @theia/callhierarchy

API 接口

首先引入 @theia/callhierarchy 包。

import { CallHierarchyService, CallHierarchyDirection, CallHierarchyItem } from '@theia/callhierarchy';

CallHierarchyItem

CallHierarchyItem 是 @theia/callhierarchy 包中用来存储层级信息的基本单元。

class CallHierarchyItem {
    uri: string;
    name: string;
    kind: SymbolKind;
    range: Range;
    selectionRange: Range;
    children?: CallHierarchyItem[];
}

它包含了以下重要属性:

• 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[] 数组信息。

prepareCallHierarchy(document: ITextDocument, position: Position): Promise<CallHierarchyItem[] | undefined>

该方法接受两个参数:

• document：文档对象。
• position：函数或方法的位置。

provideIncomingCalls

获取指定函数或方法的入栈层级信息。

provideIncomingCalls(item: CallHierarchyItem, token: CancellationToken): CallHierarchyItem[] | Promise<CallHierarchyItem[]>

该方法接受以下两个参数：

• item：要查找的 Call Hierarchy item，该项包括以下字段：

  • name：函数或方法名称。
  • uri：文件的 URI。

• token（可选）：取消操作的 token。

provideOutgoingCalls

获取指定函数或方法的出栈层级信息。

provideOutgoingCalls(item: CallHierarchyItem, token: CancellationToken): CallHierarchyItem[] | Promise<CallHierarchyItem[]>

该方法接受以下两个参数：

• item：要查找的 Call Hierarchy item，该项包括以下字段：

  • name：函数或方法名称。
  • uri：文件的 URI。

• token（可选）：取消操作的 token。

使用示例

下面，我们给出了一个示例，其中包含了如何使用 @theia/callhierarchy 这个 npm 包。

获取文件内函数或方法的层级信息

// 获取文档对象
const document = await workspace.openTextDocument(uri);

// 获取位置
const position = new Position(lineNumber, character);

// 获取 Call Hierarchy items 数组信息
const items = await new CallHierarchyService().prepareCallHierarchy(document, position);

获取某个函数或方法的入栈层级信息

// 存储 item 信息（包括 uri、函数名称等）
const item = {
    uri: '/src/index.ts',
    name: 'functionName',
};

// 获取入栈层级信息
const items = await new CallHierarchyService().provideIncomingCalls(item);

获取某个函数或方法的出栈层级信息

-- -------------------- ---- -------
-- -- ---- ----- ----------
----- ---- - -
    ---- ----------------
    ----- ---------------
--

-- --------
----- ----- - ----- --- ----------------------
     ----------------------------

注意事项

• uri 应该是打开的 ITextDocument 对象的 URI 属性；
• 如果 CallHierarchyItem 的 kind 属性是 Method，则 CallHierarchyItem 必须有一个 selectionRange 属性；
• 函数或方法的名称应该指的是其在代码中被定义时的名称，而非在调用中使用的别名。

总结

本文介绍了如何使用@theia/callhierarchy npm 包来快速查看函数或方法的调用层级信息。文章详细介绍了该 npm 包的常用 API 接口以及示例代码，希望能给大家带来帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/theia-callhierarchy