规范化插件说明文档

alvinhui commented 4 years ago

目标

提升用户使用体验。

手段

根据模板规范所有插件的说明文档：

仅更新插件，不更新套件（即不需要更新 extensions/iceworks/*.md）。
请同时更新插件的 README.md 和 README.en.md
确保使用的是最新版本的插件（通过对比插件市场的插件版本和本地插件版本）
VS Code 窗口的截图和录屏：（参考）
- 尺寸：需确保在一篇文档内所有截图使用同一尺寸。
  - 1024*768（VS Code 默认窗口大小）或
  - 1440*900（13 寸笔记本全屏）
- 只包含 VS Code 窗口（不包含系统边栏、桌面或其他不相关的内容）
- VS Code 窗口中的活动栏和侧边栏大小在所有的截图和录屏中需始终保持一致（参考尺寸）
代码编辑区截图和录屏：（参考）
- 尺寸：764*724
- 只包含代码编辑区（不包含 VS Code 其他部分）：标签栏、文件树面包屑、代码编辑器、小地图。
截图和录屏文件不大于 1 MB

模板

简体中文 | [English](./README.en.md)

[![插件版本徽标]][插件市场链接]
[![插件下载徽标]][插件市场链接]

[插件市场链接]: https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks
[插件版本徽标]: https://vsmarketplacebadge.apphb.com/version/iceworks-team.iceworks.svg
[插件下载徽标]: https://vsmarketplacebadge.apphb.com/installs-short/iceworks-team.iceworks.svg

# Iceworks XXX插件

一句话介绍插件。

## 功能

### 功能一

#### 唤起（选填）

![唤起录屏说明](唤起录屏说明.gif)

通过怎样的方式唤起该功能。

#### 子功能

子功能介绍。

##### 用法一

用法一介绍。

![操作录屏说明](操作录屏图像.gif)

1. 操作步骤一说明
2. 操作步骤二说明
3. 操作步骤三说明

## 更多

访问 [Iceworks 套件](https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks)获取更多功能。

## License

[MIT](https://github.com/ice-lab/iceworks/blob/master/LICENSE)

简单示例

该示例是页面生成插件。

示例中的演示图仅做占位，可能不符合截图或录屏的要求。

简体中文 | [English](./README.en.md)

[![Version](https://vsmarketplacebadge.apphb.com/version/iceworks-team.iceworks-page-builder.svg)](https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks-page-builder)
[![Installs](https://vsmarketplacebadge.apphb.com/installs-short/iceworks-team.iceworks-page-builder.svg)](https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks-page-builder)

# Iceworks 页面生成插件

通过可视化操作，以区块拼装的方式生成页面。

## 功能

### 唤起

![唤起生成页面](https://img.alicdn.com/tfs/TB1wFrrek9l0K4jSZFKXXXFjpXa-1024-766.gif)

1. 通过 `⇧⌘P` 快捷键唤起命令面板
2. 在命令面板中输入 `Iceworks: 创建页面` ，点击选中的项目或按下键盘回车键，唤起页面生成插件

### 使用

![使用生成页面](https://img.alicdn.com/tfs/TB1mdpDJKT2gK0jSZFvXXXnFXXa-960-600.gif)

1. 输入页面名称（将用作文件夹名）
2. 从右侧的区块列表中选择页面需要使用的区块，点击添加到左侧页面预览区
3. 在左侧页面预览区可通过拖拽排序区块的顺序，或点击右上角的删除图标移除区块
3. 点击“生成页面”按钮，生成页面代码，页面代码将生成到 `src/pages/${页面名称}`

## 更多

访问 [Iceworks 套件](https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks)获取更多功能。

## License

[MIT](https://github.com/ice-lab/iceworks/blob/master/LICENSE)

复杂示例

该示例是样式开发辅助插件。

示例中的演示图仅做占位，可能不符合截图或录屏的要求。

简体中文 | [English](./README.en.md)

[![Version](https://vsmarketplacebadge.apphb.com/version/iceworks-team.iceworks-style-helper.svg)](https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks-style-helper)
[![Installs](https://vsmarketplacebadge.apphb.com/installs-short/iceworks-team.iceworks-style-helper.svg)](https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks-style-helper)

# Iceworks 样式开发辅助插件

在 [JSX](https://zh-hans.reactjs.org/docs/introducing-jsx.html) 中更快速地编写内联样式，对 React 和 [Rax](https://rax.js.org/) 应用友好。

## 用法

### JSX 文件

#### style 属性

在 JSX 文件中编辑组件的 `style` 属性时给予自动补全提醒。

##### 行内样式

根据 w3c 标准给予样式字段和值的自动补全提醒：

![使用示例](https://img.alicdn.com/tfs/TB1oyRBF1H2gK0jSZFEXXcqMpXa-1000-586.gif)

##### 变量赋值

使用 CSS Module 时，根据样式声明进行样式字段的自动补全：

![使用示例](https://img.alicdn.com/tfs/TB1UDGht.Y1gK0jSZFMXXaWcVXa-1468-906.gif)

#### className 属性

在 JSX 文件中编辑组件的 `className` 属性时给予自动补全提醒，值预览及定义跳转。

##### 自动补全提醒

在编辑组件的 `className` 时，根据文件 `import` 的样式文件内的类选择器进行自动补全提醒：

![使用示例](https://img.alicdn.com/tfs/TB1JqP0Nfb2gK0jSZK9XXaEgFXa-900-561.gif)

##### 值预览及定义跳转

![使用示例](https://img.alicdn.com/tfs/TB1JqP0Nfb2gK0jSZK9XXaEgFXa-900-561.gif)

- 鼠标停留在 `className` 值上，出现悬浮部件显示该值对应的样式声明
- 点击对应的 `className` 值，跳转到该值的定义处

### 样式文件

在 CSS、LESS、SASS 文件中输入类选择器时，根据引用值进行自动补全提醒：

![使用示例](https://img.alicdn.com/tfs/TB1l_zMFhD1gK0jSZFKXXcJrVXa-500-355.gif)

- 在 JSX 内声明某个组件 `className` 属性的值为 `test`
- 在 JSX 内引用样式文件：`import './index.csss'`
- 新建该 `index.css` 文件
- 在 `index.css` 内输入 `.t` ，出现 `.test` 的自动补全提醒

### SASS 文件

#### 变量自动补全提醒

在 SASS 文件内输入变量时，根据引用文件进行代码自动补全：

![使用示例](https://img.alicdn.com/tfs/TB1RA_ZMeL2gK0jSZPhXXahvXXa-900-535.gif)

#### 变量预览值

鼠标停留在变量上，出现悬浮部件显示该变量对应的值：

![使用示例](https://img.alicdn.com/tfs/TB1RA_ZMeL2gK0jSZPhXXahvXXa-900-535.gif)

#### 属性值使用变量替换的建议

输入属性值时，如发现可使用变量进行替换，则出现变量替换提醒列表：

![使用示例](https://img.alicdn.com/tfs/TB1RA_ZMeL2gK0jSZPhXXahvXXa-900-535.gif)

#### 变量的定义跳转

通过 cmd + 点击（ Windows: ctrl + 点击 ）进行变量的定义代码跳转：

![使用示例](https://img.alicdn.com/tfs/TB1RA_ZMeL2gK0jSZPhXXahvXXa-900-535.gif)

## 更多

访问 [Iceworks 套件](https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks)获取更多功能。

## License

[MIT](https://github.com/ice-lab/iceworks/blob/master/LICENSE)