如何实现类似VSCode的多扩展名文件类型检测功能？

问题场景 #

VS Code的文件夹面板会根据文件扩展名显示对应图标，我想复刻这一功能，但处理多扩展名文件（如.tsconfig.json、index.index.tsconfig.json）时遇到了问题：需要确保图标仅依据末尾的完整扩展名组匹配（比如忽略前面的index、cc等前缀扩展名，只以最后的tsconfig.json为准）。文件类型规则存储在JSON数组中，该如何实现这一判断逻辑？

解决方案 #

核心思路 #

从文件名末尾出发，生成从长到短的候选扩展名组合，优先匹配最长的有效规则——这样就能保证复合扩展名（如.tsconfig.json）会被优先识别，而非被更短的子扩展名（如.json）提前匹配。

具体实现步骤 #

1. 拆分文件名：提取文件名中从第一个.开始的后缀部分，比如index.index.tsconfig.json的后缀是.index.tsconfig.json。
2. 生成候选列表：从后缀的末尾开始，依次截取不同长度的扩展名组合。以.index.tsconfig.json为例，候选列表为：
   • .tsconfig.json
   • .json
3. 匹配规则JSON：遍历候选列表，逐个和JSON中的文件类型规则对比，找到第一个匹配项后立即返回对应图标。
4. 默认兜底：若所有候选都不匹配，返回默认图标。

代码示例（JavaScript） #

假设你的文件类型规则JSON结构如下：

[
  {
    "name": "TypeScript配置文件",
    "extensions": [".tsconfig.json"],
    "icon": "tsconfig-icon"
  },
  {
    "name": "JSON文件",
    "extensions": [".json"],
    "icon": "json-icon"
  },
  {
    "name": "JavaScript文件",
    "extensions": [".js"],
    "icon": "js-icon"
  }
]

匹配逻辑实现：

function getFileIcon(fileName, fileTypes) {
  // 处理无扩展名的文件
  const firstDotIndex = fileName.indexOf('.');
  if (firstDotIndex === -1) return 'default-icon';

  const fullSuffix = fileName.slice(firstDotIndex);
  const candidateExtensions = [];

  // 从后缀中提取所有可能的扩展名（从长到短）
  let currentDotPos = fullSuffix.indexOf('.', 1);
  while (currentDotPos !== -1) {
    candidateExtensions.push(fullSuffix.slice(currentDotPos));
    currentDotPos = fullSuffix.indexOf('.', currentDotPos + 1);
  }
  // 最后加上最基础的完整后缀（如.json）
  candidateExtensions.push(fullSuffix);

  // 遍历候选，找到第一个匹配的规则
  for (const ext of candidateExtensions) {
    const matchedType = fileTypes.find(type => type.extensions.includes(ext));
    if (matchedType) {
      return matchedType.icon;
    }
  }

  return 'default-icon';
}

// 测试示例
const testFiles = ['.tsconfig.json', 'index.index.tsconfig.json', 'app.js', 'readme.md'];
// 假设已导入规则文件
const fileTypes = require('./file-types.json');

testFiles.forEach(file => {
  console.log(`${file} 对应的图标：${getFileIcon(file, fileTypes)}`);
});

关键说明 #

• 最长匹配优先：通过从后缀内部的.位置逐步截取，确保复合扩展名先被检测，完全贴合VSCode的匹配逻辑。
• 兼容任意嵌套扩展名：无论文件名前有多少个.分隔的前缀，都只会从末尾提取有效扩展名组合，不会被干扰。

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