极简 VS Code 插件开发教程：用树视图绘制你的代码地图

2023-10-22 23:50:27

前言

在浩瀚的代码世界里，我们经常会迷失在层层嵌套的文件夹和文件之中，尤其是在大型项目中，代码数量众多，结构复杂，想要快速找到想要的文件或代码块，犹如大海捞针。为了解决这一痛点，VS Code 提供了强大的树视图 API，允许插件在侧边栏中渲染内容，这些内容以树的形状来展示，就像是一棵代码地图，帮助你轻松探索项目结构，快速定位文件和代码块。

Tree View API 简介

Tree View API 允许插件在侧边栏中创建树状视图，这些视图可以展示各种各样的内容，比如文件系统、项目结构、调试信息、错误列表等。Tree View API 提供了一系列丰富的接口，可以让你轻松创建和管理树视图，包括：

createTreeView：创建一个新的树视图。
setTreeDataProvider：为树视图设置数据提供程序，数据提供程序负责提供树视图中显示的数据。
refresh：刷新树视图。
expand：展开树视图中的某个节点。
collapse：折叠树视图中的某个节点。
setSelection：设置树视图中选定的节点。

Tree View API 示例

为了更好地理解 Tree View API 的用法，我们通过一个示例来介绍如何利用树视图来展示项目结构。这个示例插件名为 "Code Map”，它会在 VS Code 侧边栏中创建一个树视图，展示当前项目的文件结构。

1. 创建插件

首先，创建一个新的 VS Code 插件项目，并安装必要的依赖项。

mkdir code-map
cd code-map
npm init -y
npm install --save-dev @types/vscode @vscode/extension-telemetry

2. 实现数据提供程序

接下来，我们需要实现一个数据提供程序，它负责提供树视图中显示的数据。

// code-map/src/extension.ts
import * as vscode from 'vscode';

export class CodeMapProvider implements vscode.TreeDataProvider<vscode.TreeItem> {
  constructor() {}

  getTreeItem(element: vscode.TreeItem): vscode.TreeItem {
    return element;
  }

  getChildren(element?: vscode.TreeItem): Thenable<vscode.TreeItem[]> {
    if (!element) {
      // 获取项目根目录下的所有文件和文件夹
      return Promise.resolve(vscode.workspace.findFiles('**/*', '** /node_modules/**'));
    }

    // 获取当前节点下的所有文件和文件夹
    return Promise.resolve(vscode.workspace.findFiles(`**/${element.label}/** `));
  }
}

3. 注册树视图

最后，我们需要在插件激活时注册树视图。

// code-map/src/extension.ts
export function activate(context: vscode.ExtensionContext) {
  const provider = new CodeMapProvider();
  vscode.window.registerTreeDataProvider('code-map', provider);
}