code-inspector (AI-Enhanced Fork)

Fork of zh-lx/code-inspector with AI-first workflow enhancements

---

🎯 Why This Fork?

This is an enhanced fork of code-inspector-plugin with AI-first workflow improvements.

The original plugin is excellent for traditional IDE workflows (click → open in VSCode/Cursor). But if you're doing Vibe Coding (living in Claude Code, Cursor Composer, or any AI chat interface), you need a different workflow:

"I don't want to open my IDE. I want to copy the file path and paste it to my AI assistant."

🆕 What's New in This Fork (v1.2.12)

• 📋 Copy Mode: Click to copy file paths instead of opening IDE

  • Visual toast notifications when copying
  • Perfect for @-mentioning files in AI chats
  • Format: src/components/Button.tsx:42:10

• ⌨️ Mode Switching: Press Shift+Alt+C / Shift+Opt+C to cycle through modes:

  • Copy Path (AI workflow)
  • Open in IDE (traditional workflow)
  • Copy + Open (hybrid workflow)
  • Open Target (custom URL)

• 🔄 Dynamic Context Menu: Right-click shows component hierarchy, all actions respect current mode

• 🎨 Polished UX: Toast notifications, dynamic panel titles, unified interaction model

In short: Give AI your exact code context in 3 seconds, not 3 minutes of screenshot describing.

📚 For original features (framework support, IDE support, core functionality), see upstream docs

🚀 Installation

Since this is a fork, you need to install from our private registry (Cloudsmith) instead of npm.

Step 1: Configure Registry for Scoped Packages

Create or update .npmrc in your project root:

@code-inspector:registry=https://npm.cloudsmith.io/mark/code-inspector/

