LW前端代码规范
1. git分支命名规则
- 普通分支:name-type-description
例子:
aaron-fix-objList
- 临时公共分支
master-description
例子:
master-form
2. 变量命名
- 普通变量:小驼峰
例子:
userName
- 常量、枚举值:全大写+下划线分割
例子:
MAX_LENGTH
NUMBER_AUTO
3.组件属性命名
- 普通属性:小驼峰
例子:
<Com title = "标题" />
- 类型属性:大驼峰
例子:
<Com SubCom={SubTableCom} />
4.类型命名(class、interface、type、enum、namespace
)
大驼峰
例子:
class UserManager{
}
5.组件命名
大驼峰
例子:
<SubTable title="子表单" />
6.class内代码组织顺序
- 变量
- 构造函数
- 抽象方法
- 复写的方法(例如组件生命周期)
- 自定义方法
- 组件render方法
7.文件组织方式
模块下多个公用组件组合在components文件夹内
/components/SubTable
/components/StatefulTable
无样式的组件直接使用大驼峰命名文件
/SubTable.tsx
带样式组件使用大驼峰命名文件夹,内部使用index命名
/SubTable/index.tsx
/SubTable/index.css
模块下多个公用组件组合在dto文件夹内(少量类型可汇总到单个dto文件中)
/object/dto/FieldType.ts
/object/dto/FieldDetail.ts
8.注释相关
类型、函数使用说明注释
/**
* 用户管理
* @author aaron
*/
class UserManager {
/**
* 添加用户
* @param user 用户信息
* @return 结果是否添加成功
*/
addUser(user: User): boolean {
// 添加用户
...
return true;
}
}
静态变量、枚举 使用文档注释
/** 最大字数 */
export const MAX_LENGTH = 50;
export enum FieldType {
/** 单行文本 */
TEXT_SINGLE = 'TEXT_SINGLE',
/** 多行文本 */
TEXT_MULTI = 'TEXT_MULTI',
}
9.其他
函数强制加上返回类型
function processUserName(user: Uesr): string {
return userName;
}
支持ref调用的组件使用类型约束行为
interface FormInstance {
setFieldValues: (values:ValueMap) => void;
}
10.css相关
- 不推荐原子化方式
- className使用小驼峰命名方式(cs.userName)