VS Code中为自定义Webpack配置文件设置Webpack图标（vs-seti主题）

你之前的配置无效，是因为"webpack"并不是VS Code认可的语言标识符，所以files.associations无法识别这个值，自然不会加载对应的图标。在vs-seti主题下，可以通过以下两种方法实现需求：

方法1：直接自定义文件图标映射 #

在VS Code的settings.json中添加以下配置，直接为匹配的文件名模式指定Webpack图标：

"workbench.iconCustomizations": {
  "vs-seti": {
    "filePatterns": {
      "webpack*.common.js": "file_type_webpack"
    }
  }
}

这个配置会让所有符合webpack*.common.js命名规则的文件，在vs-seti主题下显示Webpack专属图标。

方法2：关联语法高亮+替换图标 #

如果需要保留这类文件的JavaScript语法高亮支持，同时替换图标，可以结合files.associations和图标自定义配置：

"files.associations": {
  "webpack*.common.js": "javascript"
},
"workbench.iconCustomizations": {
  "vs-seti": {
    "filePatterns": {
      "webpack*.common.js": "file_type_webpack"
    }
  }
}

这里先把文件关联到JavaScript语言以获得语法支持，再通过图标自定义规则替换成Webpack图标。

需要说明的是，file_type_webpack是vs-seti主题中Webpack配置文件对应的标准图标ID，直接使用即可生效。

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