juniors-best-practice

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Juniors Best Practice

初级开发者最佳实践

Juniors-focused best practices for React and TypeScript projects. The rules are short, practical, and organized by scope to guide consistent code reviews, refactoring, and new feature work.

面向React和TypeScript项目的初级开发者最佳实践。这些规则简洁实用，按领域分类，可指导一致的代码评审、重构和新功能开发工作。

When to Apply

适用场景

Reference these guidelines when:

Writing or reviewing React/TypeScript code for clarity and consistency
Teaching junior developers or establishing baseline team conventions
Refactoring code to align with simple, maintainable patterns
Standardizing project-wide practices (imports, tooling, naming, commits)

参考这些指南的场景：

编写或评审React/TypeScript代码以确保清晰性和一致性
指导初级开发者或建立团队基础规范
重构代码以契合简洁、可维护的模式
标准化全项目实践（导入、工具、命名、提交）

Rule Categories by Priority

按优先级划分的规则类别


beginner-
typescript-
react-
styling-
devtools-
assets-
git-

Priority	Category	Impact	Prefix
1	Beginner Foundations	HIGH	`beginner-`
2	TypeScript	MEDIUM	`typescript-`
3	React	MEDIUM	`react-`
4	Styling	MEDIUM	`styling-`
5	Devtools	MEDIUM	`devtools-`
6	Assets	LOW-MEDIUM	`assets-`
7	Git	LOW	`git-`


beginner-
typescript-
react-
styling-
devtools-
assets-
git-

优先级	类别	影响程度	前缀
1	入门基础	高	`beginner-`
2	TypeScript	中	`typescript-`
3	React	中	`react-`
4	样式	中	`styling-`
5	开发工具	中	`devtools-`
6	资源	低-中	`assets-`
7	Git	低	`git-`

Quick Reference

快速参考

1. Beginner Foundations (HIGH)

1. 入门基础（高优先级）

```
beginner-early-return
```
- Prefer early returns to reduce nesting
```
beginner-double-negation
```
- Avoid
```
!isNotX
```
patterns
```
beginner-unnecessary-destructuring
```
- Keep objects intact for clarity
```
beginner-const-vs-let
```
- Default to const
```
beginner-nullish-vs-or
```
- Use ?? for defaults
```
beginner-useless-return-arrow
```
- Remove redundant return
```
beginner-uppercase-constants
```
- Use UPPER_CASE only for stable constants

```
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)

2. TypeScript（中优先级）

```
typescript-alias-naming
```
- Use safe path alias prefixes

```
typescript-alias-naming
```
- 使用安全的路径别名前缀

3. React (MEDIUM)

3. React（中优先级）

```
react-string-props
```
- Use string literals when possible
```
react-children-prop
```
- Use children for composition
```
react-extends-component
```
- Extend native element props
```
react-props-typing
```
- Keep props typing readable

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

4. Styling (MEDIUM)

4. 样式（中优先级）

```
styling-classnames-function
```
- Use clsx for conditional classes
```
styling-css-states
```
- Prefer CSS selectors for component states

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

5. Devtools (MEDIUM)

5. 开发工具（中优先级）

```
devtools-formatter-linter
```
- Use formatter and linter
```
devtools-sorting-imports
```
- Keep imports ordered and grouped
```
devtools-package-manager-lock
```
- Use a single package manager

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

6. Assets (LOW-MEDIUM)

6. 资源（低-中优先级）

```
assets-svg-files
```
- Use SVGs as components

```
assets-svg-files
```
- 将SVG作为组件使用

7. Git (LOW)

7. Git（低优先级）

```
git-commit-convention
```
- Use consistent commit conventions

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

How to Use

使用方法

Read individual rule files for detailed explanations and examples:

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

Each rule file contains:

Brief explanation of why it matters
Incorrect code example with explanation
Correct code example with explanation
Additional context and references

阅读单个规则文件以获取详细说明和示例：

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

每个规则文件包含：

规则重要性的简要说明
错误代码示例及解释
正确代码示例及解释
额外背景信息和参考资料

Full Compiled Document

完整编译文档

For the complete guide with all rules expanded:

AGENTS.md

包含所有扩展规则的完整指南：

AGENTS.md