vscode-icons 图标命名规范：保持项目一致性的关键

想要让 Visual Studio Code 中的文件一目了然？vscode-icons 扩展正是你的理想选择！这个强大的扩展通过精心设计的图标命名规范，为数百种文件类型提供了直观的视觉标识，让代码管理变得轻松愉快。✨

为什么图标命名规范如此重要？

在大型项目中，文件数量可能成千上万，没有统一的图标命名规范会让文件识别变得困难。vscode-icons 采用了一套清晰、一致的命名体系，确保每个文件都能快速找到对应的图标。

vscode-icons 的核心命名规则

1. 基础文件类型命名

• 文件格式: file_type_语言名.svg
• 文件夹格式: folder_类型名.svg

例如：

• file_type_angular.svg - Angular 相关文件
• file_type_typescript.svg - TypeScript 文件
• folder_src.svg - 源代码文件夹

2. 特殊场景命名规则

框架特定文件：

• ng_component_ts.svg - Angular 组件文件
• nest_service_ts.svg - NestJS 服务文件

3. 版本与变体管理

当同一文件类型有多个图标变体时，vscode-icons 使用数字后缀：

• file_type_access.svg - 主版本图标
• file_type_access2.svg - 备选版本图标

如何查看完整的图标映射？

在 src/iconsManifest/supportedExtensions.ts 文件中，你可以找到完整的图标映射配置：

{
  icon: 'angular',
  extensions: ['.angular-cli.json', 'angular.json'],
  filename: true,
  format: FileFormat.svg,
}

最佳实践：保持命名一致性

1. 使用描述性名称: 图标名称应清晰反映其用途
2. 避免歧义: 确保每个图标名称都唯一对应一种文件类型
3. 遵循项目约定: 使用现有的命名模式

自定义图标的命名建议

如果你需要添加自定义图标，建议遵循：

• 使用小写字母和数字
• 用下划线连接多个单词
• 保持与现有图标库的一致性

通过遵循这些命名规范，vscode-icons 确保了整个项目的视觉一致性，让开发者在复杂的项目结构中也能快速定位所需文件。🎯

记住：好的命名规范不仅让代码更美观，更重要的是提高了开发效率！无论是 Angular 项目、React 应用还是其他任何技术栈，vscode-icons 都能为你提供最佳的视觉体验。