JS项目文件目录最佳命名方式及React+TypeScript类文件命名规范问询

1. JS/TS 项目文件与目录最佳命名方式 #

不同类型的文件和目录遵循不同的命名规则，兼顾可读性和跨平台兼容性：

• 所有目录统一使用kebab-case（全小写+短横线分隔），例如 src/components/order-list、src/utils/request。可以避免不同操作系统大小写敏感规则差异导致的路径识别错误，同时和前端生态的npm包命名规则保持一致。
• 普通工具函数、自定义Hook、无主导出类/组件的通用模块，使用camelCase（小驼峰）命名，例如 useMobileDetect.ts、formatCurrency.ts。
• React 组件文件（.tsx/.jsx）统一使用PascalCase（大驼峰）命名，例如 ProductCard.tsx、DashboardLayout.tsx，和组件的导出名称保持一致，导入时可直接识别为组件类型。
• 常量、配置类文件使用snake_case（全小写+下划线分隔）命名，例如 route_config.ts、api_constants.ts。
• 单测/集成测试文件直接在对应业务文件名后加.test/.spec后缀，例如 formatCurrency.test.ts、ProductCard.spec.tsx。

2. TS类对应的文件名是否需要大写开头 #

需要，TS 类对应的文件统一使用PascalCase（大写开头的大驼峰）命名，和类的导出名称保持一致。例如你定义了一个导出类PaymentProcessor，对应的文件名就设为PaymentProcessor.ts。
这种约定的核心作用是通过文件名即可快速识别文件的导出类型：看到大写开头的文件就能判断该文件的核心导出是类（或组件、构造函数），避免和普通工具函数模块混淆。

例外场景：如果一个文件内同时导出多个零散的小类，没有唯一的核心导出类，这种情况可以用小驼峰命名文件，无需强制大写开头。

内容的提问来源于stack exchange，提问作者Houssem TRABELSI