Code Inspector

https://github.com/zh-lx/code-inspector
Admin
Click elements on a webpage to automatically open the code editor and position the cursor to the...
Tokens:20,277
Snippets:334
Trust Score:9.6
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install Project Dependencies

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/vite-solid/README.md

Installs all necessary project dependencies using npm, pnpm, or yarn. Run this command in the project directory before starting development or building.

```bash
npm install # or pnpm install or yarn install
```

--------------------------------

### Install OpenCode SDK

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/feature/ai.md

Command to install the required OpenCode SDK package.

```bash
npm i @opencode-ai/sdk
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/webpack-vue-tsx/README.md

Installs all necessary dependencies for the project. Run this command after cloning the repository.

```bash
yarn install
```

--------------------------------

### Basic Configuration Example

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/start.md

A basic example demonstrating how to configure the Code Inspector. Ensure all necessary imports are present before use.

```javascript
const inspector = new Inspector({
  // Configuration options go here
});
```

--------------------------------

### Start Development Server

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/rspack-vue3/README.md

Starts the Rspack development server for local testing and development.

```bash
npm run dev
```

--------------------------------

### Install Dependencies

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/rspack-vue3/README.md

Installs the necessary project dependencies using npm.

```bash
npm install
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/vite-qwik/README.md

Run this command to install all necessary dependencies for the Qwik project. This is a standard step after cloning or creating a new project.

```bash
$ npm install # or pnpm install or yarn install
```

--------------------------------

### Install Dependencies

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/turbopack-next/README.md

Installs project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Run Development Server

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/turbopack-next/README.md

Starts the Next.js development server with Turbopack.

```bash
pnpm dev
```

--------------------------------

### Configure Codex SDK

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/feature/ai.md

Installation and configuration for the Codex SDK, including environment variable setup.

```bash
npm i @openai/codex-sdk
```

```javascript
codeInspectorPlugin({
  behavior: {
    ai: {
      codex: {
        type: 'sdk',
        options: {
          model: 'gpt-5-codex',
          models: ['gpt-5-codex', 'gpt-5.1-codex'],
          approvalPolicy: 'on-request',
          sandboxMode: 'workspace-write',
          cwd: process.cwd(),
        },
      },
    },
  },
}),
```

```shell
# .env.local
OPENAI_API_KEY=sk-xxxxx
OPENAI_BASE_URL=https://your-openai-gateway.example.com/v1
```

```javascript
codeInspectorPlugin({
  behavior: {
    ai: {
      codex: {
        type: 'sdk',
        options: {
          apiKey: process.env.OPENAI_API_KEY,
          baseUrl: process.env.OPENAI_BASE_URL,
          model: 'gpt-5-codex',
          models: ['gpt-5-codex', 'gpt-5.1-codex'],
        },
      },
    },
  },
}),
```

--------------------------------

### Start Development Server with pnpm

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/farm-vue3/README.md

Starts the development server for the Farm + Vue 3 project. This command is used during development to see changes live.

```bash
pnpm start
```

--------------------------------

### Run Development Server

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/next15/README.md

Commands to start the Next.js development server using different package managers.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Start Nuxt 3 Development Server

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/nuxt/README.md

Start the Nuxt 3 development server on http://localhost:3000 using npm, pnpm, yarn, or bun.

```bash
# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev
```

--------------------------------

### Install Claude Agent SDK

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/feature/ai.md

Command to install the required SDK package for SDK mode.

```bash
npm i @anthropic-ai/claude-agent-sdk
```

--------------------------------

### Install with npm

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/start.md

Install the code-inspector-plugin using npm. This command adds the plugin as a development dependency.

```shell
npm install code-inspector-plugin -D
```

--------------------------------

### Install with pnpm

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/start.md

Install the code-inspector-plugin using pnpm. This command adds the plugin as a development dependency.

```shell
pnpm add code-inspector-plugin -D
```

--------------------------------

### Install Dependencies for Nuxt 3

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/nuxt/README.md

