如何使用React Developer Tools的Open in Editor功能？

完成React Developer Tools默认配置后，找不到将组件树中组件直接在本地编辑器打开的功能入口：

• 检查组件右键菜单，无对应选项
  
• 检查DevTools右侧侧边栏所有图标，无「open in editor」相关入口，其中眼睛图标点击后仅会跳转至Chrome Elements标签页
  

「Open in Editor」不是开箱即用的默认功能，必须完成前置配置才会显示入口，仅安装DevTools浏览器插件不会出现该选项，具体配置步骤如下：

• 配置本地开发环境
  启动本地开发服务时，需要指定要唤起的编辑器环境变量：
  • VS Code用户：在项目根目录执行EDITOR=code npm run dev（Create React App项目用REACT_EDITOR=code npm start）
  • WebStorm用户：替换变量值为webstorm即可
    Vite用户需要额外确保@vitejs/plugin-react插件已开启devtools: true配置项，自定义Webpack项目需要开启完整source-map生成。
• 配置编辑器环境变量
  确保编辑器已添加到系统PATH，可在终端直接通过命令唤起（比如VS Code安装时需要勾选「Add to PATH」选项，否则终端输入code无响应，跳转功能会失效）。

配置完成后重启开发服务、刷新页面，入口会自动出现：

1. 选中组件后，右侧属性面板顶部、组件名旁会出现<>形状的跳转按钮
2. 组件树右键菜单会新增「Open in Editor」选项

注意：该功能仅在本地开发环境生效，线上生产环境的React应用无源码映射，不会显示该入口。

内容的提问来源于stack exchange，提问作者jcollum