前端组件开发辅助插件

在 JSX 中更快更好地添加组件、编写组件属性、查找组件文档，对 React 应用友好。

JS 项目组件属性自动补全

• React: 自动补全业务组件 props。

页面和组件视窗

快速打开对应页面和组件源码文件：

1. 点击左侧面板中页面列表和组件列表中的选项
2. 打开所选项目所在的源码文件

激活添加页面和组件功能：

1. 点击页面列表标题栏的 + 进入生成页面界面；
2. 点击组件列表标题栏的 + 进入创建组件界面。

使用物料面板

如果是umi项目，则需code code/client后使用，因为material-helper有根据根目录判断当前项目类型

什么是物料？

1. 在资源面板中点击 src/pages/*/index.tsx 打开页面源码
2. 在命令面板输入 FocusWorks: 添加组件 激活物料添加面板
3. 选择需要插入物料的代码位置
4. 搜索区块，点击需要使用的区块，物料代码将自动添加到相应的位置中
5. 搜索组件，点击需要使用的组件，物料代码将自动添加到相应的位置中

拼接区块组装页面

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

1. 通过 ⇧⌘P 或 Ctrl+Shift+P 快捷键唤醒命令面板；
2. 在命令面板中输入 FocusWorks: 使用区块组装页面 ，点击选中的项目或按下键盘回车键，激活页面生成插件。
3. 从右侧的区块列表中选择页面需要使用的区块，点击添加到左侧页面预览区；
4. 在左侧页面预览区可通过拖拽排序区块的顺序，或点击右上角的删除图标移除区块；
5. 点击“生成页面”按钮，输入页面名称和路由路径，点击"确认"按钮，生成页面代码，页面代码将生成到 src/pages/ 目录下。

下载远程物料到本地

为 React 应用提供了海量的高质量物料，通过选择物料快速创建前端组件。

1. 通过 ⇧⌘P ( MacOS ) 或 Ctrl+Shift+p ( Windows ) 快捷键唤起命令面板；
2. 输入 FocusWorks: 下载物料到本地 ，点击选中的项目或按下键盘回车键，激活插件。
3. 填写组件名（同时也是组件所在文件夹的名称)；
4. 组件名输入框下方选择一个使用的区块；
5. 点击 创建组件 按钮，生成组件代码。

组件文档搜索

1. 在 JSX 中通过鼠标右键激活
2. 搜索您需要查找文档的组件名
3. 点击组件名后，选择打开组件文档的方式
4. 浏览文档

您可以选择是否在 VS Code 浏览文档网页，这一功能依赖 Browser Preview 插件进行实现。 如果您希望在 VS Code 内部浏览文档，请先安装此插件。

组件属性自动补全

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

1. 在 JSX 文件中使用组件（如 View ）
2. 在组件标签内输入属性的部分内容，将会激活自动补全提醒。

自动填充 React 代码片段到文件

在创建文件夹或文件时，识别创建组件的意图，自动创建 index.j[t]sx 文件并填充代码片段。