Install project dependencies using npm, pnpm, yarn, or bun.

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

--------------------------------

### Install with yarn

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/start.md

Install the code-inspector-plugin using yarn. This command adds the plugin as a development dependency.

```shell
yarn add code-inspector-plugin -D
```

--------------------------------

### Install code-inspector-plugin

Source: https://github.com/zh-lx/code-inspector/blob/main/packages/mako/README.md

Install the code-inspector-plugin package as a development dependency using npm, yarn, or pnpm.

```bash
npm i code-inspector-plugin -D
# or
yarn add code-inspector-plugin -D
# or
pnpm add code-inspector-plugin -D
```

--------------------------------

### Run Astro v6 development and build commands

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/astro-v6/README.md

Use these commands to start the development server or build the project for production.

```sh
pnpm dev
pnpm build
```

--------------------------------

### Install code-inspector plugin

Source: https://github.com/zh-lx/code-inspector/blob/main/README.md

Install the code-inspector plugin using npm, yarn, or pnpm. This command should be run as a development dependency.

```bash
npm i code-inspector-plugin -D
```

```bash
yarn add code-inspector-plugin -D
```

```bash
pnpm add code-inspector-plugin -D
```

--------------------------------

### Run Development Server

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/webpack-vue-tsx/README.md

Compiles the project and starts a hot-reloading development server. Useful for iterative development.

```bash
yarn serve
```

--------------------------------

### Set Environment Variables for Claude SDK

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/feature/ai.md

Example content for .env.local to store API credentials.

```shell
# .env.local
ANTHROPIC_API_KEY=sk-xxxxx
ANTHROPIC_BASE_URL=https://your-claude-gateway.example.com
```

--------------------------------

### Install code-inspector-plugin with npm

Source: https://github.com/zh-lx/code-inspector/blob/main/packages/code-inspector-plugin/README.md

Install the code-inspector-plugin using npm. This command adds the plugin as a development dependency.

```bash
npm i code-inspector-plugin -D
```

--------------------------------

### External Svelte Store Example

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/vite-svelte/README.md

Demonstrates how to create a simple external store using `svelte/store`. This is useful for preserving component state across Hot Module Replacement (HMR) updates.

```typescript
import { writable } from 'svelte/store'
export default writable(0)
```

--------------------------------

### Get Help with Astro CLI

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/vite-astro/README.md

Access the help documentation for the Astro CLI to understand available commands and their options. This is useful for exploring the full capabilities of the Astro CLI.

```sh
npm run astro -- --help
```

--------------------------------

### Configure rsbuild with code-inspector-plugin

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/start.md

Set up the plugin within your rsbuild configuration. Ensure 'code-inspector-plugin' is installed.

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

export default defineConfig({
  // ...other config
  tools: {
    rspack: {
      plugins: [
        codeInspectorPlugin({
          bundler: 'rspack',
        }),
      ],
    },
  },
});
```

--------------------------------

### Configure codeInspectorPlugin

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/api/basic.md

Basic setup for the codeInspectorPlugin with required bundler and optional editor parameters.

```typescript
import { codeInspectorPlugin } from 'code-inspector-plugin';

codeInspectorPlugin({
  bundler: 'vite',
  editor: 'cursor',
  // See below for other properties...
});
```

--------------------------------

### Configure Mako with Code Inspector

Source: https://github.com/zh-lx/code-inspector/blob/main/packages/turbopack/README.md

Add the code-inspector-plugin to your Mako build process. This example demonstrates configuration within `.umirc.ts`.

```typescript
    // .umirc.ts
    import { defineConfig } from 'umi';
    import { codeInspectorPlugin } from 'code-inspector-plugin';

    export default defineConfig({
      // other config...
      mako: {
        plugins: [
          codeInspectorPlugin({
            bundler: 'mako',
          }),
        ],
      },
    });
    
