sudongyuer/vite-plugin-react-inspector

👀 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

# 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

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

VSCode

• install VSCode command line tools, see the official docs

• 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

• geekris1

📄 License

MIT License © 2022 SuDongYu