<p align="center"> <a href="https://github.com/sudongyuer/vite-plugin-vue-inspector"><img src="https://git.poker/sudongyuer/image-bed/blob/master/vite-plugin-react-inspector.png?raw=true" width='200'/></a> </p>
npm install vite-plugin-react-inspector- Support react 16
- Support react 17
- Support react 18
- All features out of box just need add this plugin in vite.config.ts

``bashpnpm
pnpm add vite-plugin-react-inspector -D
π¦ Usage
$3
`ts
// βοΈthis plugin must before reactimport { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import ReactInspector from 'vite-plugin-react-inspector'
export default defineConfig({
plugins: [
ReactInspector(),
react(),
],
})
`$3
π 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
``This project is inspired by vite-plugin-vue-inspector .
Partially implementation is inspired by vite-plugin-svelte-inspector .
sudongyuer email:976499226@qq.com
- geekris1