编码规范
命名规范
目录命名
采用小写方式,中划线分隔,有复数结构时,采用复数命名法,缩写不用复数。
bash
// bad
src/styles/demoStyles
// good
src/styles/demo-styles
文件命名
采用小写方式,中划线分隔,有复数结构时,采用复数命名法,缩写不用复数。
bash
// bad
src/userManage.vue
// good
src/user-manage.vue
变量命名
采用小驼峰方式。
bash
// bad
let UserInfo;
// good
let userInfo;
常量命名
全部采用大写方式,下划线连接。
bash
// bad
const loginName;
// good
const LOGIN_NAME;
ts相关命名
bash
// 接口类型名称通常以"I"开头
interface IMyInterface { ... }
// 类型别名通常以大写字母开头
type MyType = string | number;
// 枚举类型的名称通常以大写字母开头
enum Color {Red, Green, Blue};
// 类名通常以大写字母开头
class MyClass { ... }
注释规范
可安装vscode koroFileHeader插件,能够在文件头及方法快捷插入标准注释。安装后需要在vscode首选项eslint配置中进行如下设置,其中,姓名需调整为自己的oa账号名称。
json
"fileheader.customMade": {
"Description": "",
"Author": "gaorubin", // 修改成自己的账号
"Date": "Do not edit", // 文件创建时间(不变)
"LastEditors": "gaorubin", // 文件最后编辑者
"LastEditTime": "Do not edit" // 文件最后编辑时间
},
文件头
每个业务文件需进行文件头注释,标注文件整体描述、文件创建人、创建时间、最后修改人、最后修改时间信息。
js
/*
* @Description: 用户信息相关API接口定义文件
* @Author: gaorubin
* @Date: 2023-07-02 06:29:30
* @LastEditors: gaorubin
* @LastEditTime: 2023-07-05 08:28:00
*/
方法
每个js函数都应按如下格式进行注释,需标注该方法的描述、参数、返回值。其中,参数和返回值没有可省略,若存在,需标注数据类型。
js
/**
* @description: 查询我有权限的应用信息
* @param {Number} pageNum 页码
* @param {Number} pageSize 每页查询条数
* @return {IAppList} 我的应用
*/
// 主页查询我的应用接口
export function getListForDev(pageNum: number, pageSize: number) {
return request<IAppList>({
url: `/api/system/application/listForDev?pageNum=${pageNum}&pageSize=${pageSize}`;,
data: body,
method: "POST",
});
}
常量、变量
需在常量、变量上方进行注释
js
// 系统名称
const SYSTEM_NAME = "pangea";
其他
大段的html文件
在vue文件中出现大段的template代码时,需对其进行分段注释。
判断
在if、switch等判断条件中,需针对每种条件进行注释
js
if (type === 'mobile') {
// 当类型为mobile时,...
} else {
// 其它类型
}