👀 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

📦 Installation

``bash


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

$3

`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(),
],
})
`

$3

- React17
- React18

🔌 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.




$3

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

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

`bash
export REACT_EDITOR=code
`




$3

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

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

OR

- install WebStorm command line tools

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

`bash
export REACT_EDITOR=webstorm
`




$3

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

`bash
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:976499226@qq.com

❤️ Thanks Contribution

- geekris1

📄 License

MIT License © 2022 SuDongYu