Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>Star Material HelperNew to Visual Studio Code? Get it now.
Star Material Helper

Star Material Helper

qunhe-star-team

|
110 installs
| (0) | Free
Easily use Component in Any Framework.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Star 物料使用辅助插件

Version for VS Code Extension Installs Rating The MIT License

让物料使用更加便捷!

页面和组件信息

示例

快速跳转至对应页面和组件的源码

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

支持激活添加页面和组件功能

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

使用物料面板

什么是物料?

激活

使用示例

  1. 通过 ⇧⌘P 或 Ctrl+Shift+P 快捷键唤醒命令面板
  2. 输入 Star: 添加组件 激活物料添加面板

在页面或组件中使用物料

使用示例

  1. 在资源面板中打开 Component 源码
  2. 选择需要插入物料的代码位置
  3. 搜索组件,点击需要使用的组件,物料代码将自动添加到相应的位置中

使用区块组装页面

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

激活

  1. 通过 ⇧⌘P 或 Ctrl+Shift+P 快捷键唤醒命令面板;
  2. 在命令面板中输入 Star: 使用区块组装页面 ,点击选中的项目或按下键盘回车键,激活页面生成插件。

使用

  1. 从右侧的区块列表中选择页面需要使用的区块,点击添加到左侧页面预览区;
  2. 在左侧页面预览区可通过拖拽排序区块的顺序,或点击右上角的删除图标移除区块;
  3. 点击“生成页面”按钮,输入页面名称
  4. 点击"确认"按钮,生成页面代码,页面代码将生成到 src/pages/ or src/micros/ 目录下。

拼接区块组装页面

使用模板生成页面

通过使用模板可视化配置的方式生成页面。

激活

  1. 通过 ⇧⌘P 或 Ctrl+Shift+P 快捷键唤醒命令面板
  2. 在命令面板中输入 Star: 使用模板生成页面 ,点击选中的项目或按下键盘回车键,激活页面生成插件

使用

使用示例

  1. 选择一个页面模板
  2. 点击 下一步 ,进入配置页面
  3. 进行页面模板的配置,通过使用这些配置生成个性化页面
  4. 点击 创建页面 按钮,填写页面信息表单
  5. 点击 确认 按钮,生成页面代码,页面代码将生成到 src/pages/ or src/micros/ 目录下。

下载远程物料到本地

通过选择物料快速创建前端组件。

激活

  1. 通过 ⇧⌘P ( MacOS ) 或 Ctrl+Shift+p ( Windows ) 快捷键唤起命令面板;
  2. 输入 Star: 下载物料到本地 ,点击选中的项目或按下键盘回车键,激活插件。

使用

下载远程物料到本地

  1. 填写组件名(同时也是组件所在文件夹的名称);
  2. 组件名输入框下方选择一个使用的区块;
  3. 点击 创建组件 按钮,生成组件代码。

文档浏览方式设置

使用说明

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

更多

本插件由 Star Team 开发,是 Star 套件的一部分,访问 Star 官网 获取更多功能。

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft