React Buddy是IntelliJ IDE 的高级插件，具有可视化工具和代码提示，使开发效率更高，本文将介绍大纲工具与预览功能。
准备
在开始之前，请确保已经安装了React Buddy插件。如果尚未安装，请参考《使用WebStorm插件React Buddy提高React开发效率（快捷键篇）》进行学习和安装。
接下来，我们准备好一份代码：
tsx
// 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的另一强大功能------调色板