安装code-inspector-plugin插件，实现点击页面上的 DOM 元素自动打开 VSCode 并定位到对应的源代码位置功能

1.安装

使用npm安装:

npm install code-inspector-plugin -D

使用yarn安装:

yarn add code-inspector-plugin -D

使用pnpm安装:

pnpm add code-inspector-plugin -D

运行以下代码，显示版本号则安装成功

npm list code-inspector-plugin CopyInsert

2.配置

在项目的 vue.config.js 文件中加上以下代码

const { codeInspectorPlugin } = require("code-inspector-plugin");
module.exports = {
  chainWebpack: (config) => {
    config.plugin("code-inspector-plugin").use(
      codeInspectorPlugin({
        bundler: "webpack",
      })
    );
  },
};

3.应用

操作方式：

按住快捷键（macOS为shift+⌥option，Windows为shift+alt），鼠标移动到想要定位的DOM元素上，会发现在 DOM 上出现遮罩层并显示相关信息，不松手点击鼠标左键，就能定位到VSCode对应文件的代码行。