This tells npm/pnpm to fetch @code-inspector/* packages from Cloudsmith instead of npm.

Step 2: Install Main Package

pnpm add code-inspector-plugin@https://npm.cloudsmith.io/mark/code-inspector/code-inspector-plugin/-/code-inspector-plugin-1.2.12.tgz

Why both steps? The main package code-inspector-plugin uses direct URL. But it depends on scoped packages like @code-inspector/core, @code-inspector/vite, etc. The .npmrc config ensures these dependencies are also fetched from Cloudsmith.

Why Cloudsmith? We use the same package name as upstream, so we need a private registry. Cloudsmith automatically proxies other npm packages, so only code-inspector related packages come from our registry.

🎮 Usage

Quick Start (AI Workflow)

// vite.config.js
import { codeInspectorPlugin } from 'code-inspector-plugin';

export default {
  plugins: [
    codeInspectorPlugin({
      bundler: 'vite',
      behavior: {
        defaultAction: 'copy',  // 👈 Copy mode for AI workflow
      },
      showSwitch: true,         // 👈 Show toggle button
    }),
  ],
};

Now:

1. Run your dev server
2. Hold Option+Shift (Mac) or Alt+Shift (Windows)
3. Click any element → path copied!
4. Paste to Claude: @src/components/Button.tsx:42:10 fix this

Traditional IDE Workflow

codeInspectorPlugin({
  bundler: 'vite',
  behavior: {
    defaultAction: 'locate',  // Opens IDE instead of copying
  },
})

Hybrid Workflow

codeInspectorPlugin({
  bundler: 'vite',
  behavior: {
    defaultAction: 'copy',
    copy: true,
    locate: true,
  },
  showSwitch: true,
})

Press Shift+Alt+C / Shift+Opt+C to switch between copy and IDE modes on the fly.

All Options

codeInspectorPlugin({
  bundler: 'vite',              // Required: 'vite' | 'webpack' | 'rspack' | etc.
  behavior: {
    defaultAction: 'copy',      // 'copy' | 'locate' | 'target' | 'all'
    copy: true,                 // Enable copy mode
    locate: true,               // Enable IDE opening
    target: 'custom-url-{file}', // Custom URL template
  },
  showSwitch: true,             // Show floating toggle button
  editor: 'vscode',             // IDE (auto-detected if not specified)
})

📚 For framework-specific setup (Next.js, Nuxt, etc.), bundler options, and advanced configs, see upstream docs

🎬 Demo

Left: Traditional workflow - taking screenshots, describing bugs Right: AI-enhanced workflow - 3 seconds, exact context

🤝 Upstream & Contributing

This fork tracks zh-lx/code-inspector. We maintain compatibility with upstream and contribute improvements back when possible.

Upstream PRs:

• ✅ #409 - Mode switching features - MERGED! 🎉
• 🔄 #420 - Right-click mode support + notifications - Under review

If you want these features in the official version, please 👍 the PRs or leave comments!

📖 Documentation

• Upstream Docs: inspector.fe-dev.cn - Full feature list, all framework configs
• This Fork: Focus on AI-enhanced features above
• Maintenance: See MAINTENANCE.md for development workflow

🔧 For Reference: Detailed Framework Configs (from upstream)

Note: These are reference configs from upstream. Our fork works exactly the same way, just install from Cloudsmith instead of npm.

Webpack

Click to expand

// webpack.config.js
const { codeInspectorPlugin } = require('code-inspector-plugin');

module.exports = () => ({
  plugins: [
    codeInspectorPlugin({
      bundler: 'webpack',
    }),
  ],
});

Click to expand configuration about: vite

// vite.config.js
import { defineConfig } from 'vite';
import { codeInspectorPlugin } from 'code-inspector-plugin';

export default defineConfig({
  plugins: [
    codeInspectorPlugin({
      bundler: 'vite',
    }),
  ],
});

Click to expand configuration about: rspack

// rspack.config.js
const { codeInspectorPlugin } = require('code-inspector-plugin');

module.exports = {
  // other config...
  plugins: [
    codeInspectorPlugin({
      bundler: 'rspack',
    }),
    // other plugins...
  ],
};

Click to expand configuration about: rsbuild

// rsbuild.config.js
const { codeInspectorPlugin } = require('code-inspector-plugin');

module.exports = {
  // other config...
  tools: {
    rspack: {
      plugins: [
        codeInspectorPlugin({
          bundler: 'rspack',
        }),
      ],
    },
  },
};

Click to expand configuration about: esbuild

// esbuild.config.js
const esbuild = require('esbuild');
const { codeInspectorPlugin } = require('code-inspector-plugin');

esbuild.build({
  // other configs...
  // [注意] esbuild 中使用时，dev 函数的返回值需自己根据环境判断，本地开发的环境返回 true，线上打包返回 false
  plugins: [codeInspectorPlugin({ bundler: 'esbuild', dev: () => true })],
});

Click to expand configuration about: farm

// farm.config.js
import { defineConfig } from '@farmfe/core';
import { codeInspectorPlugin } from 'code-inspector-plugin';

export default defineConfig({
  vitePlugins: [
    codeInspectorPlugin({
      bundler: 'vite',
    }),
    // ...other code
  ],
});

Click to expand configuration about: vue-cli

// vue.config.js
const { codeInspectorPlugin } = require('code-inspector-plugin');

module.exports = {
  // ...other code
  chainWebpack: (config) => {
    config.plugin('code-inspector-plugin').use(
      codeInspectorPlugin({
        bundler: 'webpack',
      })
    );
  },
};

Click to expand configuration about: nuxt

• For nuxt3.x :

  // nuxt.config.js
  import { codeInspectorPlugin } from 'code-inspector-plugin';
  
  // https://nuxt.com/docs/api/configuration/nuxt-config
  export default defineNuxtConfig({
    vite: {
      plugins: [codeInspectorPlugin({ bundler: 'vite' })],
    },
  });

• For nuxt2.x :

  // nuxt.config.js
  import { codeInspectorPlugin } from 'code-inspector-plugin';
  
  export default {
    build: {
      extend(config) {
        config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' }));
        return config;
      },
    },
  };

Click to expand configuration about: next.js

• For next.js(<= 14.x):

  // next.config.js
  const { codeInspectorPlugin } = require('code-inspector-plugin');
  
  const nextConfig = {
    webpack: (config, { dev, isServer }) => {
      config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' }));
      return config;
    },
  };
  
  module.exports = nextConfig;

• For next.js(15.0.x ~ 15.2.x):

  import type { NextConfig } from 'next';
  import { codeInspectorPlugin } from 'code-inspector-plugin';
  
  const nextConfig: NextConfig = {
    experimental: {
      turbo: {
        rules: codeInspectorPlugin({
          bundler: 'turbopack',
        }),
      },
    },
  };
  
  export default nextConfig;

• For next.js(>= 15.3.x):

  // next.config.js
  import type { NextConfig } from 'next';
  import { codeInspectorPlugin } from 'code-inspector-plugin';
  
  const nextConfig: NextConfig = {
    turbopack: {
      rules: codeInspectorPlugin({
        bundler: 'turbopack',
      }),
    },
  };
  
  export default nextConfig;

Click to expand configuration about: umi.js

• With webpack:

  // umi.config.js or umirc.js
  import { defineConfig } from '@umijs/max';
  import { codeInspectorPlugin } from 'code-inspector-plugin';
  
  export default defineConfig({
    chainWebpack(memo) {
      memo.plugin('code-inspector-plugin').use(
        codeInspectorPlugin({
          bundler: 'webpack',
        })
      );
    },
    // other config
  });

• With mako:

  // .umirc.ts
  import { defineConfig } from 'umi';
  import { codeInspectorPlugin } from 'code-inspector-plugin';
  
  export default defineConfig({
    // other config...
    mako: {
      plugins: [
        codeInspectorPlugin({
          bundler: 'mako',
        }),
      ],
    },
  });

Click to expand configuration about: astro

// astro.config.mjs
import { defineConfig } from 'astro/config';
import { codeInspectorPlugin } from 'code-inspector-plugin';

export default defineConfig({
  vite: {
    plugins: [codeInspectorPlugin({ bundler: 'vite' })],
  },
});

🔧 Development & Maintenance

• Fork Maintainer: @MarkShawn2020
• Maintenance Guide: MAINTENANCE.md - Publishing, releases, development setup
• Issues: Report fork-specific issues here
• Upstream Issues: Report general issues to zh-lx/code-inspector

🌟 Credits

• Original Author: @zh-lx - Huge thanks for creating this amazing tool!
• Original Repo: zh-lx/code-inspector
• Contributors:

📧 Support

• Fork Questions: Open an issue on this repo
• General Questions: Visit upstream docs or upstream repo
• Original Author: Follow @zh-lx on Twitter or sponsor the project

---

Love this fork? Consider:

• ⭐ Starring this repo
• ⭐ Starring the original repo
• 👍 Supporting the upstream PR #409 to get these features merged!

Built for developers who believe AI should know exactly where the code is. 🚀