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

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

准备

在开始之前,请确保已经安装了React Buddy插件。如果尚未安装,请参考《使用WebStorm插件React Buddy提高React开发效率(快捷键篇)》进行学习和安装。

接下来,我们准备好一份代码:

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调色板”选项。

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

如果你是第一次运行React Buddy,将会提示:在package.json 中找不到 “@React-buddy/ide-toolbox” 或缺少某些配置文件。这时我们需要点击该警告中的“配置”

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

要求添加一些依赖或者修改启动文件。幸运的是,React Buddy已经预先处理好了这些步骤。我们只需要点击弹窗底部的“确定”按钮就可以自动配置好所有必要的设置。

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

完成配置后,回到Alert.tsx文件继续之前的步骤:在编辑器中,将输入光标放在组件名称上,按下 Alt+Enter ,然后在弹出的菜单中选择“添加到React调色板”选项。

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

此时会弹出“将组件添加到调色板”对话框,在这里,你可以定义组件的名称、创建新的分类、并设定变体名称。

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

我们首先点击”Category”右侧的“+”按钮,添加一个名为”Demo”的新分类。

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

此时的Category下拉列表中选择我们新定义的“Demo”分类

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

在”Variant名称”输入框中,我们输入”custom”。这个名称将在调色板中以括号形式显示,例如Button(primary)、Button(dashed)、Button(text)、Button(link)等等

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

完成后,Alert组件就会出现在调色板面板中,并提示我们补全必要的属性。我们按照提示把typeheadingchildren属性填写完整。

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

调色板底部的预览功能允许我们查看组件的实际效果。

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

我们可以看到自定义组件在调色板中的使用效果。

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

添加依赖包中的组件

在项目的src/dev/palette.tsx文件中,找到并点击“打开调色板编辑器”按钮。

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

我们可以将依赖包中的组件添加到调色板中,我们以ant-design的图标为例,由于我事先已经执行pnpm i @ant-design/icons 安装了该依赖包。

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

我们来看一下使用效果:

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

在编码时,可以通过快捷键Alt+insert访问“生成”菜单,并选择“React调色板中的组件”,这样就能快速使用调色板中定义好的组件。

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

关于预设的使用建议

虽然React Buddy提供了官方预设,例如@react-buddy/palette-antd,但作者更新可能不够及时,无法反映 ant-design 最新的变化。因此,我个人不建议依赖这些预设。如果你有兴趣了解更多,可以参考React Buddy作者的Demo项目项目,在项目中找到/src/dev/palette.tsx文件,并参考或覆盖到你的本地文件。建议直接查看官网获取最新的组件用法,以确保使用到最新版本的特性和优化。

原文链接:https://juejin.cn/post/7344259131715059747 作者:辰火流光

(0)
上一篇 2024年3月10日 上午10:36
下一篇 2024年3月10日 上午10:46

相关推荐

发表评论

登录后才能评论