VUE3+Vite+ts实现浏览器点击元素在vscode中快速打开对应的vue页面

目前的许多项目都是使用vue进行开发的，当一个vue项目做大时维护起来非常麻烦，当我们需要找到某个文件的时候非常麻烦，传统快速定位到某个文件可以使用类名、或者路由路径等方式找到对应的文件。

为此我特地翻阅大量文章终于让我找到了实现的方法，具体实现代码在我的另一篇文章中，为了能够快速安装到其它项目中我特意弄成了插件的形式，不再需要每次都搬迁大量代码了。

接下来以一个vue3+ts+vite的新建项目为例子。

1、安装插件

npm i tan-type-code-link

 

2、main.ts引入初始化函数

把下面的代码进行粘贴到main.ts中：

import {initCodeLink} from 'tan-type-code-link'
initCodeLink();

3、配置vite.config.ts

在vite.config.ts中引入项目并加载插件，自行复制粘贴，别一股脑直接复制粘贴了

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {codeServer,addCodeLocationPlugin} from 'tan-type-code-link'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    codeServer(),
    addCodeLocationPlugin(),
    vue()
],
})

4、测试运行是否成功加载

项目npm run dev跑起来，按f12查看控制台以及元素审查；如果控制台输出run init code-link说明main.ts的初始化函数没什么问题，接下来再查看元素，如果每一个页面元素都携带code-location属性说明vite.config.ts也成功执行了。

5、使用

鼠标对准某一个元素按住shift+鼠标左键即可在vscode中打开该元素对应的页面了。