```

--------------------------------

### Create Astro Project with Basics Template

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/vite-astro/README.md

Use this command to scaffold a new Astro project using the 'basics' template. This sets up a foundational project structure for you to build upon.

```sh
npm create astro@latest -- --template basics
```

--------------------------------

### Preview Production Build Locally

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/vite-astro/README.md

Use this command to preview your production build locally before deploying. It serves the contents of the `./dist/` folder, allowing you to test the final output.

```sh
npm run preview
```

--------------------------------

### Build for Production

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/webpack-vue-tsx/README.md

Compiles and minifies the project for production deployment. Generates optimized static assets.

```bash
yarn build
```

--------------------------------

### Preview Production Build with pnpm

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/farm-vue3/README.md

Previews the production build of the application. This command serves the optimized build locally to verify its correctness before deployment.

```bash
pnpm preview
```

--------------------------------

### Configure Codex Terminal

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/feature/ai.md

Enables the native terminal interface for Codex. Requires node-pty to be installed in the runtime environment.

```javascript
codeInspectorPlugin({
  behavior: {
    ai: {
      codex: {
        type: 'terminal',
      },
    },
  },
}),
```

--------------------------------

### Configure pathFormat for IDE integration

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/api/advance.md

Defines the command template for opening files in non-built-in IDEs using dynamic placeholders.

```json
["{file}", "--line", "{line}", "--column", "{column}"]
```

--------------------------------

### Build for Production with pnpm

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/farm-vue3/README.md

Builds the application for production deployment. This command optimizes assets and code for a production environment.

```bash
pnpm build
```

--------------------------------

### Astro Project Structure Overview

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/vite-astro/README.md

Understand the default directory layout of an Astro project. Key directories include 'public' for static assets, 'src/pages' for routes, and 'src/components' for reusable UI elements.

```text
/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   └── Card.astro
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
└── package.json
```

--------------------------------

### Preview Nuxt 3 Production Build Locally

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/nuxt/README.md

Locally preview the production build of the Nuxt 3 application using npm, pnpm, yarn, or bun.

```bash
# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview
```

--------------------------------

### Configure next 15.0.x ~ 15.2.x with code-inspector-plugin

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/start.md

Use the 'experimental.turbo.rules' for configuring the plugin in next.js versions 15.0.x to 15.2.x.

```js
// next.config.js
import type { NextConfig } from 'next';
import { codeInspectorPlugin } from 'code-inspector-plugin';

const nextConfig: NextConfig = {
  experimental: {
    turbo: {
      rules: codeInspectorPlugin({
        bundler: 'turbopack',
      }),
    },
  },
};

export default nextConfig;
```

--------------------------------

### Build Nuxt 3 Application for Production

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/nuxt/README.md

Build the Nuxt 3 application for production using npm, pnpm, yarn, or bun.

```bash
# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build
```

--------------------------------

### Configure OpenCode SDK

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/feature/ai.md

Configuration for using the OpenCode SDK mode with specific policy and sandbox settings.

```js
codeInspectorPlugin({
  behavior: {
    ai: {
      opencode: {
        type: 'sdk',
        options: {
          model: 'open-code-model',
          models: ['open-code-model', 'open-code-model-next'],
          approvalPolicy: 'on-request',
          sandboxMode: 'workspace-write',
          cwd: process.cwd(),
        },
      },
    },
  },
}),
```

--------------------------------

### Build for Production

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/rspack-vue3/README.md

Builds the Rspack project for production deployment.

```bash
npm run build
```

--------------------------------

### Specify Webstorm executable path on Windows via .env.local

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/ide.md

For unsupported IDEs on Windows, specify the full executable path in `.env.local` to use Webstorm.

```perl
# .env.local
CODE_EDITOR=D:\webstorm\WebStorm 2023.1.3\bin\webstorm64.exe
```

--------------------------------

### Configure Custom Copy Format

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/feature/copy.md

Define a string template for the copied path using placeholders like {file}, {line}, and {column}.

```js
codeInspectorPlugin({
  behavior: {
    copy: '@{file}#{line}',
  },
}),
```

--------------------------------

### Configure OpenCode CLI

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/feature/ai.md

Minimal configuration to enable OpenCode CLI within the plugin.

```js
codeInspectorPlugin({
  behavior: {
    ai: {
      opencode: true,
    },
  },
}),
```

--------------------------------

### Configure Claude Agent SDK

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/feature/ai.md

Basic configuration for using the Claude Agent SDK mode.

```js
codeInspectorPlugin({
  behavior: {
    ai: {
      claudeCode: {
        type: 'sdk',
        options: {
          model: 'claude-sonnet-4.5',
          models: ['claude-sonnet-4.5', 'claude-opus-4.1'],
          maxTurns: 20,
          permissionMode: 'bypassPermissions',
        },
      },
    },
  },
}),
```

--------------------------------

### codeInspectorPlugin(options)

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/api/basic.md

Initializes the code-inspector-plugin with the specified configuration options.

```APIDOC
## codeInspectorPlugin(options)

