juniors-best-practice

Juniors 最佳实践

面向初级开发者的 React 和 TypeScript 项目最佳实践。这些规则简短实用，并按适用范围分类，旨在指导一致的代码审查、重构和新功能开发。

适用场景

以下情况可参考这些指南：

• 编写或审查 React/TypeScript 代码，以提升清晰度和一致性
• 指导初级开发者或制定团队的基本规范
• 重构代码，使其符合简单、易维护的模式
• 统一项目级实践（导入、工具、命名、提交）

按优先级划分的规则类别

优先级	类别	影响	前缀
1	初学者基础知识	HIGH	beginner-
2	TypeScript	MEDIUM	typescript-
3	React	MEDIUM	react-
4	样式	MEDIUM	styling-
5	开发工具	MEDIUM	devtools-
6	资源	LOW-MEDIUM	assets-
7	Git	LOW	git-
8	REST	MEDIUM	rest-

快速参考

1. 初学者基础知识（HIGH）

• beginner-early-return - 优先使用提前返回以减少嵌套
• beginner-double-negation - 避免使用 !isNotX 模式
• beginner-unnecessary-destructuring - 保留对象完整性以提高清晰度
• beginner-const-vs-let - 默认使用 const
• beginner-nullish-vs-or - 使用 ?? 设置默认值
• beginner-useless-return-arrow - 移除多余的 return
• beginner-uppercase-constants - 仅对稳定常量使用 UPPER_CASE

2. TypeScript（MEDIUM）

• typescript-alias-naming - 使用安全的路径别名前缀
• typescript-flat-translations - 优先使用扁平的翻译键，以减少重复

3. React（MEDIUM）

• react-string-props - 尽可能使用字符串字面量
• react-children-prop - 使用 children 进行组合
• react-extends-component - 扩展原生元素属性
• react-props-typing - 保持 props 类型定义清晰易读

4. 样式（MEDIUM）

• styling-classnames-function - 使用 clsx 设置条件类名
• styling-css-states - 优先使用 CSS 选择器处理组件状态

5. 开发工具（MEDIUM）

• devtools-formatter-linter - 使用格式化工具和代码检查工具
• devtools-sorting-imports - 保持导入有序并分组
• devtools-package-manager-lock - 使用单一包管理器

6. 资源（LOW-MEDIUM）

• assets-svg-files - 将 SVG 用作组件

7. Git（LOW）

• git-commit-convention - 使用一致的提交规范

8. REST（MEDIUM）

• rest-scalability-abstractions - 围绕可复用的传输抽象构建 REST 层
• rest-naming-openapi - 确保 REST 命名与 OpenAPI 契约一致

如何使用

阅读各个规则文件，了解详细说明和示例：

rules/beginner-early-return.md
rules/react-props-typing.md

每个规则文件都包含：

• 简要说明规则的重要性
• 错误代码示例及说明
• 正确代码示例及说明
• 补充背景信息和参考资料

完整汇编文档

如需查看包含所有规则详解的完整指南，请参阅：AGENTS.md