如何通过VS Code扩展为树视图项设置自定义颜色

你用FileDecorationProvider没效果是因为这个接口仅针对内置文件资源管理器中的文件/文件夹节点，自定义TreeDataProvider的树节点不属于这个范畴，所以得用下面两种方法：

方法一：直接通过TreeItem的color属性设置（最简单） #

这种方式适合快速给特定节点设置文字颜色，支持直接写颜色值或使用VSCode主题色。

示例代码 #

首先定义自定义树节点类：

import * as vscode from 'vscode';

export class CustomTreeNode extends vscode.TreeItem {
  constructor(
    label: string,
    collapsibleState: vscode.TreeItemCollapsibleState,
    isSpecialNode: boolean // 标记是否为需要变色的节点
  ) {
    super(label, collapsibleState);

    // 给目标节点设置颜色
    if (isSpecialNode) {
      // 两种写法：直接写十六进制颜色，或者用主题预设色
      this.color = '#ff4081';
      // this.color = new vscode.ThemeColor('editorError.foreground');
    }
  }
}

然后在你的TreeDataProvider实现中返回节点：

export class CustomTreeProvider implements vscode.TreeDataProvider<CustomTreeNode> {
  // 省略onDidChangeTreeData等基础实现

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

  getChildren(element?: CustomTreeNode): Thenable<CustomTreeNode[]> {
    if (!element) {
      // 根节点列表：第一个是特殊变色节点
      return Promise.resolve([
        new CustomTreeNode('特殊根节点', vscode.TreeItemCollapsibleState.Collapsed, true),
        new CustomTreeNode('普通根节点', vscode.TreeItemCollapsibleState.Collapsed, false)
      ]);
    }
    // 子节点示例
    return Promise.resolve([
      new CustomTreeNode('普通子节点', vscode.TreeItemCollapsibleState.None, false),
      new CustomTreeNode('特殊子节点', vscode.TreeItemCollapsibleState.None, true)
    ]);
  }
}

方法二：自定义CSS+Context Key（支持更复杂样式） #

如果需要设置背景色、字体粗细等更多样式，可以用这种方式，通过给节点标记context key，再用CSS匹配样式。

步骤1：在package.json中声明自定义样式 #

{
  "contributes": {
    "styles": [
      {
        "language": "css",
        "path": "./styles/custom-tree.css"
      }
    ],
    "views": {
      "explorer": [
        {
          "id": "customTreeView",
          "name": "自定义视图"
        }
      ]
    }
  }
}

步骤2：编写自定义CSS（styles/custom-tree.css） #

/* 精确匹配自定义视图中的特殊节点 */
#workbench\.view\.explorer .customTreeView .monaco-tree-row[data-context="specialNode"] {
  color: #2196f3 !important;
  font-weight: bold;
  background-color: rgba(33, 150, 243, 0.1) !important;
}

步骤3：在TreeItem中设置contextValue #

export class CustomTreeNode extends vscode.TreeItem {
  constructor(
    label: string,
    collapsibleState: vscode.TreeItemCollapsibleState,
    isSpecialNode: boolean
  ) {
    super(label, collapsibleState);

    if (isSpecialNode) {
      // 标记context key，对应CSS中的data-context
      this.contextValue = 'specialNode';
    }
  }
}

步骤4：注册树视图 #

export function activate(context: vscode.ExtensionContext) {
  const treeProvider = new CustomTreeProvider();
  vscode.window.registerTreeDataProvider('customTreeView', treeProvider);
}

内容的提问来源于stack exchange，提问作者ajayg