目录规范

1. 官方组件

对于官方组件仓库，开发者主要只需关心 components、common、static 三个目录下的内容，其中：

• [MUST] 所有组件必须在 components 目录下编写
• [MUST] components 目录下的组件目录必须以 mip-xxx 的形式命名
• [MUST] components/mip-xxx 组件目录下，必须包含 ① example 示例，② vue 组件 mip-xxx.vue，③ 组件说明文件 README.md
• [MUST] components/example 目录至少包含一个使用了该组件的示例 html
• [SHOULD] common 目录用于放置公用的工具类方法如 utils.js 等 ，组件中 import 使用即可
• [SHOULD] static 目录用于放置图片、字体文件

2. 第三方（站长）组件

第三方组件仓库以项目（一个站点）的粒度来管理站长组件。所有的站长组件位于 sites 目录

• [MUST] 站长组件必须提交到 sites 目录，且以站点的名称命名，如 xiongzhang.baidu.com
• 站长组件目录结构与官方组件基本一致，规范参考上述第 1 点。
• [MUST] （补充）站长组件命名需要加上站点名称标识，如 baidu.com 下的 tab 组件，可命名为 mip-baidu-tab

欢迎补充。

from mip2.

文档规范

文档规范指的是各组件目录下的 README.md 文件的编写规范，MIP2 复用 MIP1 的规范

原文请参考 https://github.com/mipengine/mip-extensions/blob/master/docs/spec-readme-md.md

from mip2.

代码规范

JS代码规范

具体规范

• MIP 项目中 JS 代码统一都遵循 JavaScript Standard Style 规范，且必须通过 ESLint 工具审核之后才能提交，一般不允许使用 eslint-disable 来豁免检测。
• 所有样式文件必须使用 UTF-8 编码。
• 组件的脚本开发采用 ES6 和 ES Module 的编写方式。
• Vue 文件的 template 部分需要遵守 Vue 的编码规范。

尤其是在多方合作的项目开发中，遵守统一的 JS 代码规范，显得尤为重要。

2.检验工具

MIP初始化项目中，已经为开发者配置好了 ESLint 校验工具，开发者可以通过简单命令行完成代码的检验及校正工作。项目中 "eslint-config-standard" 作为 ESLint 的规范配置引入, 在 .eslintrc.json 的 "extends" 配置项中使用，不需要额外安装 standard 工具，编辑器也不需要安装 standard 插件，只需要安装 ESLint 的代码检查插件即可。
具体的命令行可以参考 package.json 文件中 scripts 的配置。

2.编辑器校正工具

除此之外，开发者也可以在编辑器中做相应的设置或引入特定的插件，让编辑器去完成部分校正工作，这里列出了部分编辑器及插件供开发者参考：

(1) Sublime Text

通过 Package Control，安装 SublimeLinter 和 SublimeLinter-contrib-standard。如果想要保存时自动格式化，还需安装StandardFormat。

(2) Atom

安装linter-js-standard。如果想要保存时自动格式化，还需安装standard-formatter。
安装standardjs-snippets 可以获得snippets特性。

(3) Visual Studio Code

安装vscode-standardjs（已经包含了自动格式化）。
安装vscode-standardjs-snippets 以获得JS snippets安装vscode-react-standard以获得React snippets。

样式开发规范

• 组件的样式开发必须遵循 Stylelint 中 stylelint-config-standard 中的规范，且必须通过 Stylelint 工具审核之后才能提交。
• 所有样式文件必须使用UTF-8编码 UTF-8 编码具有更广泛的适应性，避免不必要的麻烦，请使用此编码。
• 不允许使用ID选择器：组件的设计，需要考虑一个页面上同时存在多个组件的场景。所以组件及内部元素都不应该拥有hard code的ID属性。
• 选择器的第一层如果是标签选择器，只允许使用组件自身标签，组件的样式定义应只对组件本身以及组件内部生效。

/* good */
mip-sample span {
  color: red;
}

/* bad */
span {
  color: red;
}

• class选择器的命名必须为组件名，或以组件名为前缀。
  组件的样式定义应尽量避免对使用方页面产生影响。短小简捷的class 容易与使用方页面产生冲突。

/* good */
.mip-sample-title {
  color: red;
}

/* bad */
.title {
  color: red;
}

from mip2.

命名规范

命名规范涵盖一下几个部分

• 组件命名规范
• 组件属性命名规范
• 组件配置命名规范

组件命名规范

MIP 扩展组件仓库 下，每个 mip- 前缀的目录为一个扩展组件。其中：

• 目录名称为组件名称
• 目录名称（组件名称）必须是 mip- 为前缀的全小写字符串，以 - 分隔

组件属性命名规范

自定义属性[强制]单词全字母小写，单词间以 - 分隔

<mip-a some-attribute="xxx"></mip-a>

组件配置命名规范

MIP 自定义组件的配置项需符合 Camel 规范，不得采用中划线

<mip-a>
  <script type="application/json">
  {
      "goodAttribute": "good",
      "bad-attribute": "bad",
      "bad_arrtibute_1": "bad"
  }
  </script>
</mip-a>

from mip2.

<mip-a>
  <script type="application/json">
  {
      "goodAttribute": "good",
      "bad-attribute": "bad"
  }
  </script>
</mip-a>

1、属性可以写在本地json，也可以写在属性里
2、标签属性的规范是连字符形式

那么bad-attribute是不是更好、更兼容呢？

from mip2.

@jenkey2011

只有 HTML 和 CSS 里才是中划线命名，而写在 <script type="application/json"></script> 里的 JSON 串，我觉得它是 JS 相关的，应符合 JS 的命名规范，那么在 JS 里采用 Camel 命名，必要时可以选择 Pascal

from mip2.