unplugin-react-next-inspector

English | 简体中文

Introduction

A unplugin which provides the ability that to jump to the local IDE when you click the element of browser automatically.

Notice

now just support vite.

Usage

npm i -D unplugin-react-next-inspector

Vite

// vite.config.ts
import Starter from 'unplugin-react-next-inspector/vite'

export default defineConfig({
  plugins: [Starter()],
})

Rollup

// rollup.config.js
import Starter from 'unplugin-react-next-inspector/rollup'

export default {
  plugins: [Starter()],
}

Rolldown

// rolldown.config.js
import Starter from 'unplugin-react-next-inspector/rolldown'

export default {
  plugins: [Starter()],
}

esbuild

import { build } from 'esbuild'
import Starter from 'unplugin-react-next-inspector/esbuild'

build({
  plugins: [Starter()],
})

Webpack

// webpack.config.js
import Starter from 'unplugin-react-next-inspector/webpack'

export default {
  /* ... */
  plugins: [Starter()],
}

Rspack

// rspack.config.js
import Starter from 'unplugin-react-next-inspector/rspack'

export default {
  /* ... */
  plugins: [Starter()],
}

Options

export interface InspectorOptions {
  /**
   * Default enable state
   * @default false
   */
  enabled?: boolean
  /**
   * Define a combo key to toggle inspector
   * @default 'control-shift' on windows, 'meta-shift' on other os
   *
   * any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -
   * examples: control-shift, control-o, control-alt-s  meta-x control-meta
   * Some keys have native behavior (e.g. alt-s opens history menu on firefox).
   * To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.
   * You can also disable it by setting `false`.
   */
  toggleComboKey?: string | false
  /**
   * Target editor when open in editor
   *
   * @default process.env.LAUNCH_EDITOR ?? code (Visual Studio Code)
   */
  launchEditor?: 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' | 'sublime' | 'vim' | 'visualstudio' | 'webstorm' | 'rider' | 'cursor' | string

  include?: FilterPattern
  exclude?: FilterPattern
}

example

Demo

🔌 Configuration IDE / Editor

Using the launchEditor option configuration to specify the IDE (Please ensure that the editor's environment variables are correctly configured beforehand.)

It uses an environment variable named LAUNCH_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 VS Code when inspection clicked, set export LAUNCH_EDITOR=code in your shell and you must allow vscdoe check your files.

VS Code

• install VS Code command line tools, see the official docs

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

  export LAUNCH_EDITOR=code

VS Code with WSL (Windows)

• add the configuration in the settings.json

• restart the VS Code (All Windows should be closed to take effect)

{
  // other config...

  "terminal.integrated.env.linux": {
    "EDITOR": "code"
  }
}

WebStorm

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

  export LAUNCH_EDITOR='/Applications/WebStorm.app/Contents/MacOS/webstorm'

OR

• install WebStorm command line tools

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

  export LAUNCH_EDITOR=webstorm

PhpStorm

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

  export LAUNCH_EDITOR='/Applications/PhpStorm.app/Contents/MacOS/phpstorm'

OR

• install PhpStorm command line tools

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

  export LAUNCH_EDITOR=phpstorm

Vim

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

export LAUNCH_EDITOR=vim

Credits

This project is inspired by react-dev-inspector .

Partially implementation is inspired by vite-plugin-vue-inspector .

License

MIT License © 2025-PRESENT Triumph-light