使用WebStorm插件React Buddy提高React开发效率（大纲结构篇）

React Buddy是IntelliJ IDE 的高级插件，具有可视化工具和代码提示，使开发效率更高，本文将介绍大纲工具与预览功能。

准备

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

// Demo.tsx
import {useEffect, useState} from "react";

function NewComponent(props: { count: number }) {
    return <p>{props.count}</p>;
}

export const Demo = () => {
    const [count, setCount] = useState(0);

    useEffect(() => {
        setCount(1)
    }, []);

    const handleButtonClick = () => {
        setCount(c=>c+1)
    };

    return (
        <div>
            <NewComponent count={count}/>
            <button onClick={handleButtonClick}>辰火流光</button>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
                <li>Item 6</li>
            </ul>
        </div>
    );
};

编辑器图标

快速跳转至事件处理函数

在编辑器中，每个事件处理函数左边会显示一个图标，点击这个图标可以快速跳转至该函数的调用位置。需要注意的是，这个图标专门为事件处理函数设计，不会出现在普通函数声明前。

识别并跳转到hooks

在使用hooks时，我们会在编辑器中看到一个特定的图标，这个图标不仅对应React内置的hooks，也适用于用户自定义的hooks。编辑器通过检测函数名是否以“use”开头来决定是否显示此图标。点击这个图标，可以导航到hooks的调用位置。

工具栏

工具栏位于编辑器窗口的右上角。它包括五个顺序排列的图标，分别代表：编辑器（editor only）、大纲（outline）、编辑器与预览（editor and preview）、预览（preview only）和在独立窗口中预览（preview in a separate window）。默认为“编辑器（editor only）”。

大纲工具栏（outline）

点击工具栏中的“大纲”图标会在界面右侧显示大纲工具栏。大纲工具栏让我们能够快速查看和访问当前文件的结构。当我们在代码中移动“输入光标”时，大纲中相应的部分也会同步高亮显示。

在大纲工具栏的顶部，有三个控制按钮，它们分别用于全部展开节点、全部折叠节点、隐藏/显示hooks

此外，大纲工具栏支持拖拽操作，允许我们通过移动元素改变它们在文件中的位置。

如果我们在大纲中找不到某个函数，例如handleButtonClick，那是因为绑定到事件上的函数默认不会显示在大纲中。这不是一个错误，而是设计上的决定，可能是为了让大纲视图更加简洁。如果需要定位到这样的函数，只需双击大纲中的事件名称，光标就会跳转到代码编辑器中对应函数声明的位置。

预览

在组件声明旁边会有一个熊掌图标，点击此图标可以预览组件的实时效果。

如果我们是首次使用这个功能，可能会出现提示，要求添加一些依赖或者修改启动文件。幸运的是，React Buddy已经预先处理好了这些步骤。我们只需要点击弹窗底部的“确定”按钮就可以自动配置好所有必要的设置。

完成配置后，回到Demo.tsx文件，并点击预览图标，这将打开“开发服务器配置”窗口。这里会显示我们在项目的package.json中定义的scripts脚本。通常情况下，默认配置为dev。

确认无误，点击“确定”之后，我们将看到组件的预览窗口。在预览窗口点击任意元素，会直接定位到代码中对应的位置，因为默认激活了“高亮显示元素”功能。

下面的动画显示了如何激活和关闭“高亮显示元素”的功能：

不过，根据我目前的经验（WebStorm版本为2024.3.4），预览窗口定位代码的功能可能存在一些bug。如果我们在使用过程中遇到问题，可以向React Buddy的官方仓库@react-buddy/ide-toolbox提出issues请求帮助。如果问题解决起来比较困难，我们也可以选择不使用这个功能，直接从package.json文件中卸载@react-buddy/ide-toolbox插件，删除项目中的src/dev目录，并且还原src/main.tsx文件。

下一章节中，我们将介绍React Buddy的另一强大功能——调色板