Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sudongyuer/vite-plugin-react-inspector
🦋 Jump to local IDE source code while click the element of browser automatically
https://github.com/sudongyuer/vite-plugin-react-inspector
debug dev inspector react react-inspector vite vite-plugin-react vscode webstorm
Last synced: about 2 months ago
JSON representation
🦋 Jump to local IDE source code while click the element of browser automatically
- Host: GitHub
- URL: https://github.com/sudongyuer/vite-plugin-react-inspector
- Owner: sudongyuer
- License: mit
- Created: 2022-07-17T15:06:14.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2022-11-03T08:25:23.000Z (almost 2 years ago)
- Last Synced: 2024-07-07T16:06:22.248Z (2 months ago)
- Topics: debug, dev, inspector, react, react-inspector, vite, vite-plugin-react, vscode, webstorm
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/vite-plugin-react-inspector
- Size: 707 KB
- Stars: 150
- Watchers: 2
- Forks: 9
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
## 👀 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
### Configuration `vite.config.ts`
```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
- [React17](https://github.com/sudongyuer/vite-plugin-react-inspector/tree/master/packages/project-react-17)
- [React18](https://github.com/sudongyuer/vite-plugin-react-inspector/tree/master/packages/project-react-18)
## 🔌 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](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line)
- set env to shell, like `.bashrc` or `.zshrc`
```bash
export REACT_EDITOR=code
```
### WebStorm
- 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
```
### Vim
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](https://github.com/webfansplz/vite-plugin-vue-inspector) .
Partially implementation is inspired by [vite-plugin-svelte-inspector](https://github.com/sveltejs/vite-plugin-svelte/tree/main/packages/vite-plugin-svelte/src/ui/inspector) .
## 👦 Author
sudongyuer email:[email protected]
## ❤️ Thanks Contribution
- [geekris1](https://github.com/geekris1)
## 📄 License
[MIT](./LICENSE) License © 2022 [SuDongYu](https://github.com/sudongyuer)