### Description
Configures the behavior of the code-inspector-plugin for various bundlers and development environments.

### Parameters
- **bundler** (string) - Required - The bundler tool used (vite, webpack, rspack, esbuild, turbopack, mako).
- **editor** (string) - Optional - Specifies the IDE to open. Defaults to automatic detection.
- **dev** (boolean | () => boolean) - Optional - Manually define if the current environment is development.
- **enforcePre** (boolean) - Optional - Whether to add 'enforce: pre' configuration. Defaults to true.
- **hotKeys** (('ctrlKey' | 'altKey' | 'metaKey' | 'shiftKey')[] | false) - Optional - Keyboard shortcuts to trigger the feature. Defaults to ['altKey', 'shiftKey'].
- **showSwitch** (boolean) - Optional - Whether to display a UI switch on the page. Defaults to false.
- **autoToggle** (boolean) - Optional - Automatically turn off the switch after IDE jump. Defaults to true.
- **lang** ('en' | 'zh') - Optional - Client UI language. Defaults to 'en'.
- **launchType** ('exec' | 'open' | 'open-bg') - Optional - Method for launching the IDE on MacOS. Defaults to 'exec'.
```

--------------------------------

### Configure path mappings

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/api/advance.md

Use mappings to redirect file paths from node_modules to local project directories when using the include option.

```ts
import path from 'path';

codeInspectorPlugin({
  bundler: 'vite',
  include: ['pkg-a', 'pkg-b'],
  mappings: {
    'pkg-a': path.resolve(__dirname, '../pkg-a'),
    'pkg-b': path.resolve(__dirname, '../pkg-b'),
  },
});
```

--------------------------------

### Behavior Configuration

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/api/advance.md

The Behavior configuration allows users to customize how clicking elements interacts with the IDE, clipboard, or AI assistants.

```APIDOC
## Behavior Configuration

### Description
Configures the interaction behavior when clicking elements, including IDE location, clipboard copying, custom target URLs, and AI assistant integration.

### Type
```ts
type Behavior = {
  locate?: boolean;
  copy?: boolean | string;
  target?: string;
  ai?: {
    claudeCode?: boolean | ClaudeCodeOptions;
    codex?: boolean | CodexOptions;
    opencode?: boolean | OpenCodeOptions;
    expireDays?: number;
  };
  defaultAction?: 'copy' | 'locate' | 'target' | 'ai';
};
```
```

--------------------------------

### Specify VSCodium executable path on MAC via .env.local

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/ide.md

For unsupported IDEs on MAC, specify the full executable path in `.env.local` to use VSCodium.

```perl
# .env.local
CODE_EDITOR=/Applications/VSCodium.app/Contents/MacOS/Electron
```

--------------------------------

### Configure Custom OpenCode CLI Options

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/feature/ai.md

Advanced configuration for OpenCode CLI, including model selection and environment variables.

```js
codeInspectorPlugin({
  behavior: {
    ai: {
      opencode: {
        type: 'cli',
        options: {
          model: 'open-code-model',
          models: ['open-code-model', 'open-code-model-next'],
          profile: 'build',
          env: {
            OPENCODE_CONFIG_DIR: process.env.OPENCODE_CONFIG_DIR,
          },
        },
      },
    },
  },
}),
```

--------------------------------

### Configure Next.js (15.0.x ~ 15.2.x) with code-inspector-plugin

Source: https://github.com/zh-lx/code-inspector/blob/main/README.md

Utilize the experimental turbo rules for integrating the plugin in this Next.js version range.

```typescript
import type { NextConfig } from 'next';
import { codeInspectorPlugin } from 'code-inspector-plugin';

