🦋 Jump to local IDE source code while click the element of browser automatically

Overview

NPM Version NPM Downloads License

👀 Why

When developing a React app, you have a lot of components in your app. Sometimes you may forget where the code is located that you want to edit. Then you need this plugin to help you find the code, just click the dom in the browser and this plugin can help you to open the editor and find the code.

📖 Introduction

This vite plugin allows users to jump to local IDE code directly from browser React component by just a simple click, which is similar to Chrome inspector but more advanced.

🌈 Features

  • Support react 16
  • Support react 17
  • Support react 18
  • All features out of box just need add this plugin in vite.config.ts

vite-plugin-vue-inspector

📦 Installation

# pnpm 
pnpm add vite-plugin-react-inspector -D

# yarn
yarn add vite-plugin-react-inspector -D

# npm
npm install vite-plugin-react-inspector -D

🦄 Usage

Configuration vite.config.ts

// ❗️this plugin must before react

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import ReactInspector from 'vite-plugin-react-inspector'

export default defineConfig({
  plugins: [
    ReactInspector(),
    react(),
  ],
})

Example

🔌 Configuration IDE / Editor

It uses an environment variable named REACT_EDITOR to specify an IDE application, but if you do not set this variable, it will try to open a common IDE that you have open or installed once it is certified.

For example, if you want it always open VSCode when inspection clicked, set export REACT_EDITOR=code in your shell.

VSCode

  • install VSCode command line tools, see the official docs install-vscode-cli

  • set env to shell, like .bashrc or .zshrc

    export REACT_EDITOR=code

WebStorm

  • just set env with an absolute path to shell, like .bashrc or .zshrc (only MacOS)

    export REACT_EDITOR='/Applications/WebStorm.app/Contents/MacOS/webstorm'

OR

  • install WebStorm command line tools

  • then set env to shell, like .bashrc or .zshrc

    export REACT_EDITOR=webstorm

Vim

Yes! you can also use vim if you want, just set env to shell

export REACT_EDITOR=vim

🌸 Credits

This project is inspired by vite-plugin-vue-inspector .

Partially implementation is inspired by vite-plugin-svelte-inspector .

👦 Author

sudongyuer email:[email protected]

❤️ Thanks Contribution

📄 License

MIT License © 2022 SuDongYu

