开发时如何通过界面快速用vscode打开对应组件文件（vue快速定位组件文件）

背景

在如今的前端开发中，很多人手上维护n个项目，中间可能涉及到维护别人的代码，当项目过多，项目过大等情况时，就会出现来回找页面或者组件文件的情况（封装层次很深的，找起来很烦人），那怎么解决呢？

解决方法一

使用过vue devtools工具的同学都知道，devtools工具中有一个打开对应组件文件的方式。

在.env.dev文件夹中添加EDITOR=code配置（不同的idea编辑器有区别，自行查找）
打开浏览器中的vue devtools工具，选中到对应的组件树，然后点击右上角的 open in editor按钮，就能打开对应的组件文件了，如下图

问题：这种方式虽然能打开对应的组件文件，但是存在背景中类似的问题，要打开到对应的组件树才行，有这个时间，直接在编辑器中直接就找到了

解决方法二

写babel、plugin去解决这个问题，大概思路如下所示

注册全局方法$openVscode，$openVscode 接受参数path，通过$openVscode函数去打开vscode编辑器对应的组件文件
添加babel、plugin给每个组件文件的最外层dom添加$openVscode点击事件，并把该组件文件的url地址传递进去

具体实现结果

目前简单写了两个小版本的插件，分别是针对Vue2 webpack版本的open-component-vscode-vue2和Vue3 vite版本的open-component-vscode-vue3-vite

open-component-vscode-vue2 使用方式：首先安装 npm install -D openComponent-vscode-vue2，然后配置vue.config.js

js 复制代码

// vue.config.js
module.exports = {
  chainWebpack(config) {
    config
      .when(process.env.NODE_ENV === 'development', config => {
        config.module
          .rule('open-vscode')
          .test(/.vue$/)
          .use('open-vscode')
          .loader('open-component-vscode-vue2/index.js')
          .options({
            // 设置键盘按住 shift 按键，同时鼠标单击页面，实现打开vscode对应的组件文件
            keyWord: 'shift', // 可以配置为其他按键
          })
          config.module
            .rule('open-vscode-initfn')
            .test(/.js$/)
            .use('open-vscode-initfn')
            .loader('open-component-vscode-vue2/open-vscode-initfn.js')
            .options({
              // 自定义匹配规则
              resourceQuery: /src/main.js/,
              bindOpenVscodeFile: 'main.js',
            })
            .end()
      },
      )
  }
}

项目启动以后键盘按shift + 鼠标左键单击浏览器界面上对应组件（页面），即可弹出vscode打开对应组件文件的提示，同意即可用vscode快速打开对应组件

open-component-vscode-vue3-vite 使用方式：首先安装npm install -D open-component-vscode-vue3-vite,然后在main.js中注册对应的全局方法

js 复制代码

// main.js
import { createApp } from 'vue';

import App from './App.vue';

async function bootstrap() {
  const app = createApp(App);

  app.mount('#app');

  // 注册全局方法
  app.config.globalProperties.$openVscode = function (path) {
    // 在这里编写你的全局方法的逻辑
    window.open(path, '_self');
  };
}

bootstrap();

最后在vite.config.js中配置open-component-vscode-vue3-vite的plugin

js 复制代码

// vite.config.js
import openVscode from 'open-component-vscode-vue3-vite';

export default defineApplicationConfig({
  overrides: {
    plugins: [
      process.env.NODE_ENV === 'development' && openVscode()
    ],
  },
});

项目启动以后键盘按shift + alt + 鼠标左键（后续会迭代为可配置按键）单击浏览器界面上对应组件（页面），即可弹出vscode打开对应组件文件的提示，同意即可用vscode快速打开对应组件

大概效果如下所示：

最后

说明一下这只是一个初步插件，中间能想到的一些问题还未处理，例如：stop阻止冒泡导致点击失效，vue2的函数式组组件不支持，vue3 webpack版本没有做兼容等。想到还有react版本的plugin可以去做，着实没那么大精力，有兴趣的同学可以私聊（中间有朋友想过其他实现效果解决阻止事件冒泡，不过都停留在想象阶段）。

涉及到其他idea工具的，用上面思路是行不通的，可以借助nodejs去实现（更加复杂）