webpack-code-inspector-plugin

webpack-code-inspector-plugin

中文文档 | English Doc | vite-code-inspector-plugin

---

📜 介绍

点击页面上的元素，将自动打开你的代码编辑器并将光标定位到元素对应的代码位置。

🚀 安装

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

📦 使用

1. 配置 vue.config.js 或 webpack.config.js

• 如果你使用的是 vue.config.js, 添加如下配置:

  // vue.config.js
  const WebpackCodeInspectorPlugin = require('webpack-code-inspector-plugin');
  
  module.exports = {
    // ...other code
    chainWebpack: (config) => {
      // add this configuration in the development environment
      config
        .plugin('webpack-code-inspector-plugin')
        .use(new WebpackCodeInspectorPlugin());
    },
  };
  

• 如果你使用的是 webpack.config.js, 添加如下配置:

  // webpack.config.js
  const WebpackCodeInspectorPlugin = require('webpack-code-inspector-plugin');
  
  module.exports = (env = {}) => ({
    plugins: [new WebpackCodeInspectorPlugin()],
  });
  

2. 配置 VSCode

如果你的编辑器是 VSCode，需要进行如下配置:

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

  

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

  

3. 使用代码审查

目前是有代码审查功能的方式有两种:

1. 点击页面上的 Code Inspector 开关。当开关的颜色变成彩色时，表示代码审查模式打开 ；当开关颜色变成黑白时，表示代码审查模式关闭 。
2. 同时持续按住组合键进行代码审查。 (Mac 系统默认组合键是 【Option + Shift】；Window 的默认组合键是 【Alt + Shift】)

当代码审查模式打开时，点击页面上的元素，将自动打开你的代码编辑器并将光标定位到元素对应的代码位置。

🎨 可选配置

参数	描述	类型	可选值	默认值
showSwitch	是否展示功能开关	boolean	true/false	false
hotKeys	组合键触发功能，为 false 或者空数组则关闭组合键触发	string[] | false	Array<'ctrlKey'|'altKey'|'metaKey'|'shiftKey'> | false	['altKey', 'shiftKey']
autoToggle	After opening the function button, whether automatically close the button when triggering the jump editor	boolean	true/false	true

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

module.exports = (env = {}) => ({
  plugins: [
    new WebpackCodeInspectorPlugin({
      showSwitch: false,
      hotKeys: ['altKey', 'shiftKey'],
      autoToggle: true,
    }),
  ],
});

❓ 常见问题

• 代码编辑器无法自动打开
  如果你点击页面元素时无法自动打开代码编辑器，可能是因为系统权限或其他原因导致无法找到正在运行的代码编辑器。在项目根目录添加一个名为 .env.local 的文件并添加如下内容:

  # editor
  CODE_EDITOR=code