Vite Plugin React Inspector

Overview

This product is a Vite plugin designed to help React developers easily locate and jump to the code of React components within their app directly from the browser with a simple click. It offers a more advanced functionality compared to Chrome Inspector, making the development process more efficient and seamless.

Features

• Supports React 16, 17, 18
• All features are available out of the box, just need to add the plugin to vite.config.ts
• Allows users to jump to local IDE code directly from the browser with a simple click

Installation

To install this Vite plugin, follow these steps:

1. Configure vite.config.ts to add the plugin.
2. Set up the IDE/Editor configuration by specifying the environment variable REACT_EDITOR.
3. Examples for configuring IDE applications like VSCode, WebStorm, and Vim are provided.

Configuration in vite.config.ts

Example Configuration for React 17:

// vite.config.ts
import reactPlugin from 'vite-plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [reactPlugin()]
})

Example Configuration for React 18:

// vite.config.ts
import reactPlugin from 'vite-plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [reactPlugin()]
})

Configuration for IDE/Editor

• For VSCode: Install VSCode command line tools and set the environment variable.
• For WebStorm: Set the environment variable with an absolute path in the shell.
• For Vim: Set the environment variable to use Vim as the code editor.

Summary

This Vite plugin enhances the development experience for React developers by providing a convenient way to jump directly to the code of React components from the browser. Its support for React 16, 17, and 18 makes it versatile, and the easy configuration for different IDE applications adds flexibility. With this plugin, developers can streamline their workflow and improve productivity in React app development.