Appearance
文件、文件夹命名和规范设计
1. 命名原则
1.1 一致性原则
- 整个项目使用统一的命名风格
- 团队成员遵循相同的命名规范
- 命名风格应在项目初始化时确定并写入文档
1.2 可读性原则
- 命名应清晰、直观，能够准确表达文件或文件夹的用途
- 避免使用缩写和简写，除非是行业公认的标准缩写
- 命名长度应适中，过长或过短都不利于理解
1.3 语义化原则
- 命名应反映文件或文件夹的功能和内容
- 使用有意义的词汇，避免使用无意义的字符或数字
- 遵循领域驱动设计，使用业务领域相关的词汇
1.4 大小写原则
- 文件名：推荐使用小驼峰命名法（camelCase）
- 文件夹名：推荐使用短横线分隔命名法（kebab-case）
- 组件名：推荐使用大驼峰命名法（PascalCase）
2. 文件命名规范
2.1 通用文件命名
HTML文件：使用短横线分隔命名法
index.html user-profile.html product-detail.htmlCSS/SCSS文件：使用短横线分隔命名法
styles.css main.scss user-profile.scssJavaScript文件：使用小驼峰命名法
app.js userService.js productController.jsTypeScript文件：使用小驼峰命名法
app.ts userService.ts productController.ts
2.2 组件文件命名
React组件：使用大驼峰命名法，文件名与组件名保持一致
Button.tsx UserProfile.tsx ProductList.tsxVue组件：单文件组件使用大驼峰命名法
Button.vue UserProfile.vue ProductList.vue
2.3 特殊文件命名
配置文件：使用小驼峰命名法，通常以
.config结尾webpack.config.js vite.config.ts eslint.config.js测试文件：使用被测试文件的名称，以
.test或.spec结尾userService.test.js Button.spec.tsx类型定义文件：使用小驼峰命名法，以
.d.ts结尾types.d.ts user.types.ts
3. 文件夹命名规范
3.1 根目录结构
├── src/ # 源代码目录
├── public/ # 静态资源目录
├── dist/ # 构建输出目录
├── node_modules/ # 依赖包目录
├── config/ # 配置文件目录
├── scripts/ # 脚本文件目录
├── tests/ # 测试文件目录
├── docs/ # 文档目录
├── .git/ # Git版本控制目录
├── .vscode/ # VS Code配置目录
├── package.json # 项目配置文件
├── README.md # 项目说明文件
└── LICENSE # 许可证文件3.2 源码目录结构
src/
├── assets/ # 静态资源
│ ├── images/ # 图片资源
│ ├── fonts/ # 字体资源
│ └── styles/ # 全局样式
├── components/ # 通用组件
│ ├── Button/ # 按钮组件
│ ├── Input/ # 输入框组件
│ └── Modal/ # 模态框组件
├── pages/ # 页面组件
│ ├── Home/ # 首页
│ ├── About/ # 关于页
│ └── Contact/ # 联系页
├── services/ # 服务层
│ ├── api/ # API请求
│ └── utils/ # 工具函数
├── stores/ # 状态管理
│ ├── user.js # 用户状态
│ └── product.js # 产品状态
├── routes/ # 路由配置
├── hooks/ # 自定义 hooks
├── types/ # 类型定义
└── main.js # 应用入口3.3 命名规则
文件夹名：使用短横线分隔命名法（kebab-case）
user-profile/ # 用户资料 product-list/ # 产品列表 shopping-cart/ # 购物车组件文件夹：使用大驼峰命名法（PascalCase），与组件名保持一致
Button/ # 按钮组件 UserProfile/ # 用户资料组件 ProductList/ # 产品列表组件功能模块文件夹：使用短横线分隔命名法
user-management/ # 用户管理 order-processing/ # 订单处理 payment-gateway/ # 支付网关
4. 最佳实践
4.1 文件组织
- 按功能组织：将相关功能的文件放在同一个文件夹中
- 按类型组织：将相同类型的文件放在同一个文件夹中
- 深度适中：文件夹深度不宜过深，一般不超过4层
- 扁平结构：在功能明确的情况下，优先使用扁平结构
4.2 命名技巧
- 使用描述性名称：文件名应能准确描述文件的功能
- 避免使用数字：除非是版本号或有特殊含义
- 使用英文命名：统一使用英文命名，避免中英文混合
- 保持简洁：命名应简洁明了，避免过长
4.3 版本控制
- 忽略不必要的文件：在
.gitignore中配置忽略规则 - 保持提交信息清晰：提交信息应清晰描述更改内容
- 使用分支管理：合理使用分支进行开发和版本控制
4.4 工具和配置
- 使用ESLint：配置ESLint规则，确保代码风格一致
- 使用Prettier：配置Prettier，自动格式化代码
- 使用EditorConfig：配置EditorConfig，统一编辑器配置
5. 示例项目结构
5.1 React + TypeScript项目
├── src/
│ ├── assets/ # 静态资源
│ ├── components/ # 通用组件
│ │ ├── Button/ # 按钮组件
│ │ └── Card/ # 卡片组件
│ ├── pages/ # 页面组件
│ │ ├── Home/ # 首页
│ │ └── About/ # 关于页
│ ├── services/ # 服务层
│ │ ├── api/ # API请求
│ │ └── utils/ # 工具函数
│ ├── stores/ # 状态管理
│ ├── hooks/ # 自定义 hooks
│ ├── types/ # 类型定义
│ └── App.tsx # 应用根组件
├── public/ # 静态资源目录
├── package.json # 项目配置文件
└── tsconfig.json # TypeScript配置文件5.2 Vue + Vite项目
├── src/
│ ├── assets/ # 静态资源
│ ├── components/ # 通用组件
│ ├── views/ # 页面组件
│ ├── router/ # 路由配置
│ ├── store/ # 状态管理
│ ├── services/ # 服务层
│ └── main.js # 应用入口
├── public/ # 静态资源目录
├── package.json # 项目配置文件
└── vite.config.js # Vite配置文件6. 总结
前端项目的文件和文件夹命名规范是项目架构设计的重要组成部分，它直接影响到项目的可维护性、可读性和可扩展性。通过遵循统一的命名规范，可以提高开发效率，减少沟通成本，确保项目的长期健康发展。
在实际项目中，应根据项目的具体情况和团队的习惯，制定适合的命名规范，并在项目初始化时写入文档，确保团队成员共同遵守。同时，随着项目的发展和技术的演进，命名规范也应不断优化和更新，以适应新的需求和挑战。