const nextConfig: NextConfig = {
  experimental: {
    turbo: {
      rules: codeInspectorPlugin({
        bundler: 'turbopack',
      }),
    },
  },
};

export default nextConfig;
```

--------------------------------

### Configure Claude Code CLI

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/feature/ai.md

Minimal configuration to enable the Claude Code CLI integration.

```js
codeInspectorPlugin({
  behavior: {
    ai: {
      claudeCode: true,
    },
  },
}),
```

--------------------------------

### Configuration Options

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/api/advance.md

Available configuration properties for the code-inspector-plugin.

```APIDOC
## Configuration Properties

### importClient
- **Type**: 'file' | 'code'
- **Description**: Method of importing client interaction code: 'file' means importing the file containing interaction code; 'code' means directly injecting interaction code into the entry file.

### needEnvInspector
- **Type**: boolean (default: false)
- **Description**: When set to true, the plugin only works when .env.local file exists and contains CODE_INSPECTOR=true. (Deprecated)

### port
- **Type**: number (default: 5678)
- **Description**: Specifies the starting port for the server of code-inspector-plugin to find.

### printServer
- **Type**: boolean (default: false)
- **Description**: Whether to print the server startup information in the console.

### server
- **Type**: 'open' | 'close' (default: 'open')
- **Description**: Whether to enable the local server. Keep it enabled when using features that communicate with the local service, such as code location and AI Assistant.

### pathType
- **Type**: 'absolute' | 'relative' (default: 'relative')
- **Description**: Specifies the path type of the data-insp-path attribute.
```

--------------------------------

### Configure OpenCode Terminal

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/feature/ai.md

Configuration to enable the native OpenCode CLI terminal in the browser.

```js
codeInspectorPlugin({
  behavior: {
    ai: {
      opencode: {
        type: 'terminal',
      },
    },
  },
}),
```

--------------------------------

### Enable Copy Path Feature

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/feature/copy.md

Configure the plugin behavior to enable the copy functionality.

```js
codeInspectorPlugin({
  behavior: {
    copy: true,
  },
}),
```

--------------------------------

### Configure vite with code-inspector-plugin

Source: https://github.com/zh-lx/code-inspector/blob/main/README.md

Add the plugin to your vite configuration file.

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

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

--------------------------------

### Configuration Options

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/api/advance.md

Available configuration options for the code-inspector plugin.

```APIDOC
## Configuration Options

### cache
- **Type**: `boolean`
- **Default**: `false`
- **Description**: Enables filesystem cache for webpack/rspack projects. Recommended to set a fixed `port` when enabled.

### skipSnippets
- **Type**: `('console' | 'htmlScript')[]`
- **Default**: `[]`
- **Description**: Defines which code snippets to skip during injection. `console` skips error/warn overrides, `htmlScript` skips script tag injection.

### modeKey
- **Type**: `string`
- **Default**: `z`
- **Description**: The letter shortcut key used in combination with hotKeys to open the feature switch panel.

### vueLoader
- **Type**: `'custom' | 'internal'`
- **Default**: `'custom'`
- **Description**: Sets the Vue file compilation method for webpack/rspack/rsbuild projects. 'custom' offers higher compatibility, while 'internal' uses the internal compiler node transform.
```

--------------------------------

### Configure farm with code-inspector-plugin

Source: https://github.com/zh-lx/code-inspector/blob/main/README.md

Add the plugin to the vitePlugins array in your farm configuration.

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

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

--------------------------------

### Configure Nuxt 2.x with code-inspector-plugin

Source: https://github.com/zh-lx/code-inspector/blob/main/README.md

Extend the build configuration in nuxt.config.js to include the plugin for Nuxt 2.

```javascript
// nuxt.config.js
import { codeInspectorPlugin } from 'code-inspector-plugin';

