React-Find 一款能快速在网页定位到源码的工具,支持React19.x/next 15

React Find

react-find 是可以帮助您快速定位react文件的npm包,在页面中你可以通过command/ctrl 加鼠标左键/右键就能快速定位并跳转至IDE源代码对应位置

功能

  • 直接点击可直接跳转至code
  • 右键可查看当前节点和父级节点
  • 支持自定义IDE,辅助按键
  • 支持remotessh快速跳转
  • 支持vite/webpack/turbopack,均提供了对应的插件和示例
  • 支持react16.x~19.x,next14/15

如果您感兴趣,欢迎安装使用,如果有时间可以动动小手点点star(github地址在文末)

演示

当然,您也可以使用右键菜单来查找当前节点及其父节点

安装

shell 复制代码
pnpm install react-find

开始使用

如果您使用 React 19.x 或更高版本,您应该使用插件

在 Vite 中:

typescript 复制代码
//vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
// 添加类型声明以解决模块声明文件缺失问题
import { vitePluginReactSource } from 'react-find/vite';
// https://vite.dev/config/
export default defineConfig({
  define: {
    'process.env': process.env,
  },
  plugins: [vitePluginReactSource(), react()],
});

在 Webpack 中:

typescript 复制代码
 {
        test: /\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                '@babel/preset-react',
                '@babel/preset-typescript'
              ]
            }
          },{
            loader: require.resolve('react-find/webpack/webpack-react-source-loader')
          }
        ]
      },

在您的文件中添加脚本,如 pages/app.tsx

jsx 复制代码
import { init } from 'react-find/next';

init();

如果您使用的是 React 18.x,你不需要使用插件,但你需要引入react-find/next

typescript 复制代码
import { init } from 'react-find/next';

init();

如果您使用 React 17.x 或更低版本,您无需使用插件,直接导入即可

typescript 复制代码
import init from 'react-find';

init();

在 Next.js 中,使用 webpack-react-source-loader

typescript 复制代码
/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: config => {
    config.module.rules.push({
      test: /\.(ts|tsx|js|jsx)$/,
      exclude: /node_modules/,
      use: [
        {
          loader: 'react-find/webpack/webpack-react-source-loader',
        },
      ],
    });

    return config;
  },
};

export default nextConfig;

如果您使用 turbopack,您可以使用以下配置

typescript 复制代码
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  turbopack: {
    rules: {
      '*.tsx': {
        loaders: ['react-find/webpack/webpack-react-source-loader'],
      },

      '*.jsx': {
        loaders: ['react-find/webpack/webpack-react-source-loader'],
      },
    },
  },
};

export default nextConfig;

您应该创建一个客户端组件来初始化它

typescript 复制代码
"use client"

import { PropsWithChildren, useEffect } from "react"
import {init} from 'react-find/next'
const Profile=(props:PropsWithChildren)=>{
    useEffect(()=>{
        init()
    },[])
    return <div>{props.children}</div>

}
export default Profile

然后在您的布局组件中使用它

typescript 复制代码
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {

  return (
    <html lang="en">
      <body
      >
        <Profile>
            {children}
        </Profile>

      </body>
    </html>
  );
}

然后按下 command(Mac)或 ctrl(Windows)并移动鼠标来尝试,点击块将带您到 IDE

您也可以右键单击来查找当前节点和父节点,这可以找到源文件。

如果您总是使用其他 IDE,您可以这样初始化,或在 localStorage 中设置键 react_find_protocol

js 复制代码
init({ protocol: 'cursor' });

支持 Remote SSH

如果您使用的是 Remote SSH,您可以使用以下配置

仓库地址

github.com/mjw-git/rea... 如果您感兴趣,欢迎动动小手star

相关推荐
鹏多多7 分钟前
React状态管理库Zustand的实用教程
前端·javascript·react.js
excel15 分钟前
前端安全必修课:用 Web Cryptography API 玩转加密、签名、派生与密钥管理
前端
江城开朗的豌豆18 分钟前
useLayoutEffect:你以为它和useEffect是"亲兄弟"?其实差别大了!
前端·javascript·react.js
江城开朗的豌豆23 分钟前
聊聊useEffect:谁说副作用不能“优雅”?
前端·javascript·react.js
!执行24 分钟前
开发electron时候Chromium 报 Not allowed to load local resource → 空白页。
前端·javascript·electron
top_designer29 分钟前
告别“复制粘贴”式换肤:我用Adobe XD组件变体与CC库,构建多品牌设计系统架构
前端·ui·adobe·系统架构·ux·设计师·adobe xd
赛博切图仔43 分钟前
面试手写 Promise:链式 + 静态方法全实现
前端·javascript·面试
掘金安东尼1 小时前
互联网不再由 URL 为核心入口
前端·人工智能·github
Moment1 小时前
面试官:用户访问到一个不存在的路由,如何重定向到404 Not Found的页面 ❓❓❓
前端·javascript·面试
前端小巷子1 小时前
深入 Vue3 computed
前端·vue.js·面试