地址：github.com/zh-lx/code-…

用来干嘛？

安装配置之后，点击页面上的元素，能够自动打开你的代码编辑器并将光标定位到元素对应的代码位置。 方便定位项目中的代码，特别是修改某个页面中的文案，无需层层目录定位

支持列表

当前支持的编译器、web 框架以及 IDE 如下:

• 当前支持以下打包工具
  ✅ webpack
  ✅ vite
  ✅ rspack
  ✅ next.js / Nuxt / Umijs 等
• 当前支持以下 Web 框架
  ✅ vue2
  ✅ vue3
  ✅ react
  ✅ preact
  ✅ solid
  ✅ svelte
• 当前支持以下代码编辑器
  VSCode | Visual Studio Code - Insiders | WebStorm | Atom | HBuilderX | PhpStorm | PyCharm | IntelliJ IDEA

如何配置

安装

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

项目中配置

具体配置说明：inspector.fe-dev.cn/guide/start…

以webpack 项目配置为例：

• 添加以下代码

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

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

• 配置 vscode 命令行工具 注意：只有mac才需要，windows忽略此步骤 在 VSCode 中执行 command + shift + p 命令, 搜索并点击 Shell Command: Install 'code' command in PATH:

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

使用

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