Skip to content

编码规范

命名规范

目录命名

采用小写方式,中划线分隔,有复数结构时,采用复数命名法,缩写不用复数。

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账号名称。

image
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 {
	 // 其它类型
}