快速开始 ​

code-inspector-plugin 支持在以 webpack、rspack 或 vite 作为打包器的项目中使用，支持 vue2/vue3/react/preact/solid 等框架，请参考如下的接入教程。

安装 ​

• 使用 npm 安装：

npm install code-inspector-plugin -D

• 使用 yarn 安装：

yarn add code-inspector-plugin -D

• 使用 pnpm 安装：

pnpm add code-inspector-plugin -D

配置 ​

1. 配置打包工具 ​

在 webpack 中使用：

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

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

在 vite 中使用：

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

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

在 rspack 中使用：

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

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

2. 配置 vscode 命令行工具 ​

• 在 VSCode 中执行 command + shift + p(mac) 或 ctrl + shift + p(windows) 命令, 搜索 指令并点击 Shell Command: Install 'code' command in PATH:

  

• 如果出现如下弹窗，说明配置成功了:

  

使用 ​

目前使用 DOM 源码定位功能的方式有两种:

方式一（推荐） ​

在页面上按住组合键时，鼠标在页面移动即会在 DOM 上出现蓝色半透明遮罩层并显示相关信息，点击一下将自动打开 IDE 并将光标定位到元素对应的代码位置。 (Mac 系统默认组合键是 Option + Shift；Window 的默认组合键是 Alt + Shift，浏览器控制台会输出相关组合键提示)

方式二 ​

当插件参数中配置 showSwitch: true 时，会在页面显示一个代码审查开关按钮，点击可切换代码审查模式开启/关闭，代码审查模式开启后使用方式同方式一中按住组合键。当开关的颜色为彩色时，表示代码审查模式开启 ；当开关颜色为黑白时，表示代码审查模式关闭 。