code-inspector-plugin-electron

A Vite plugin + Vue composable + Electron IPC handler for code inspection in Electron apps. Shift+Option hover to inspect element info, Shift+Option click to open the source file at the exact line in VS Code.

Inspired by code-inspector-plugin but designed specifically for Electron apps using code --goto.

Features

• 🔍 Hover tooltip — hold Shift + Option (⌥) and move cursor over any element to see its tag name, file path and line number in a floating bubble
• 🎯 Precise navigation — Shift + Option (⌥) click opens the source file at the exact line
• ⚡ Build-time injection — zero runtime overhead; attributes are injected during Vite build
• 🧩 Modular — Vite plugin, Vue composable, and Electron IPC handler are independent

How It Works

1. Build time: The Vite plugin (enforce: 'pre') scans every .vue file and injects data-inspector-path and data-inspector-line attributes on every HTML element in the template.
2. Runtime: The Vue composable (useInspector) listens for mousemove (tooltip) and click (navigation) when Shift+Option is held, walks up the DOM to find the injected attributes.
3. IPC: The Electron handler receives the IPC call and runs code --goto "path:line:col" in the host VS Code.

Installation

npm install code-inspector-plugin-electron --save-dev

Usage

1. Vite Plugin — vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { inspectorPlugin } from 'code-inspector-plugin-electron'

export default defineConfig({
  plugins: [
    inspectorPlugin(), // MUST be before vue()
    vue(),
  ],
})

2. Electron Main Process — electron/main.ts

import { registerInspectorHandlers } from 'code-inspector-plugin-electron'

app.whenReady().then(() => {
  registerInspectorHandlers()
  createWindow()
})

3. Preload Script — electron/preload.cjs

const { contextBridge, ipcRenderer } = require('electron')
const { inspectorPreload } = require('code-inspector-plugin-electron')

inspectorPreload(contextBridge, ipcRenderer)

4. Vue App — src/App.vue

<script setup lang="ts">
import { useInspector } from 'code-inspector-plugin-electron'
useInspector()
</script>

API

inspectorPlugin(options?)

| Option | Type | Default | Description | |----------|----------|---------|--------------------------------------| | editor | string | code | Editor command (e.g. code, cursor) |

useInspector(options?)

| Option | Type | Default | Description | |-------------|----------------------------------------|---------------------------------------------|----------------------------------| | enabled | boolean | true | Enable/disable inspector | | modifiers | Array<'shift' \| 'alt' \| 'ctrl' \| 'meta'> | ['shift', 'meta'] | Modifier keys to trigger | | attributes| { path?: string; line?: string } | { path: 'data-inspector-path', line: 'data-inspector-line' } | Custom attribute names |

registerInspectorHandlers()

Registers inspector:open-file IPC handler. Uses $EDITOR env var or defaults to code.

inspectorPreload(contextBridge, ipcRenderer)

Exposes window.electronAPI.openFile to the renderer.

TypeScript

Add to your env.d.ts:

import type { InspectorElectronAPI } from 'code-inspector-plugin-electron'

declare global {
  interface Window {
    electronAPI?: InspectorElectronAPI
  }
}

Requirements

• Vite >= 5
• Vue >= 3 (optional — only needed for useInspector)
• Electron >= 28 (optional — only needed for registerInspectorHandlers)

License

MIT