点击页面元素，自动打开编辑器，光标定位代码位置

本文章仅仅是为了分享，旨在更好的提升开发效率

原网址github.com/zh-lx/code-…

官方配置网址inspector.fe-dev.cn/guide/start…

安装

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

配置

支持webpack与vite

在 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',
    }),
  ],
});

IDE配置（vscode）

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

  

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

  

使用

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