Install
npx skillscat add youranreus/ai-rules/frontend-practice Install via the SkillsCat registry.
About this skill
This skill provides a set of frontend coding conventions, including file organization, type and constant extraction, and function splitting, to create maintainable and consistent code. It helps developers avoid tangled codebases and facilitates teamwork. Use it when starting a new frontend project or refactoring existing code to adopt standardized practices.
SKILL.md
编码规范
1. 基础原则
- 单一职责原则:每个文件应具有清晰、聚焦的范围/目的
- 拆分大文件:当文件过大或处理过多关注点时,应进行拆分
- 类型分离:始终将类型和接口分离到types.ts或types/*.ts文件中
- 常量提取:将常量移至专用的constants.ts文件
1.1 对于类型与常量的提取原则
- 对于原子组件或者纯UI组件,应该就近提取类型与常量至组件目录下。
- 对于业务组件,应该提取至模块目录或者
@/types等全局目录下。
1.2 函数的拆分
当编写模块/hooks,需要注意其中与状态无关的方法或者纯函数应该提取到utils.ts文件中。提取原则可以参考 「1.1 对于类型与常量的提取原则」
2. 工具
2.1 包管理工具
优先使用pnpm作为包管理工具。除非项目出现了其他包管理的对应的lock文件,否则使用pnpm。