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

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组件就会出现在调色板面板中,并提示我们补全必要的属性。我们按照提示把typeheadingchildren属性填写完整。

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

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

添加依赖包中的组件

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

相关推荐
拉不动的猪1 小时前
前端常见数组分析
前端·javascript·面试
小吕学编程1 小时前
ES练习册
java·前端·elasticsearch
Asthenia04121 小时前
Netty编解码器详解与实战
前端
袁煦丞1 小时前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
一个专注写代码的程序媛2 小时前
vue组件间通信
前端·javascript·vue.js
一笑code2 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员3 小时前
layui时间范围
前端·javascript·layui
NoneCoder3 小时前
HTML响应式网页设计与跨平台适配
前端·html
凯哥19703 小时前
在 Uni-app 做的后台中使用 Howler.js 实现强大的音频播放功能
前端
烛阴3 小时前
面试必考!一招教你区分JavaScript静态函数和普通函数,快收藏!
前端·javascript