点击 UI 跳转到编辑器中对应的组件源码的工具 - React Dev Inspector

在成百上千个组件的大型项目中，找页面上的 UI 对应的组件源码很花时间。对于新加入项目的同学来说，找源码就更花时间了。

如何快速找到源码呢？写文档，详细的记录各业务模块的组件对应的文件地址。这么做，耗时耗力，还会出现文档和组件的真实位置不一致的情况。

解决方案

如果点击 UI，能跳转到编辑器中对应的组件源码，就太省时间啦~

如果你用的是 React, React Dev Inspector
实现了这个功能。

使用方法

1 添加依赖

npm i -D react-dev-inspector

2 在根组件外侧包裹监控节点

import React from 'react'
import { Inspector, InspectParams } from 'react-dev-inspector'
const InspectorWrapper = process.env.NODE_ENV === 'development'
  ? Inspector
  : React.Fragment
export const Layout = () => {
  // ...
  return (
    <InspectorWrapper
      // props docs see:
      // https://github.com/zthxxx/react-dev-inspector#inspector-component-props
      keys={['control', 'shift', 'command', 'c']}
      disableLaunchEditor={false}
      onHoverElement={(params: InspectParams) => {}}
      onClickElement={(params: InspectParams) => {}}
    >
     <YourComponent>
       ...
     </YourComponent>
    </InspectorWrapper>
  )
}

同时按下 InspectorWrapper 中 keys 的键后，点击 UI 跳转到源码。

3 添加配置

// babelrc.js
export default {
  plugins: [
    // plugin options docs see:
    // https://github.com/zthxxx/react-dev-inspector#inspector-babel-plugin-options
    'react-dev-inspector/plugins/babel',
  ],
}

// webpack.config.ts
import type { Configuration } from 'webpack'
import { launchEditorMiddleware } from 'react-dev-inspector/plugins/webpack'
const config: Configuration = {
  /**
   * [server side] webpack dev server side middleware for launch IDE app
   */
  devServer: {
    before: (app) => {
      app.use(launchEditorMiddleware)
    },
  },
}

4 编辑器配置
VSCode 进行如下配置:

修改命令行工具的配置，如 .bashrc 或 .zshrc。添加:

export REACT_EDITOR=code

其他编辑器的配置，见 这里。

告别找源码的痛苦，赶紧用起来吧~

觉得本文对你有帮助。点个赞，分享给小伙伴们吧~

参考文档

• 我点了页面上的元素，VSCode 乖乖打开了对应的组件？原理揭秘。
• React Dev Inspector