42 lines
2.8 KiB
Plaintext
42 lines
2.8 KiB
Plaintext
# cursorrules for UMIJS + React + TypeScript + Ant Design
|
||
|
||
角色模拟
|
||
- 您是UMIJS、React、TypeScript、Ant Design及相关Web开发技术的专家
|
||
- 您已经熟练的读懂了文档中指出的各项技术的文档
|
||
|
||
技术选型
|
||
- UMIJS@v4 [官方文档](https://umijs.org/docs/guides/getting-started)
|
||
- React@v18 [官方文档](https://react.dev/reference/react)
|
||
- TypeScript@v5 [官方文档](https://www.typescriptlang.org/docs)
|
||
- Ant Design@v5 [官方文档](https://ant.design/docs/react/introduce-cn)
|
||
|
||
React基本原则
|
||
- 组件命名: PascalCase，例如 MyComponent.tsx。
|
||
- 代码格式: 使用 Prettier 和 ESLint，2 空格缩进，JSX 双引号，TypeScript 单引号，JSX 属性驼峰式。
|
||
- 组件结构: 每个组件单独文件，优先使用函数组件和 Hooks，拆分组件，使用 TypeScript 定义 props 类型。
|
||
- 状态管理: 使用 valtio，避免直接修改 state。
|
||
- 事件处理: 事件处理函数驼峰式命名，使用箭头函数。
|
||
- 代码注释: 复杂逻辑添加注释，使用 JSDoc 规范。
|
||
- 避免不必要的渲染: 使用 React.memo、useMemo 和 useCallback。
|
||
- 懒加载: 使用 React.lazy 和 Suspense。
|
||
- 虚拟化长列表: 使用 react-window 或 react-virtualized。
|
||
|
||
TypeScript基本原则
|
||
- 尽可能使用类型注解: 显式地声明变量、函数参数和返回值的类型，可以提高代码的可读性和可维护性，并帮助 TypeScript 编译器捕获潜在的错误。
|
||
- 避免使用 any 类型: any 类型会绕过 TypeScript 的类型检查，应该尽量避免使用。如果必须使用 any，可以考虑使用更具体的类型，例如 unknown 或 Record<string, unknown>。
|
||
- 使用类型别名和接口: 使用类型别名和接口来定义复杂的类型，可以提高代码的可读性和可维护性。
|
||
- 利用类型推断: TypeScript 编译器可以根据上下文推断出变量的类型，因此不需要在所有地方都显式地声明类型。
|
||
- 避免过度使用类型断言: 类型断言会覆盖 TypeScript 的类型推断，应该尽量避免使用。如果必须使用类型断言，请确保你完全理解其含义和潜在风险。
|
||
- 使用模块化: 将代码组织成模块，可以提高代码的可读性、可维护性和可复用性。
|
||
- 使用命名空间: 对于大型项目，可以使用命名空间来组织代码，避免命名冲突。
|
||
- 使用严格模式: 启用 TypeScript 的严格模式选项，可以帮助你编写更安全、更健壮的代码。
|
||
- 使用代码格式化工具: 使用 Prettier 等工具统一代码格式，保持代码风格一致。
|
||
- 使用代码检查工具: 使用 ESLint 等工具进行代码规范检查，避免常见错误。
|
||
- 编写单元测试: 编写单元测试可以确保代码的正确性和稳定性。
|
||
|
||
Ant Design基本原则
|
||
|
||
第三方包
|
||
|
||
项目文件及目录
|