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

相关推荐
J总裁的小芒果8 分钟前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
Lei_zhen9611 分钟前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron
咖喱鱼蛋13 分钟前
Electron一些概念理解
前端·javascript·electron
yqcoder15 分钟前
Vue3 + Vite + Electron + TS 项目构建
前端·javascript·vue.js
鑫宝Code32 分钟前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架
Mr_Xuhhh2 小时前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋3 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿3 小时前
【前端】CSS
前端·css
ggdpzhk3 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•5 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html