使用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 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
衣乌安、1 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜1 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师1 小时前
CSS的三个重点
前端·css
耶啵奶膘2 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^4 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie4 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic5 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿5 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具6 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端