如何在VS Code扩展中修改树视图的折叠/展开内置图标？

你之前在package.json里配置的icon是侧边栏视图本身的入口图标，和树项的折叠/展开箭头无关，所以没效果。要自定义树视图的折叠/展开图标，需要通过注入自定义CSS来覆盖VS Code默认的主题样式，全程用内置图标，无需额外依赖，具体操作如下：

• 找到目标图标的内置图标名称：打开VS Code命令面板（Ctrl/Cmd+Shift+P），执行Developer: List Built-in Icons命令，弹出所有内置Codicons的列表，找到和你目标图标匹配的名称（比如你提供的图标对应chevron-right（折叠状态）和chevron-down（展开状态））。

• 创建自定义CSS文件：在你的扩展项目中新建styles/tree-icons.css文件，写入以下代码：

  /* 针对my-history-tree的折叠状态（未展开）图标 */
  #workbench\.view\.my-sidebar .tree-view-item.collapsible-icon.collapsed > .codicon {
      content: "$(chevron-right)";
  }
  
  /* 针对my-history-tree的展开状态图标 */
  #workbench\.view\.my-sidebar .tree-view-item.collapsible-icon.expanded > .codicon {
      content: "$(chevron-down)";
  }
  

  注意：选择器中的#workbench\.view\.my-sidebar对应你侧边栏视图的ID（my-sidebar），需要转义点号；可以把$(chevron-right)和$(chevron-down)替换成你找到的目标图标名称。

• 在package.json中注入CSS：修改package.json的contributes字段，添加styles配置：

  "contributes": {
    // 保留你原有的views等配置
    "styles": [
      {
        "language": "css",
        "path": "./styles/tree-icons.css"
      }
    ],
    "views": {
      "my-sidebar": [
        {
          "id": "my-history-tree",
          "name": "History",
          "contextualTitle": "History",
          "type": "tree",
          "icon": "$(briefcase)"
        }
      ]
    }
  }
  

• 测试生效：保存所有文件后，打开命令面板执行Developer: Reload Window，重新加载扩展，就能看到树视图的折叠/展开图标已经替换成你想要的内置图标了。

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