Easy Block

版本 0.2.1 🎉🎉🎉新增功能：document（见2.6），强烈推荐哦～🎉🎉🎉

若你正在使用MTD React或Block组件库或正在编写基于它们开发的前端自动化测试代码，并因记不清API频繁翻阅文档，那就赶快下载此插件，开启全新的代码之旅吧！

1. 安装

安装 Visual Studio Code 1.12.0 以上版本

1.1 通过命令安装

1. vscode中(Windows, Linux)系统按 Ctrl-Shift-P 或 (OSX)系统按Cmd-Shift-P
2. 选择 Install Extension
3. 选择插件 Easy Block
4. 重启 vscode

1.2 通过应用商店安装

1. 选择vscode 左侧扩展(Windows, Linux快捷键： Cmd-Shift-x；OSX快捷键：Ctrl-Shift-x)
2. 搜索mtd
3. 选择插件 Easy Block 安装
4. 重启 vscode

2. 前端编码使用

2.1 智能提示

输入<智能提示block所有组件，点击标签可快速生成常用结构代码。

2.2 快速生成代码

按照emmet格式快速生成代码，例如输入Records+按tab可生成如下代码：

可根据不同组件查询其props及props值,选择后可快速生成常用的代码段。

对于函数可快速创建对应的function，例如：onFilterValueChange 选择创建函数后可快速生成函数，并赋值给对应的props：

2.3 通过复制prd中字段说明表格生成代码

通过点击prd中表格的【复制】按钮,(表格中代码和配置可在通过配置参数copy-field-name``copy-field-type``copy-boolean-desc``block-helper.copy-icon-props,将表格列的文字与代码内容对应)，在vscode代码中执行shift+alt+cmd+f生成Form表单的代码，执行shift+alt+cmd+c生成ComplexItem表单的代码,执行shift+alt+cmd+t生成Table代码，执行shift+alt+cmd+e生成EditTable代码，也可通过右键菜单选择对应的生成方式

通过点击Axure中表格的复制,(表格中代码和配置可在通过配置参数copy-field-name``copy-field-type``copy-boolean-desc``block-helper.copy-icon-props,将表格列的文字与代码内容对应)，在vscode代码中执行shift+alt+cmd+f生成Form表单的代码，执行shift+alt+cmd+c生成ComplexItem表单的代码,执行shift+alt+cmd+t生成Table代码，执行shift+alt+cmd+e生成EditTable代码，也可通过右键菜单选择对应的生成方式

prd模板如下：(可是识别的列有：字段名称、输入类型、是否可编辑、是否必填、最大长度、icon提示信息；可支持的的输入类型如下表)

2.4 复制prd中字段增量生成代码

对于新的页面我们可以通过复制PRD来生成相应的Form或Table，但对于老的页面迭代内容，会存在字段的新增，我们进行了这种场景的支持，可以通过复制PRD更新Form/Table。

2.5 Papi to Code功能

在编码时对于Form中formItemKey及Table中dataKey的填写过程重复度高且过程繁琐，需要来回对照PRD以及Papi找到相应字段名，再进行复制粘贴。现在我们可以通过直接复制papi。

规则：通过papi中各字段注释的中文描述与Table和Form中label进行对比。

2.6 Document功能，在编写代码时快速打开组件官网功能

在编写代码时，我们经常会遇到忘记组件库属性，或者记不全的问题需要查阅文档。但打开网页找到主页与组件的过程很麻烦，重复度又高，所以我们简化了这一过程，将光标移到组件上，按 shift + command + i 即可打开网页。

2.7 本地常用代码片段保存及快速生成功能

在编写代码时，我们会有一些经常用到的代码块，或者页面的模板。我们提供了这些高频代码（或较为固定的代码）的上传功能，选中代码片段，按右键选择 上传本地代码段 根据提示填写该代码段的 前缀（prefix） 与 描述 即可。之后在文档中输入前缀即可唤出提示。

在需要删除或者编辑已上传的代码段时，可以通过 shift + command + p 打开vscode命令窗口，找到 编辑本地已上传代码段 进行编辑。

2.8 自动计算Table scroll.x

在Table的scroll属性中按 space 或输入{}，计算出当前表格的width和。同时存在'em'和'px'单位时,将‘em’值*14转换为换成'px'

2.9 根据Form自动生成Filter的itemMap内容

在Filtered的itemMap属性中按 space 或输入{}，根据Form内容生成itemMap内容

3. 自动化测试中的使用

3.1 旧项目的接入

在项目更目录下新建 jsconfig.json 文件，并填写如下配置文件,然后重启VSCode,这能保证您的 VSCode 成功获取到 cypress 包中的 cy 全局变量，以及 @block/cyplug 包中声明的自定义方法（请保证您的 @block/cyplug 版本在0.0.4以上）。

{
  "include": ["./node_modules/cypress", "e2e/**/*.js"]
}

3.2 智能提示与常用参数的补全

在链式调用的过程中，会对 api 进行智能提示，在选择后（以 [cyplug] 结尾的提示会有常用参数的补全），达到自动补全的效果：

3.3 代码框架的生成

通过 emmet 的方式可快速生成 cypress 的常用结构，输入cyplug 然后摁下Tab即可：