前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第 009 期 点击 UI 跳转到编辑器中对应的组件源码的工具 - React Dev Inspector

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

作者头像
前端GoGoGo
发布2021-04-12 17:21:33
1.2K0
发布2021-04-12 17:21:33
举报
文章被收录于专栏:九彩拼盘的叨叨叨

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

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

解决方案

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

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

使用方法

1 添加依赖

代码语言:javascript
复制
npm i -D react-dev-inspector

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

代码语言:javascript
复制
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>
  )
}

同时按下 InspectorWrapperkeys 的键后,点击 UI 跳转到源码。

3 添加配置

代码语言:javascript
复制
// 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',
  ],
}
代码语言:javascript
复制
// 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。添加:

代码语言:javascript
复制
export REACT_EDITOR=code

其他编辑器的配置,见 这里

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

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

参考文档

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 解决方案
    • 使用方法
    • 参考文档
    相关产品与服务
    命令行工具
    腾讯云命令行工具 TCCLI 是管理腾讯云资源的统一工具。使用腾讯云命令行工具,您可以快速调用腾讯云 API 来管理您的腾讯云资源。此外,您还可以基于腾讯云的命令行工具来做自动化和脚本处理,以更多样的方式进行组合和重用。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档