React Buddy是IntelliJ IDE 的高级插件,具有可视化工具和代码提示,使开发效率更高,本文将演示如何使用React Buddy中的调色板功能。
准备
在开始之前,请确保已经安装了React Buddy插件。如果尚未安装,请参考《使用WebStorm插件React Buddy提高React开发效率(快捷键篇)》进行学习和安装。
接下来,我们准备好一份代码:
typescript
import { ReactNode } from "react";
interface AlertProps {
type: 'info' | 'warning',
heading: string,
children: ReactNode
}
export default function Alert(props: AlertProps) {
return (
<div>
<div>
<span
role="img"
aria-label={
props.type === "warning"
? "Warning"
: "Information"
}
>
{props.type === "warning" ? "⚠️" : "ℹ️"}
</span>
<span>{props.heading}</span>
</div>
<div>{props.children}</div>
</div>
);
}
自定义组件到调色板
在编辑器中,将输入光标放在组件名称上,按下 Alt+Enter
,然后在弹出的菜单中选择"添加到React调色板"选项。
如果你是第一次运行React Buddy,将会提示:在package.json 中找不到 "@React-buddy/ide-toolbox" 或缺少某些配置文件。这时我们需要点击该警告中的"配置"
要求添加一些依赖或者修改启动文件。幸运的是,React Buddy已经预先处理好了这些步骤。我们只需要点击弹窗底部的"确定"按钮就可以自动配置好所有必要的设置。
完成配置后,回到Alert.tsx文件
继续之前的步骤:在编辑器中,将输入光标放在组件名称上,按下 Alt+Enter
,然后在弹出的菜单中选择"添加到React调色板"选项。
此时会弹出"将组件添加到调色板"对话框,在这里,你可以定义组件的名称、创建新的分类、并设定变体名称。
我们首先点击"Category"右侧的"+"按钮,添加一个名为"Demo"的新分类。
此时的Category下拉列表中选择我们新定义的"Demo"分类
在"Variant名称"输入框中,我们输入"custom"。这个名称将在调色板中以括号形式显示,例如Button(primary)、Button(dashed)、Button(text)、Button(link)等等
完成后,Alert组件就会出现在调色板面板中,并提示我们补全必要的属性。我们按照提示把type
、heading
、children
属性填写完整。
调色板底部的预览功能允许我们查看组件的实际效果。
我们可以看到自定义组件在调色板中的使用效果。
添加依赖包中的组件
在项目的src/dev/palette.tsx
文件中,找到并点击"打开调色板编辑器"按钮。
我们可以将依赖包中的组件添加到调色板中,我们以ant-design的图标为例,由于我事先已经执行pnpm i @ant-design/icons
安装了该依赖包。
我们来看一下使用效果:
在编码时,可以通过快捷键Alt+insert
访问"生成"菜单,并选择"React调色板中的组件",这样就能快速使用调色板中定义好的组件。
关于预设的使用建议
虽然React Buddy提供了官方预设,例如@react-buddy/palette-antd,但作者更新可能不够及时,无法反映 ant-design
最新的变化。因此,我个人不建议依赖这些预设。如果你有兴趣了解更多,可以参考React Buddy作者的Demo项目项目,在项目中找到/src/dev/palette.tsx
文件,并参考或覆盖到你的本地文件。建议直接查看官网获取最新的组件用法,以确保使用到最新版本的特性和优化。