VSCode 将图标添加到活动栏答案

【问题标题】：VSCode add icons to Activity BarVSCode 将图标添加到活动栏
【发布时间】：2022-01-14 23:59:43
【问题描述】：

如何将其他扩展图标添加到Activity Bar？
我想在源代码管理和调试图标旁边添加新的自定义图标。
我读了this page，但不明白。
我去了路径C:\Users\Moh\AppData\Local\Programs\Microsoft VS Code\resources\app 并将这个配置添加到package.json：

// etc...
"author": {
  "name": "Microsoft Corporation"
},
"license": "MIT",
"main": "./out/main",

//***************//
// I added following lines:
"contributes": {
  "views": {
    "code-runner": [
      {
        "id": "codeRunner",
        "name": "Code Runner"
      }
    ]
  }
},

// etc...

但没有任何改变。
我选择的路径正确吗？
写的配置正确吗？

【问题讨论】：

你需要贡献一个ViewContainer（活动栏中的图标），然后向这个ViewContainer贡献一个View
很遗憾，我还是没听懂。 @rioV8
你看过 ViewContainer 和 View 的示例扩展

标签： visual-studio-code vscode-settings vscode-extensions

【解决方案1】：

此代码已添加到您正在构建的扩展的package.json。如果您不知道这意味着什么，请阅读有关制作您的第一个扩展的文档。

从文档中，它可以工作：

"contributes": {

    "viewsContainers": {

      "activitybar": [

        {
          "id": "package-explorer",        (use this id for the view name below)
          "title": "Package Explorer",
          "icon": "$(heart)"               (using built-in icons, it is this easy)
        }
      ]
    },

    "views": {

      "package-explorer": [                (id from above)

        {
          "id": "package-dependencies",    (viewlets within "PAckage Explorer")
          "name": "Dependencies",
          "type": "tree"
        },
        {
          "id": "package-outline",
          "name": "Outline"
        }
      ]
    }

活动栏是ViewContainer 的一种。当您单击心形图标时，它会在侧边栏中打开一个视图，其中有两个“viewlet”：Dependencies 和 Outline。

此处讨论了内置图标：https://code.visualstudio.com/api/references/icons-in-labels，但您可以使用您自己的图标，详见此处：https://code.visualstudio.com/api/references/contribution-points#Icon-specifications

当您调试您的扩展时，您将在打开的新 vscode 窗口中看到 ViewContainer 和 View 贡献以运行您的扩展。

【讨论】：