export default {
  build: {
    extend(config) {
      config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' }));
      return config;
    },
  },
};
```

--------------------------------

### mappings

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/api/advance.md

Configuration option to map file paths in node_modules to real file paths in your project, used in conjunction with the include option.

```APIDOC
## mappings

### Description
Used with `include` to map file paths in `node_modules` to real file paths in your project.

### Type
`Record<string, string> | Array<{ find: string | RegExp, replacement: string }>`

### Example
```ts
import path from 'path';

codeInspectorPlugin({
  bundler: 'vite',
  include: ['pkg-a', 'pkg-b'],
  mappings: {
    'pkg-a': path.resolve(__dirname, '../pkg-a'),
    'pkg-b': path.resolve(__dirname, '../pkg-b'),
  },
});
```
```

--------------------------------

### Configure Codex CLI

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/feature/ai.md

Minimal and custom configurations for the Codex CLI mode.

```javascript
codeInspectorPlugin({
  behavior: {
    ai: {
      codex: true,
    },
  },
}),
```

```javascript
codeInspectorPlugin({
  behavior: {
    ai: {
      codex: {
        type: 'cli',
        options: {
          model: 'gpt-5-codex',
          models: ['gpt-5-codex', 'gpt-5.1-codex'],
          profile: 'default',
          sandbox: 'workspace-write',
          fullAuto: true,
          config: {
            'reasoning.effort': 'high',
          },
        },
      },
    },
  },
}),
```

--------------------------------

### Execute inline MDX expressions

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/astro-v6/src/pages/mdx-demo.mdx

Demonstrates rendering dynamic results and regex testing directly within Markdown text.

```jsx
- Expression result: {inlineExpressionProbe.format({ label: inlineExpressionProbe.label, items: visibleGroups })}
- Regex expression: {(/value\}/).test('value}') ? 'regex literal matched' : 'regex literal missed'}
```

--------------------------------

### Configure Qwik Vite for CSR Mode

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/vite-qwik/README.md

This snippet shows how to configure Vite to use Qwik in pure Client-Side Rendering (CSR) mode. This is useful for specific development or testing scenarios.

```typescript
export default defineConfig({
  plugins: [
    qwikVite({
      csr: true,
    }),
  ],
})
```

--------------------------------

### Configure Next.js (>= 15.3.x) with code-inspector-plugin

Source: https://github.com/zh-lx/code-inspector/blob/main/README.md

Configure the plugin directly under the turbopack rules for Next.js versions 15.3.x and above.

```typescript
// 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;
```

--------------------------------

### Pass Environment Variables Explicitly to SDK

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/feature/ai.md

Configuration to inject environment variables directly into the SDK options.

```js
codeInspectorPlugin({
  behavior: {
    ai: {
      claudeCode: {
        type: 'sdk',
        options: {
          env: {
            ANTHROPIC_API_KEY: process.env.ANTHROPIC_API_KEY,
            ANTHROPIC_BASE_URL: process.env.ANTHROPIC_BASE_URL,
          },
        },
      },
    },
  },
}),
```

--------------------------------

### Configure Code Inspector with Vite (Astro)

Source: https://github.com/zh-lx/code-inspector/blob/main/packages/vite/README.md

Set up the code-inspector-plugin for an Astro project using Vite. The plugin is added to the `vite.plugins` array in your `astro.config.mjs` file.

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

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

--------------------------------

### Run Astro CLI Commands

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/vite-astro/README.md

Execute various Astro command-line interface (CLI) commands, such as `astro add` for integrating UI frameworks or `astro check` for verifying your project's integrity.

```sh
npm run astro ...
```

--------------------------------

### Enable AI Assistant in Plugin Configuration

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/feature/ai.md

Configure the AI behavior within the codeInspectorPlugin options. Multiple providers can be enabled simultaneously.

```js
codeInspectorPlugin({
  behavior: {
    ai: {
      codex: true,
    },
  },
}),
```

--------------------------------

### Configure target URL template

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/feature/target.md

Define the URL pattern for source file navigation within the codeInspectorPlugin configuration.

```js
codeInspectorPlugin({
  behavior: {
    target: 'https://github.com/user/repo/blob/main/{file}#L{line}',
  },
}),
```

--------------------------------

### Set Default Action in code-inspector

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/feature/switch.md

Configures the initial active feature when the panel is opened. Valid options are 'locate', 'copy', 'target', or 'ai'.

```js
codeInspectorPlugin({
  behavior: {
    defaultAction: 'locate', // 'locate' | 'copy' | 'target' | 'ai'
  },
}),
```

--------------------------------

### OpenCode Type Definitions

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/feature/ai.md

TypeScript definitions for OpenCode configuration options.

```ts
type OpenCodeOptions =
  | {
      type?: 'cli';
      options?: OpenCodeCliOptions;
    }
  | {
      type: 'sdk';
      options?: OpenCodeSdkOptions;
    }
  | {
      type: 'terminal';
      options?: OpenCodeCliOptions;
    };

