在 VS Code 中尝试

源代码管理 API

源代码管理 API 允许扩展作者定义源代码管理 (SCM) 功能。API 界面简洁而强大,可以集成多种不同的 SCM 系统到 Visual Studio Code 中,同时它们都拥有一个共同的用户界面。

VS Code SCM

VS Code 本身附带一个源代码管理提供程序,即 Git 扩展,这是此 API 的最佳参考,如果你想贡献你自己的 SCM 提供程序,它是一个很好的起点。Marketplace 中还有其他很棒的示例,例如SVN 扩展

本文档将帮助你构建一个扩展,使任何 SCM 系统都能与 VS Code 协同工作。

注意:你随时可以参考我们文档中关于 vscode 命名空间的 API 参考

源代码管理模型

SourceControl 是负责使用资源状态SourceControlResourceState 实例)填充源代码管理模型的实体。资源状态本身被组织在中(SourceControlResourceGroup 实例)。

你可以使用 vscode.scm.createSourceControl 创建一个新的 SourceControl。

为了更好地理解这三个实体之间的关系,我们以 Git 为例。考虑以下 git status 的输出:

vsce main* git status
On branch main
Your branch is up-to-date with 'origin/main'.
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

        modified:   README.md
        renamed:    src/api.ts -> src/test/api.ts

Changes not staged for commit:
  (use "git add/rm <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        deleted:    .travis.yml
        modified:   README.md

此工作区中正在发生许多事情。首先,README.md 文件已被修改、暂存然后再次修改。其次,src/api.ts 文件已被移动到 src/test/api.ts 并且该移动已暂存。最后,.travis.yml 文件已被删除。

对于此工作区,Git 定义了两个资源组:工作树索引。该组中的每次文件更改都是资源状态

  • 索引 - 资源组
    • README.md,已修改 - 资源状态
    • src/test/api.ts,从 src/api.ts 重命名 - 资源状态
  • 工作树 - 资源组
    • .travis.yml,已删除 - 资源状态
    • README.md,已修改 - 资源状态

注意同一个文件 README.md 如何成为两个不同资源状态的一部分。

Git 创建此模型的方式如下:

function createResourceUri(relativePath: string): vscode.Uri {
  const absolutePath = path.join(vscode.workspace.rootPath, relativePath);
  return vscode.Uri.file(absolutePath);
}

const gitSCM = vscode.scm.createSourceControl('git', 'Git');

const index = gitSCM.createResourceGroup('index', 'Index');
index.resourceStates = [
  { resourceUri: createResourceUri('README.md') },
  { resourceUri: createResourceUri('src/test/api.ts') }
];

const workingTree = gitSCM.createResourceGroup('workingTree', 'Changes');
workingTree.resourceStates = [
  { resourceUri: createResourceUri('.travis.yml') },
  { resourceUri: createResourceUri('README.md') }
];

对源代码管理和资源组所做的更改将传播到源代码管理视图。

源代码管理视图

当源代码管理模型更改时,VS Code 能够填充源代码管理视图。资源状态可以使用 SourceControlResourceDecorations 进行自定义。

export interface SourceControlResourceState {
  readonly decorations?: SourceControlResourceDecorations;
}

前面的示例足以填充源代码管理视图中的简单列表,但用户可能希望对每个资源执行许多用户交互。例如,当用户单击资源状态时会发生什么?资源状态可以选择提供一个命令来处理此操作。

export interface SourceControlResourceState {
  readonly command?: Command;
}

有六个源代码管理菜单 ID,你可以在其中放置菜单项,以便为用户提供更丰富的用户界面。

scm/title 菜单位于 SCM 视图标题的右侧。navigation 组中的菜单项将以内联方式显示,而所有其他菜单项将显示在 下拉菜单中。

以下三个菜单类似:

将菜单项放置在 inline 组中以使它们以内联方式显示。所有其他菜单项组将显示在通常通过鼠标右键访问的上下文菜单中。

请注意,SCM 视图支持多选,因此命令接收一个或多个资源数组作为其参数。

例如,Git 通过将 git.stage 命令添加到 scm/resourceState/context 菜单并使用这样的方法声明来支持暂存多个文件:

stage(...resourceStates: SourceControlResourceState[]): Promise<void>;

创建 SourceControlSourceControlResourceGroup 实例时,需要提供一个 id 字符串。这些值将分别填充到 scmProviderscmResourceGroup 上下文键中。你可以在菜单项的 when 子句中依赖这些上下文键。以下是 Git 如何能够为其 git.stage 命令显示一个内联菜单项:

{
  "command": "git.stage",
  "when": "scmProvider == git && scmResourceGroup == merge",
  "group": "inline"
}

scm/sourceControl 菜单是“源代码管理存储库”视图中每个 SourceControl 实例上的上下文菜单。

source control menu

scm/change/title 允许你将命令贡献到 快速差异 内联差异编辑器的标题栏,该编辑器在下文有详细描述。该命令将传递文档的 URI、文档内的更改数组以及当前内联更改差异编辑器焦点所在的更改索引作为参数。例如,以下是 stageChange Git 命令的声明,该命令贡献到此菜单,其 when 子句测试 originalResourceScheme 上下文键是否等于 git

async stageChange(uri: Uri, changes: LineChange[], index: number): Promise<void>;

SCM 输入框

源代码管理输入框位于每个源代码管理视图的顶部,允许用户输入消息。你可以获取(并设置)此消息以执行操作。例如,在 Git 中,这被用作提交框,用户在其中键入提交消息,git commit 命令会读取它们。

export interface SourceControlInputBox {
  value: string;
}

export interface SourceControl {
  readonly inputBox: SourceControlInputBox;
}

用户可以键入 Ctrl+Enter(macOS 上为 Cmd+Enter)以接受任何消息。你可以通过为 SourceControl 实例提供 acceptInputCommand 来处理此事件。

export interface SourceControl {
  readonly acceptInputCommand?: Command;
}

快速差异

VS Code 还支持显示快速差异编辑器侧边栏装饰。单击这些装饰将显示内联差异体验,你可以向其中贡献上下文命令。

SCM quick diff

这些装饰由 VS Code 本身计算。你只需向 VS Code 提供任何给定文件的原始内容即可。

export interface SourceControl {
  quickDiffProvider?: QuickDiffProvider;
}

通过使用 QuickDiffProviderprovideOriginalResource 方法,你的实现可以告诉 VS Code 与作为方法参数提供的资源 Uri 相匹配的原始资源的 Uri

将此 API 与workspace 命名空间中的 registerTextDocumentContentProvider 方法结合使用,后者允许你为任意资源提供内容,前提是提供的 Uri 与其注册的自定义 scheme 相匹配。

下一步

要了解有关 VS Code 可扩展性模型的更多信息,请尝试以下主题: