前端开发项目必备VSCode代码定位神器——code-inspector-plugin

目录

• 前言
• 插件介绍
• 具体使用
  • Vue2.6 + Vue Cli + Webpack5项目
• 总结

前言

大家好，我是喵喵侠。在现代化的前端开发过程中，我们通常会选用市面上流行的前端框架（如Vue、React之类），快速实现各种功能。与传统的原生JavaScript和jQuery开发不同的是，我们编写的是框架模板代码，而并非原生的HTML、CSS、JavaScript，这样就会导致页面最终在控制台审查元素看到的代码，与实际编写的代码是不一样的。就拿Vue的项目来说，通常会使用脚手架工具进行编译打包成HTML、CSS、JavaScript，你只需要编写Vue语法的代码即可完成开发。

这时候问题来了，如果我想要找到页面上的某个DOM元素，对应Vue文件的某一行怎么办？

按照以往的做法，只能通过Vue官方提供的Devtools插件，来看页面上引用的哪些组件，但这只能看个大概，并不能具体定位到具体行列的位置。

今天我将带来一款好用的插件，彻底解决浏览器页面元素定位到IDE对应代码行号的痛点。

插件介绍

code-inspector-plugin是快手前端团队一位大佬开发的一款页面开发提交神器。这款插件的具体功能是，当你点击页面上的 DOM 元素，它能自动打开 IDE 并将光标定位至 DOM 的源代码位置。

根据官方介绍，它具备以下特点：

• 开发提效： 点击页面上的 DOM 元素，它能自动打开 IDE 并将光标定位至 DOM 的源代码位置，大幅提升开发体验和效率；
• 简单易用： 对源代码无任何侵入，只需要在打包工具中引入就能够生效，整个接入过程如喝水般一样简单；
• 适配性强： 支持在webpack/vite/rspack/nextjs/nuxt/umijs中使用，支持 vue/react/preact/solid/qwik/svelte/astro 等多个框架。

可以说这款插件十分强大，支持市面上主流的各种框架和开发工具。

具体使用

Vue2.6 + Vue Cli + Webpack5项目

这里我拿目前开发的一个项目举例，技术栈用的是Vue2.6 + Vue Cli + Webpack5。

我个人习惯用pnpm，这里用pnpm安装一下插件：

pnpm add code-inspector-plugin -D

接着打开vue.config.js文件，引入插件和插件配置操作。下面是configureWebpack的写法：

// 这里省略原有其他配置...
const { codeInspectorPlugin } = require('code-inspector-plugin');  // 引入插件
module.exports = defineConfig({
  // 这里省略原有其他配置...
  configureWebpack: {
    // 这里省略原有其他配置...
    plugins: [
      // 这里省略原有其他配置...
      codeInspectorPlugin({
        bundler: 'webpack', // 配置插件
      })
    ]
  }
});

Webpack的插件配置，还有一种chainWebpack写法是这样的：

const { codeInspectorPlugin } = require('code-inspector-plugin');

module.exports = {
  // 这里省略原有其他配置...
  chainWebpack: (config) => {
    config.plugin('code-inspector-plugin').use(
      codeInspectorPlugin({
        bundler: 'webpack',
      })
    );
  },
};

这样就配置好了！

启动项目后，会发现控制台里面，会有这样的提示：

同时按住 shift + ⌥option 时启用 inspector 功能(点击页面元素可定位至编辑器源代码)

由于我是macOS系统，提示是shift + ⌥option。如果你是Windows用户，对应的应该是shift + alt键。

按住快捷键，鼠标移动你想要定位的对应DOM元素，会发现鼠标样式会改变，按住快捷键不松手，点击鼠标左键，就能定位到VSCode对应文件的代码行了！

总结

这款代码定位神器，我是无意间逛技术社区发现的，使用了一下后发现非常好用，特此分享给大家！希望各位能够在前端开发的过程中，效率越来越高。工作早早做完，早早下班！