type OpenCodeCliOptions = CodexCliOptions;

type OpenCodeSdkOptions = Omit<CodexSdkOptions, 'config'> & {
  config?: Record<string, any>;
  opencodePathOverride?: string;
};
```

--------------------------------

### Configure webpack with code-inspector-plugin

Source: https://github.com/zh-lx/code-inspector/blob/main/README.md

Integrate the plugin into your webpack configuration file.

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

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

--------------------------------

### Configure include for monorepo packages

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/api/advance.md

Use this configuration to ensure local packages linked within node_modules are correctly processed by the plugin.

```shell
my-project
  - pkg-a
  - pkg-b
  - main-pkg # imports pkg-a and pkg-b via package.json `dependencies`
    - node_modules
      - pkg-a
      - pkg-b
```

```ts
codeInspectorPlugin({
  bundler: 'vite',
  include: ['pkg-a', 'pkg-b'],
});
```

--------------------------------

### codeInspectorPlugin Configuration

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/api/advance.md

Configuration options for the code-inspector-plugin initialization.

```APIDOC
## codeInspectorPlugin Configuration

### Parameters
- **ip** (boolean | string) - Optional - Whether to send requests to the node server via IP. Default is `false` (localhost). If `true`, detects local IP. If `string`, sends to the specified value.
- **exclude** (string | RegExp | (string | RegExp)[]) - Optional - Files to exclude from compilation. Default is `/node_modules/`. Configured values are unioned with the default.
- **include** (string | RegExp | (string | RegExp)[]) - Optional - Files to include for compilation, useful for monorepo packages linked via `node_modules`.

### Example
```ts
codeInspectorPlugin({
  bundler: 'vite',
  include: ['pkg-a', 'pkg-b'],
  exclude: ['src/ignored'],
  ip: true
});
```
```

--------------------------------

### Define Behavior Configuration Type

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/api/advance.md

Defines the structure for behavior settings including IDE location, copy formatting, target URLs, and AI assistant integration.

```ts
type Behavior = {
    /*
     * Whether to enable clicking to jump to IDE code location (default is true)
     */
    locate?: boolean;
    /*
     * Whether to enable clicking to copy source code location info (default is true)
     * Can also set a string and use {file}, {line}, {column} templates to specify the format
     * Default value true is equivalent to the string format "{file}:{line}:{column}"
     */
    copy?: boolean | string;
    /**
     * Clicking elements will jump to the specified url.
     * String type, can use {file}, {line}, {column} templates to replace code location information.
     */
    target?: string;
    /**
     * AI assistant configuration, see AI Assistant docs for details
     */
    ai?: {
      claudeCode?: boolean | ClaudeCodeOptions;
      codex?: boolean | CodexOptions;
      opencode?: boolean | OpenCodeOptions;
      /** Conversation history expiration in days, defaults to 0 (no auto-cleanup) */
      expireDays?: number;
    };
    /**
     * Default click action: 'copy' | 'locate' | 'target' | 'ai'
     */
    defaultAction?: 'copy' | 'locate' | 'target' | 'ai';
  };
