如何为VS Code代码片段扩展设置snippet prefix icon？

要给代码片段左侧设置前缀图标，需要在扩展的package.json文件中配置contributes字段，具体分两种场景操作：

使用VS Code内置图标 #

• 打开扩展根目录下的package.json
• 找到或添加contributes下的snippets配置项，给目标代码片段集合添加icon属性，值用VS Code内置图标ID：

"contributes": {
  "snippets": [
    {
      "language": "javascript",
      "path": "./snippets/javascript.json",
      "icon": {
        "light": "$(symbol-function)",
        "dark": "$(symbol-function)"
      }
    }
  ]
}

• 想要查看所有可用内置图标，打开VS Code命令面板（Ctrl/Cmd+Shift+P），输入Icons: List All Icons就能浏览完整的图标ID列表，按需替换即可。

使用自定义图标 #

• 准备适配浅色、深色主题的图标文件（建议16x16/32x32尺寸的PNG），放在扩展根目录的images文件夹下（没有就新建）
• 在package.json的snippets配置里，指定自定义图标路径：

"contributes": {
  "snippets": [
    {
      "language": "python",
      "path": "./snippets/python.json",
      "icon": {
        "light": "./images/light-snippet-icon.png",
        "dark": "./images/dark-snippet-icon.png"
      }
    }
  ]
}

• 注意路径要相对package.json的位置，同时确保.vscodeignore文件没有忽略images文件夹，不然打包后图标会丢失。

补充说明 #

目前VS Code不支持给单个代码片段设置独立图标，只能给整个语言/类型的代码片段集合设置统一图标。如果需要单个片段的个性化图标，暂时没有原生支持的方案，只能等待官方更新或借助第三方工具。

内容的提问来源于stack exchange，提问作者Kristián Maas