如何在vscode-icons扩展中添加自定义文件夹图标？

直接按下面步骤操作即可，无需修改扩展源码，后续新增规则也很方便：

• 第一步：打开VSCode用户配置文件
  用快捷键 Ctrl + ,（Windows/Linux）/ Cmd + ,（Mac）打开设置页，点击设置页右上角的「打开设置(JSON)」按钮（文档样式小图标，鼠标悬停会显示对应功能提示），进入settings.json编辑界面。
• 第二步：添加文件夹图标关联规则
  在settings.json里添加如下配置项，已预置好匹配vue、vue-dev文件夹绑定Vue图标的规则：

  "vsicons.associations.folders": [
    {
      "icon": "vue",
      "folders": ["vue", "vue-dev"]
    }
  ]
  

  说明：这里icon字段填的是vscode-icons内置的Vue图标ID，不需要额外准备图标资源。

• 第三步：触发配置生效
  按快捷键Ctrl + Shift + P（Windows/Linux）/ Cmd + Shift + P（Mac）调出命令面板，搜索并执行Icons: Apply Icons Customization命令，等VSCode自动重载窗口后，对应文件夹就会显示Vue的logo图标。

后续新增自定义规则的方法 #

• 套用内置图标：直接在vsicons.associations.folders数组里追加配置对象即可，比如要给react、react-dev文件夹绑定React图标，就追加{ "icon": "react", "folders": ["react", "react-dev"] }，执行一次生效命令就能生效。
• 套用自定义SVG图标：把准备好的SVG图标文件（文件名用全小写）放到vscode-icons扩展安装目录下的icons文件夹中，配置里icon字段填SVG文件的文件名（不带.svg后缀），再对应上要匹配的文件夹名，执行生效命令即可。

注意：配置里的文件夹名是精确匹配规则，项目中任意层级的文件夹名只要和folders数组里的字符串完全一致，就会自动套用对应图标。

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