```

--------------------------------

### Lint and Fix Files

Source: https://github.com/zh-lx/code-inspector/blob/main/demos/webpack-vue-tsx/README.md

Runs the linter to check for code style issues and automatically fixes them where possible.

```bash
yarn lint
```

--------------------------------

### Configure Astro with Vite and Code Inspector Plugin

Source: https://github.com/zh-lx/code-inspector/blob/main/packages/core/README.md

Integrate the code-inspector-plugin into an Astro project using Vite. This snippet shows how to add the plugin within the `vite` configuration.

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

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

--------------------------------

### Configure Astro with Vite and Code Inspector Plugin

Source: https://github.com/zh-lx/code-inspector/blob/main/README.md

Integrate the code-inspector-plugin into an Astro project using Vite. The plugin is added to the Vite configuration.

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

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

--------------------------------

### Configure esbuild with code-inspector-plugin

Source: https://github.com/zh-lx/code-inspector/blob/main/README.md

Use the plugin within the plugins array during esbuild configuration. Note the conditional dev function.

```javascript
// 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 })],
});
```

--------------------------------

### Configure Code Inspector with Mako (UmiJS)

Source: https://github.com/zh-lx/code-inspector/blob/main/packages/vite/README.md

Add the code-inspector-plugin to your UmiJS project when using Mako as the bundler. Configuration is done within the `mako` section of your `.umirc.ts` file.

```typescript
    // .umirc.ts
    import { defineConfig } from 'umi';
    import { codeInspectorPlugin } from 'code-inspector-plugin';

    export default defineConfig({
      // other config...
      mako: {
        plugins: [
          codeInspectorPlugin({
            bundler: 'mako',
          }),
        ],
      },
    });
```

--------------------------------

### Configure Custom Claude Code CLI Options

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/feature/ai.md

Advanced configuration for the CLI mode, allowing customization of models, tools, and system prompts.

```js
codeInspectorPlugin({
  behavior: {
    ai: {
      claudeCode: {
        type: 'cli',
        options: {
          model: 'claude-sonnet-4.5',
          models: ['claude-sonnet-4.5', 'claude-opus-4.1'],
          maxTurns: 20,
          permissionMode: 'bypassPermissions',
          allowedTools: ['Read', 'Write', 'Edit', 'Bash'],
          disallowedTools: ['WebSearch'],
          maxCost: 2,
          systemPrompt: 'You are an expert code assistant.',
        },
      },
    },
  },
}),
```

--------------------------------

### Specify VSCode via .env.local

Source: https://github.com/zh-lx/code-inspector/blob/main/docs/en/guide/ide.md

Set the `CODE_EDITOR` environment variable in `.env.local` to `code` to specify VSCode as the IDE.

```shell
# Specify IDE as vscode
CODE_EDITOR=code
```

--------------------------------

### Configure Next.js (<= 14.x) with code-inspector-plugin

Source: https://github.com/zh-lx/code-inspector/blob/main/README.md

Add the plugin to the webpack configuration within next.config.js for older Next.js versions.

```javascript
// 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;
```

--------------------------------

### Configure rsbuild with code-inspector-plugin

Source: https://github.com/zh-lx/code-inspector/blob/main/README.md

Add the plugin to the rspack plugins configuration within rsbuild.

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

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

--------------------------------

### Configure Vite with Code Inspector in Astro

Source: https://github.com/zh-lx/code-inspector/blob/main/packages/turbopack/README.md

Integrate the code-inspector-plugin into an Astro project using Vite. This snippet shows the configuration within `astro.config.mjs`.

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

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