Comments
  • Fix: fix windows platform path error && remove rendundancy code

    Fix: fix windows platform path error && remove rendundancy code

    two parts

    1. fix win platform path scheme error

    see js doc

    2. remove redundancy code

    I think either if or else , next will be executed, so it shouldn't appear twice.

    opened by alexzhang1030 1
  • [ImgBot] Optimize images

    [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 15% 🎉

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /images/vscode-setup.png | 125.13kb | 53.33kb | 57.38% | | /packages/project-react-18/src/images/vite-plugin-react-inspector.png | 200.49kb | 187.24kb | 6.61% | | /packages/project-react-17/src/images/vite-plugin-react-inspector.png | 200.49kb | 187.24kb | 6.61% | | /images/vite-plugin-react-inspector.png | 200.49kb | 187.24kb | 6.61% | | /packages/project-react-17/src/logo.svg | 1.49kb | 1.46kb | 2.17% | | /packages/project-react-18/src/logo.svg | 1.49kb | 1.46kb | 2.17% | | /packages/project-react-17/src/favicon.svg | 1.49kb | 1.46kb | 2.17% | | /packages/project-react-18/src/favicon.svg | 1.49kb | 1.46kb | 2.17% | | | | | | | Total : | 732.54kb | 620.86kb | 15.25% |


    📝 docs | :octocat: repo | 🙋🏾 issues | 🏪 marketplace

    ~Imgbot - Part of Optimole family

    opened by imgbot[bot] 1
  • [ImgBot] Optimize images

    [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 15% 🎉

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /vscode-setup.png | 125.13kb | 53.33kb | 57.38% | | /vite-plugin-react-inspector.png | 200.49kb | 187.24kb | 6.61% | | /packages/project-react-18/src/images/vite-plugin-react-inspector.png | 200.49kb | 187.24kb | 6.61% | | /packages/project-react-17/src/images/vite-plugin-react-inspector.png | 200.49kb | 187.24kb | 6.61% | | /packages/project-react-17/src/logo.svg | 1.49kb | 1.46kb | 2.17% | | /packages/project-react-18/src/favicon.svg | 1.49kb | 1.46kb | 2.17% | | /packages/project-react-17/src/favicon.svg | 1.49kb | 1.46kb | 2.17% | | /packages/project-react-18/src/logo.svg | 1.49kb | 1.46kb | 2.17% | | | | | | | Total : | 732.54kb | 620.86kb | 15.25% |


    📝 docs | :octocat: repo | 🙋🏾 issues | 🏪 marketplace

    ~Imgbot - Part of Optimole family

    opened by imgbot[bot] 1
  • chore: update versions

    chore: update versions

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to master, this PR will be updated.

    Releases

    [email protected]

    Patch Changes

    • 715c692: fix: react fragment error
    opened by sudongyuer 0
  • chore: update versions

    chore: update versions

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to master, this PR will be updated.

    Releases

    [email protected]

    Patch Changes

    • fe73cb6: fix: fix windows platform path error && remove rendundancy code
    opened by sudongyuer 0
  • chore: update versions

    chore: update versions

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to master, this PR will be updated.

    Releases

    [email protected]

    Patch Changes

    • a7f8689: support jsx
    opened by sudongyuer 0
  • chore: update versions

    chore: update versions

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to master, this PR will be updated.

    Releases

    [email protected]

    Minor Changes

    • eb71eab: release v0.3.0
    opened by sudongyuer 0
  • chore: update versions

    chore: update versions

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to master, this PR will be updated.

    Releases

    [email protected]

    Patch Changes

    • 0f3cab7: remove react drag
    opened by sudongyuer 0
  • chore: update versions

    chore: update versions

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to master, this PR will be updated.

    Releases

    [email protected]

    Patch Changes

    • 5d28b79: chore:update deps
    opened by sudongyuer 0
  • chore: update versions

    chore: update versions

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to master, this PR will be updated.

    Releases

    [email protected]

    Patch Changes

    • 071e6a0: test react draggable
    opened by sudongyuer 0
  • chore: update versions

    chore: update versions

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to master, this PR will be updated.

    Releases

    [email protected]

    Patch Changes

    • fa9bab7: update
    opened by sudongyuer 0
  • Configure Renovate

    Configure Renovate

    Mend Renovate

    Welcome to Renovate! This is an onboarding PR to help you understand and configure settings before regular Pull Requests begin.

    🚦 To activate Renovate, merge this Pull Request. To disable Renovate, simply close this Pull Request unmerged.


    Detected Package Files

    • .github/workflows/changeset-version.yml (github-actions)
    • package.json (npm)
    • packages/project-react-17/package.json (npm)
    • packages/project-react-18/package.json (npm)
    • packages/vite-plugin-react-inspector/package.json (npm)

    Configuration

    🔡 Renovate has detected a custom config for this PR. Feel free to ask for help if you have any doubts and would like it reviewed.

    Important: Now that this branch is edited, Renovate can't rebase it from the base branch any more. If you make changes to the base branch that could impact this onboarding PR, please merge them manually.

    What to Expect

    With your current configuration, Renovate will create 13 Pull Requests:

    chore(deps): pin dependencies
    chore(deps): update dependency unbuild to v0.8.10
    • Schedule: ["at any time"]
    • Branch name: renovate/unbuild-0.x
    • Merge into: master
    • Upgrade unbuild to 0.8.10
    chore(deps): update dependency vite-plugin-inspect to v0.6.1
    • Schedule: ["at any time"]
    • Branch name: renovate/vite-plugin-inspect-0.x
    • Merge into: master
    • Upgrade vite-plugin-inspect to 0.6.1
    chore(deps): update dependency vitest to v0.22.1
    • Schedule: ["at any time"]
    • Branch name: renovate/vitest-0.x
    • Merge into: master
    • Upgrade vitest to 0.22.1
    chore(deps): update pnpm to v7.9.5
    • Schedule: ["at any time"]
    • Branch name: renovate/pnpm-7.x
    • Merge into: master
    • Upgrade pnpm to 7.9.5
    chore(deps): update actions/checkout action to v3
    • Schedule: ["at any time"]
    • Branch name: renovate/actions-checkout-3.x
    • Merge into: master
    • Upgrade actions/checkout to v3
    chore(deps): update actions/setup-node action to v3
    • Schedule: ["at any time"]
    • Branch name: renovate/actions-setup-node-3.x
    • Merge into: master
    • Upgrade actions/setup-node to v3
    chore(deps): update dependency @​types/react to v18
    • Schedule: ["at any time"]
    • Branch name: renovate/react-18.x
    • Merge into: master
    • Upgrade @types/react to 18.0.18
    chore(deps): update dependency @​types/react-dom to v18
    • Schedule: ["at any time"]
    • Branch name: renovate/react-dom-18.x
    • Merge into: master
    • Upgrade @types/react-dom to 18.0.6
    chore(deps): update dependency @​vitejs/plugin-react to v2
    • Schedule: ["at any time"]
    • Branch name: renovate/vitejs-plugin-react-2.x
    • Merge into: master
    • Upgrade @vitejs/plugin-react to 2.0.1
    chore(deps): update dependency vite to v3
    • Schedule: ["at any time"]
    • Branch name: renovate/vite-3.x
    • Merge into: master
    • Upgrade vite to 3.0.9
    fix(deps): update dependency chalk to v5
    • Schedule: ["at any time"]
    • Branch name: renovate/chalk-5.x
    • Merge into: master
    • Upgrade chalk to 5.0.1
    fix(deps): update react monorepo to v18 (major)
    • Schedule: ["at any time"]
    • Branch name: renovate/major-react-monorepo
    • Merge into: master
    • Upgrade react to 18.2.0
    • Upgrade react-dom to 18.2.0

    🚸 Branch creation will be limited to maximum 2 per hour, so it doesn't swamp any CI resources or spam the project. See docs for prhourlylimit for details.


    ❓ Got questions? Check out Renovate's Docs, particularly the Getting Started section. If you need any further assistance then you can also request help here.


    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 1
Owner
Frozen FIsh
⊙﹏⊙‖∣° 🐟🐟🐟
Frozen FIsh
a redux middleware to automatically generate tests for reducers through ui interaction

Redux Test Recorder NOTE YOUR STATE TREE MUST BE SERIALIZABLE Redux test recorder is a redux middleware for automatically generating tests for your re

Conor Hastings 492 Aug 15, 2022
A Babel plugin that automatically builds the extend catalogue of known native Three.js elements

react-three-babel A Babel plugin that automatically builds the extend catalogue of known native Three.js elements which enables granular usage of Thre

Poimandres 31 Jul 27, 2022
Easily detect React components source code from Chrome!

Easily detect React components source code from Chrome!

Kyohei Fukuda 115 Sep 28, 2022
🔍 Power of Browser DevTools inspectors right inside your React app

react-inspector Power of Browser DevTools inspectors right inside your React app. Check out the interactive playground or storybook. Install NPM: npm

Storybook 642 Sep 11, 2022
🔍 Power of Browser DevTools inspectors right inside your React app

react-inspector Power of Browser DevTools inspectors right inside your React app. Check out the interactive playground or storybook. Install NPM: npm

Storybook 643 Sep 24, 2022
In-browser emulator of Hack CPU from nand2tetris course

Hack Emulator This project emulates Hack computer from nand2tetris course. It is still under light development (light means that I might add/fix/polis

Artyom Kuznetsov 6 Aug 9, 2022
Foxpage SDK for JavaScript in the browser and Node.js.

Foxpage SDK JS Foxpage SDK for JavaScript in the browser and Node.js. ✨ Project <Project Root> ├── .storybook // storybook config

Foxpage 4 Dec 16, 2021
A browser extension for using kbar in HackMD

hackbar A browser extension for using kbar in HackMD Report Bug · Request Featur

TzuWei 19 Sep 21, 2022
Figma Design plugin template with UI & Browser APIs

Figma Design plugin template with UI & Browser APIs This is a template for writing Figma Design plugins with UI & browser APIs. It uses typescript, re

Sebastian Flajszer 18 Sep 6, 2022
Webpack Terminal Plugin - Log in the node terminal from the browser

Webpack Terminal Plugin Based on vite-plugin-terminal modification Install npm i -D webpack-plugin-terminal Usage const { WebpackTerminalPlugin } = re

Zeno 1 Apr 24, 2022
fflow is a free, open-source developer tool to create React applications rapidly and with minimal effort using the simple drag and drop UI

fflow Supercharge your React development process Explore the docs » View Demo · Report Bug · Request Feature Give a ⭐️ if our project helped or intere

OSLabs Beta 116 Sep 6, 2022
The recommended Code Splitting library for React ✂️✨

React code splitting made easy. Reduce your bundle size without stress ✂️ ✨ . npm install @loadable/component Docs See the documentation at loadable-c

Greg Bergé 6.8k Sep 30, 2022
🌟 JavaScript Style Guide, with linter & automatic code fixer

JavaScript Standard Style Sponsored by English • Español (Latinoamérica) • Français • Bahasa Indonesia • Italiano (Italian) • 日本語 (Japanese) • 한국어 (Ko

Standard JS 27.5k Sep 29, 2022
Sapling - A convenient way to traverse your React app in VS Code

Sapling - A convenient way to traverse your React app in VS Code

OSLabs Beta 461 Sep 8, 2022
Let's learn React by building react within 100 lines of code

kReact Let's learn React by building react within 100 lines of code ???? Medium article: https://kamesh-dev.medium.com/kreact-building-your-own-react-

kamesh sethupathi 6 Aug 11, 2022
CodeSwing is an interactive coding playground for VS Code

?? CodeSwing is an interactive coding playground for VS Code, that allows you to build/explore/learn rich web applications ("swings"). It's

Jonathan Carter 908 Sep 24, 2022
Use SWC with Rollup to transform ESNext and TypeScript code.

rollup-plugin-swc SWC is an extensible Rust-based platform for the next generation of fast developer tools. This plugin is designed to replace rollup-

Sukka 59 Sep 9, 2022
A Web library to simply integrate Agora Video Calling or Live Video Streaming to your website with just a few lines of code

Agora React Web UIKit Instantly integrate Agora video calling or streaming into your web application using a React based UIKit for the Agora Web SDK.

Agora.io Community 23 Sep 9, 2022
Code Kitchen - a React live-coding playground

Code Kitchen is a React live-coding playground which allows the developers to embed React component demos into a React UI library’s web documents.

FreeWheel, a Comcast Company 64 Aug 27, 2022