贡献者指南

基于团队达成的共识，贡献代码需要遵守一定准则。

风格指南

Git 提交信息格式

JavaScript/TypeScript

JavaScript/TypeScript 代码利用 ESLint 进行 Lint，配置更改需要团队达成共识。

使用 VS Code，可以安装 ESLint 和 Prettier 扩展。

在 ESLint 配置之外，还须遵守以下命名规范：

使用驼峰命名法；

// Bad
let bar_chart;

// Good
let barChart;

除类文件需要首字母大写以外，其它（文件夹、文件）均需要首字母小写；

// Bad
src/
├── Core/
|   └── event.ts
└── util/
    └── Math.ts

// Good
src/
├── core/
|   └── Event.ts
└── util/
    └── math.ts

类中保护方法、变量以单个下划线开头，允许子类覆盖（override）和外部调用；
类中私有方法、变量以双下划线开头，不允许类之外调用、覆盖；

对用户暴露的 API 不应以下划线开头；

// Bad
class Base {
  foo;
  protected foo1;  // Bad
  private foo2;

  foo3() {}
  protected foo4() {}  // Bad
  private foo5() {}  // Bad
}

class Thing extends Base {
  // override
  foo3() {
    super.foo4()
    super.foo5(); // Bad
  }
  // override
  protected foo4() {}
  // override
  private foo5() {} // Bad
}

new Thing().foo3();
new Thing().foo4(); // Bad
new Thing().foo5(); // Bad

// Good
class Base {
  foo;
  protected _foo1;
  private __foo2;

  foo3() {}
  protected _foo4() {}
  private __foo5() {}
}

class Thing extends Base {
  // override
  foo3() {
    super._foo4();
  }
  // override
  protected _foo4() {}
}

new Thing().foo3();

对于声明的方法、变量字段注释应以多行注释为主，这样才会在代码提示时附带注释信息

// Bad
class Base {
  // something
  foo;

  // something1
  foo1() {
    let foo2 = 0;

    /** something2 */
    if (foo2) {
    }
  }
}

// Good
class Base {
  /** something */
  foo;

  /**
   * something1
   */
  foo1() {
    let foo2 = 0;

    // something2
    if (foo2) {
    }
  }
}

对于一些场景，请使用一些特殊的注释标记进行标注

// TODO something
// 待解决的问题

// BUG something
// 严重的漏洞问题，应及时修复

// FIXME something
// 潜在存在的问题，但对用户影响较小，可以延后修复

// HACK something
// 为了快速解决问题采取了一些特殊方案，后续需要改进

// XXX something
// 用来标记问题，方便后续查找定位

// [ ] something1
// [x] something2
// [ ] something3
// 对待开发的功能或者待解决的问题列表，并标记进度

使用 VS Code，可以安装 Todo Tree 扩展。

CSS

组件库采用 Less 预处理器语言编写样式（CSS），并采用 CSS Modules 对 CSS 进行封装。

注意：构建产物中仅包含 JS 文件，CSS 样式将打包到 JS 代码中，其它静态资源（图片等）将会以 Data URLs 形式打包到 JS 代码中。

import styles from './index.module.less';
import bgImage from './background.png';
import bgSVGImage from './background.svg';

CSS Modules

CSS Modules 不对所有的样式文件生效，仅对文件名匹配上 /\.module(s)?\./ 的文件生效，而且类名必须以 JS 的方式添加到 DOM 元素上。例如：

import styles from 'index.module.css';

div.classList.add(styles['btn-primary']);

对于未启用 CSS Modules 的样式文件，直接 import 即可，CSS 全局有效，类名声明在 DOM 元素上即可。例如：

import 'index.css';

<div class="btn-primary"></div>;

风格指南​

Git 提交信息格式​

JavaScript/TypeScript​

CSS​

CSS Modules​

风格指南

Git 提交信息格式

JavaScript/TypeScript

CSS

CSS Modules