使用WebStorm插件React Buddy提高React开发效率（调色板篇）

React Buddy是IntelliJ IDE 的高级插件，具有可视化工具和代码提示，使开发效率更高，本文将演示如何使用React Buddy中的调色板功能。

准备

接下来，我们准备好一份代码：

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文件，并参考或覆盖到你的本地文件。建议直接查看官网获取最新的组件用法，以确保使用到最新版本的特性和优化。