跳到主要内容

代码规范

参考资料​

命名规范​

见名知意

项目命名​

全部小写，以短横线连接，如：my-project-name

驼峰命名​

  • 大驼峰命名：首字母大写，后续每个单词首字母大写。如 UserInfo
  • 小驼峰命名：首字母小写，后续每个单词首字母大写。如 userInfo

目录命名​

  • 全部小写，以短横线连接
  • 有复数结构时，要采用复数命名法，如 docs、assets、components

文件资源命名​

  • 文件名不能有空格
  • 文件名包含多个单词时，单词之间以短横线连接，如 getting-started

变量命名​

  • 命名方式：小驼峰命名
  • 命名规范：类型 + 对象描述的方式
// bad
let getTitle = 'UserTable';

// good
let tableTitle = 'UserTable';
let modalTitle = '弹窗标题';

常量​

  • 命名方法：全部大写
  • 命名规范：大写字母 + 下划线
const MAX_COUNT = 100;
const URL = 'http://baidu.com';

函数命名​

  • 命名方式：小驼峰命名
  • 命名规范：前缀为动词

如：

  • set：设置某个值，如 setTreeData
  • get：获取某个值，如 getUserName
  • 事件：handle 或者 on 开始，如 handleClick、onClick、onChange

Vue 命名​

  • vue 组件首字母大写，如 MyComponent.vue
  • 组件的 name 使用大驼峰命名
  • 在声明 prop 的时候，使用小驼峰命名
  • 在模板和 JSX 中使用短横线连接
  • 在 vue-router 中使用短横线连接，如 /user-info
export default {
  name: 'MyComponent',
  props: {
    proName: {
      type: String
    }
  }
};

注释​

单行注释​

  • 单独一行：双斜线 // 与注释文字之间保留一个空格
  • 在代码后面注释：双斜线与代码和文字之间都保留一个空格
  • 注释代码：双斜线与代码之间保留一个空格
// 单独一行
setTitle();

const maxCount = 10; // 在代码后面注释

// setName();

多行注释​

  • 多行注释，第一行是 /**，最后一行是 */，其他行以 * 开始，文字与 * 之间保留一个空格
/**
 * @description 设置名称
 * @param {String} name
 */
function setName(name) {}