# @code-inspector/vite 中文文档

规范地址：https://npmcn.com/package/%40code-inspector/vite/

版本：2\.0\.9
npm 元数据更新时间：2026-09-12T06:27:35.866Z
中文译文更新时间：2026-11-10T05:45:54.439Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40code-inspector/vite
原文对照：https://npmcn.com/package/%40code-inspector/vite/?lang=original
项目主页：https://inspector.fe-dev.cn/en
源码仓库：https://github.com/zh-lx/code-inspector

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：23.1 kB，6 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- 首次发布：2025-08-13T09:14:56.661Z
- 最新版本发布：2026-09-12T06:27:35.633Z
- 近 30 天下载量：1321269（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：62（近 12 个月 45 个）

## 中文简介

点击页面上的多姆,它会打开您的 IDE 并定位光标到多姆的源代码位置 .

## 安装

```sh
npm install @code-inspector/vite
```

也可以使用：`pnpm add @code-inspector/vite`、`yarn add @code-inspector/vite`、`bun add @code-inspector/vite`

## README

![](https://github.com/zh-lx/code-inspector/assets/73059627/842c3e88-dca7-4743-854c-d61093d3d34f)

## 代码检查器

[中文文档](https://inspector.fe-dev.cn/) | [文档](https://inspector.fe-dev.cn/en)

[![NPM version](https://img.shields.io/npm/v/code-inspector-plugin.svg)](https://www.npmjs.com/package/code-inspector-plugin) [![GITHUB star](https://img.shields.io/github/stars/zh-lx/code-inspector?style=flat&label=%E2%AD%90%EF%B8%8F%20stars)](https://github.com/zh-lx/code-inspector) [![NPM Downloads](https://img.shields.io/npm/dm/code-inspector-plugin.svg)](https://npmcharts.netlify.app/compare/code-inspector-plugin?minimal=true) [![MIT-license](https://img.shields.io/npm/l/code-inspector.svg)](https://opensource.org/licenses/MIT) [![GITHUB-language](https://img.shields.io/github/languages/top/zh-lx/code-inspector?logoColor=purple&color=purple)](https://github.com/zh-lx/code-inspector)

* * *

## 导 言

点击页面上的元素,可以自动打开代码编辑器并定位光标到元素的源代码.

![code-inspector](https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/demo.gif)

## 试试看网上

-   [vue 在线演示](https://stackblitz.com/edit/vitejs-vite-4pseos?file=vite.config.ts)
-   [在线演示响应](https://stackblitz.com/edit/vitejs-vite-svtwrr?file=vite.config.ts)
-   [在线演示](https://stackblitz.com/edit/vitejs-vite-iyawbf?file=vite.config.ts)
-   [固态在线演示](https://stackblitz.com/edit/solidjs-templates-6u76jn?file=vite.config.ts)
-   [qwik 在线演示](https://stackblitz.com/edit/vitejs-vite-antzds?file=vite.config.ts)
-   [svelte 在线演示](https://stackblitz.com/edit/vitejs-vite-zoncqr?file=vite.config.ts)
-   [astro 在线演示](https://stackblitz.com/edit/withastro-astro-f5xq1t?file=astro.config.mjs)

## ++ 辅助

以下是我们现在支持的编译器、网络框架和编辑器:

-   目前支持以下捆绑器:  
    网络包装  
    ✅:  
    rspack / 建设  
    农场  
    {\\fn华文楷体\\fs16\\1che0e0e0}重建  
    涡轮包装  
    马可  
    
-   目前支持以下网络框架:  
    \\\\ vue2 / vue3 / nuxt  
    qq 反应 / nextjs / mijs  
    预告  
    固态  
    qq 齐维克  
    丝绸  
    {\\fn华文楷体\\fs16\\1che0e0e0}天体  
    
-   [支持的编辑器列表](https://github.com/zh-lx/launch-ide?tab=readme-ov-file#-supported-editors) | [和其他事项](https://inspector.fe-dev.cn/en/guide/ide.html)

## QQ 安装

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

## 使用量

请在此查看更多信息 : [代码检查器插件配置](https://inspector.fe-dev.cn/en/guide/start.html#configuration)

-   1\. 构建工具
    
    点击可扩展配置 : **网络软件包**
    
    ```js
    // webpack.config.js
    const { codeInspectorPlugin } = require('code-inspector-plugin');
    
    module.exports = () => ({
      plugins: [
        codeInspectorPlugin({
          bundler: 'webpack',
        }),
      ],
    });
    ```
    点击可扩展配置 : **维特**
    
    ```js
    // vite.config.js
    import { defineConfig } from 'vite';
    import { codeInspectorPlugin } from 'code-inspector-plugin';
    
    export default defineConfig({
      plugins: [
        codeInspectorPlugin({
          bundler: 'vite',
        }),
      ],
    });
    ```
    点击可扩展配置 : **橡胶包**
    
    ```js
    // rspack.config.js
    const { codeInspectorPlugin } = require('code-inspector-plugin');
    
    module.exports = {
      // other config...
      plugins: [
        codeInspectorPlugin({
          bundler: 'rspack',
        }),
        // other plugins...
      ],
    };
    ```
    点击可扩展配置 : **建设**
    
    ```js
    // rsbuild.config.js
    const { codeInspectorPlugin } = require('code-inspector-plugin');
    
    module.exports = {
      // other config...
      tools: {
        rspack: {
          plugins: [
            codeInspectorPlugin({
              bundler: 'rspack',
            }),
          ],
        },
      },
    };
    ```
    点击可扩展配置 : **兴建**
    
    ```js
    // 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 })],
    });
    ```
    点击可扩展配置 : **农场**
    
    ```js
    // farm.config.js
    import { defineConfig } from '@farmfe/core';
    import { codeInspectorPlugin } from 'code-inspector-plugin';
    
    export default defineConfig({
      vitePlugins: [
        codeInspectorPlugin({
          bundler: 'vite',
        }),
        // ...other code
      ],
    });
    ```
    点击可扩展配置 : **维克利语name**
    
    ```js
    // vue.config.js
    const { codeInspectorPlugin } = require('code-inspector-plugin');
    
    module.exports = {
      // ...other code
      chainWebpack: (config) => {
        config.plugin('code-inspector-plugin').use(
          codeInspectorPlugin({
            bundler: 'webpack',
          })
        );
      },
    };
    ```
    点击可扩展配置 : **纳克特**
    
    -   对于 nuxt3.x :
        
        ```js
        // 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' })],
          },
        });
        ```
        
    -   用于 nuxt2.x :
        
        ```js
        // nuxt.config.js
        import { codeInspectorPlugin } from 'code-inspector-plugin';
        
        export default {
          build: {
            extend(config) {
              config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' }));
              return config;
            },
          },
        };
        ```
    点击可扩展配置 : **下一个.js**
    
    -   下一个.js(XX14x):
        
        ```js
        // 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;
        ```
        
    -   下一个.js(15.0.x~15.2x):
        
        ```js
        import type { NextConfig } from 'next';
        import { codeInspectorPlugin } from 'code-inspector-plugin';
        
        const nextConfig: NextConfig = {
          experimental: {
            turbo: {
              rules: codeInspectorPlugin({
                bundler: 'turbopack',
              }),
            },
          },
        };
        
        export default nextConfig;
        ```
        
    -   下一个.js(XX15.3.x):
        
        ```js
        // 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;
        ```
    点击可扩展配置 : **(原始内容存档于2017-09-21). mi.js**
    
    -   用网络包装 :
        
        ```js
        // 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
        });
        ```
        
    -   有马可:
        
        ```ts
        // .umirc.ts
        import { defineConfig } from 'umi';
        import { codeInspectorPlugin } from 'code-inspector-plugin';
        
        export default defineConfig({
          // other config...
          mako: {
            plugins: [
              codeInspectorPlugin({
                bundler: 'mako',
              }),
            ],
          },
        });
        ```
    点击可扩展配置 : **天体**
    
    ```js
    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import { codeInspectorPlugin } from 'code-inspector-plugin';
    
    export default defineConfig({
      vite: {
        plugins: [codeInspectorPlugin({ bundler: 'vite' })],
      },
    });
    ```
    
-   2\. 利用函数
    
    现在你可以享受使用它了
    
    在按下页面上的组合密钥时,将鼠标移出页面上会显示带有相关信息的DOM上的一个口罩层. 点击将自动打开 IDE 并定位光标到相应的代码位置 。 (Mac的默认组合密钥是: `Option + Shift`; 对于 Windows, 这是 `Alt + Shift`,浏览器控制台将输出相关的组合键提示)
    
    ![](https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/console-success.png)

## • 贡献者

特别感谢该项目的捐助者:  

![](https://contrib.rocks/image?repo=zh-lx/code-inspector)

## 交流和反馈

关于使用问题,请留言 [微博](https://twitter.com/zhulxing312147) 员额或 [提交问题](https://github.com/zh-lx/code-inspector/issues) 在吉苏布岛.

对于中文用户,可以加入QQ群 `769748484` 或者加上作者的微信账户 `zhoulx1688888` 供磋商和反馈:

![](https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/qq-group.png) ![](https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/wx-group.jpg) ![](https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/wx-qrcode.jpg)

## 提案国

赞助这个项目可以帮助作者创造更好的作品. 如果你愿意,你可以通过Alipay或WeChatPay赞助我:

![](https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/wxpay.jpg) ![](https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/alipay.jpg)

## 常见问题

### @code-inspector/vite 是什么？

点击页面上的多姆,它会打开您的 IDE 并定位光标到多姆的源代码位置 \.

### 如何安装 @code-inspector/vite？

在项目目录运行 npm install @code-inspector/vite，或使用 pnpm add / yarn add / bun add。

### @code-inspector/vite 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @code-inspector/vite 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @code-inspector/vite 可以商用吗？

@code-inspector/vite 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @code-inspector/vite 的下载量有多少？

根据 npm 官方下载统计，@code-inspector/vite 在 2026/10/10 – 2026/11/08 这 30 天内被下载 1,321,269 次，日均约 44,042 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @code-inspector/vite 还在维护吗？

最新版本 2\.0\.9 发布于 2026/09/12（1 个月前）；至今共发布 62 个版本，其中过去 12 个月发布了 45 个；首次发布于 2025/08/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。