如何点击页面元素就能跳转对应的 IDE 源码位置？

猫咪爱吃小冻干

2022-02-18 1,539 阅读1分钟

背景：

不知道大家有没有试过页面上组件特别多，每次要找到这个组件是在哪里用的时候会找很久的情况，为此我写了一个插件来提高开发效率。

Jan-19-2022 01-34-02

地址：

- 文档&仓库地址：github.com/wen-haoming…

- 在线 demo 体验：wen-haoming.github.io/visual-dev/

特性：

- 运行时并且支持 vue 和 react

- 打开速度极快

- 脚手架支持 umi，vite，webpack

- dom 没有冗余的路径信息

使用方式（极为简单）：

npm 下载

npm i visual-dev -D

webpack 中使用

// webpack.config.js
const VisualDev = require('visual-dev/plugins/webpack').default;

module.exports = {
  plugins: [new VisualDev()],
};

umi 中使用

// .umiirc.ts
{ 
 plugins: [require.resolve('visual-dev/plugins/umi')],
 visualDev: {},
}

vite 中使用（需要注意放在vue插件后面）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VisualDev from ''visual-dev/plugins/vite''

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

最后项目成功之后，在浏览器窗口的左下角会有一个小小图标，点击即可启动~

需要注意的是：使用环境变量区分，不要发到生产 ~~

最后一个点赞或者 github 一个小星星，是我最大的支持！谢谢~