前端团队编码中的各项规范

[chenfei-hnu]

编码规范

前端编码规范在此项目实践中需注意的规范点

目录和文件命名

1. 目录和文件名不能以数字开头，语义化命名
2. 非特殊情况，目录和文件名默认采用 kebab-case 方式，即以全小写字母加 - 连接(新项目强制执行，旧项目根据情况尽量遵守)
3. 内容有复数结构时，采用复数形式命名，如 utils、styles

文件夹分类

api 所有后台接口声明 assets 所有图片、文件等静态资源 styles 公共样式 components 公共组件、公共容器 router 路由 icon 所有icon图标 config 常量，固定配置 lang 国际化 utils 公共工具类或函数 pages 页面，对应路由 redux 公共仓库 types TS类型声明

代码格式

1. 缩进使用2个空格或软tab设置为2个空格
2. 代码片段、变量和符号间留适当空格

语义化标签

模块容器

整体模块（页面，弹窗） main { padding: 24px; box-shadow: 0 1px 4px 0 rgba(0,0,0,.1); border-radius: 2px; background: #fff; }

顶部模块 header { display: flex; align-items: center; margin-bottom: 24px; }

内容主体

底部模块 footer { margin-top: 24px; }

侧边栏，全局快捷操作菜单

独立模块容器 文本

页面标题 h1 { font-size: 22px; font-weight: 500; color: #333333; }

Modal弹窗标题 h3 { font-size: 20px; font-weight: 500; color: #333333; }

Pop弹窗标题 h5 { font-size: 16px; font-weight: 500; color: #333333; } 副标题 sub { font-size: 12px; font-weight: 400; color: #999999; } 强调 strong { font-size: 14px; font-weight: 500; color: #333333; } 时间 time { font-size: 14px; font-weight: 400; color: #333333; } 标签 label { font-size: 14px; font-weight: 400; color: #666666; }

普通文本 p { font-size: 14px; font-weight: 400; color: #333333; } 功能

列表容器
• 列表项 li { padding: 12px 0; &:hover { background: rgba(0,0,0,0.04); } } 导航链接 a { padding: 0 2px; height: 16px; line-height: 16px; font-size: 14px; border: none; font-weight: 400; color: #2673dd; cursor: pointer; }
  展开内容 ## HTMl规范 1. 避免在元素上写 style 2. 由变量决定的className使用 class 使用 classnames 库 ## css规范 1. 由小写字母、-、数字组成 2. 全局样式 以 global 开头，.global-up-arrow 3. 根据内容、功能来命名，不依据表现形式来命名，.confirm-modal 4. 属性顺序 1、 会对其他元素位置造成影响 1）位置 position top right bottom left 2）明显影响其他元素的属性 display float flex width height margin padding transform 3) 不明显影响的属性 font-size font-weight border line-height 2、 不影响其他元素位置 color border-radius opacity background text-align 5. 超过 2 个同类属性使用缩写 margin, padding, border 6. 0 不带单位, 小数不带 0 ## JS规范 1. 使用驼峰式命名，首字母小写 2. 类名开头字母大写 3. 常量大写加_ 4. boolean 类型的变量使用 is、has 开头 5. 语句结束必须加分号 6. 特殊业务在函数内添加单行注释 或者 函数定义前加多行注释，复杂逻辑通过函数语义化命名尽量拆分达到简化目的，函数内容小于50行 7. 函数命名应该描述做什么，而不是怎么做，参数标准：小于4，超出尽量使用options 8. 变量声明放置顶端，使用全等 === 判断 9. 不要扩充内置或第三方原型 ## 其他规范 1. 提交代码不能提交console debugger 2. 不要使用魔法数字，需要判断时用常量定义 3. 所有request方法都要处理异常 ## React 规范 1. 不要使用数组的索引作为key值 2. 定义组件时，使用 interface 定义 props 属性类型，函数组件内部使用对象解构获取 props 具体属性并通过 = 号赋默认值 3. 多个函数调用 或者 useEffect 修改state状态时，尽量以函数形式通过传参的形式保证执行顺序