visual-dev

Introduction

Just one click, you can jump directly to the local IDE source code and vue and react are supported! !

一键直接跳转到本地 IDE 源码，支持 vue 和 react ！！

Preview

Motivation

In a huge project, there are many different components on the page, but it will be very troublesome to find where the component is. Using this plugin, you only need to click to jump to the corresponding position of the ide.

在一个大型的项目中，页面上有很多不同的组件，但是要找到组件在哪里会很麻烦。使用这个插件，只需要点击对应的 dom，就能跳转到 IDE 的对应位置。

Installation

npm i visual-dev -D

Options

type Options = {
  /**
   *  default open vscode.
   */
  editor: Editor; //vscode  webstorm atom sublime textmate emacs macvim phpstorm idea 支持多种编辑器，默认使用 vscode
};

Usage

webpack

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

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

umi

// .umiirc.ts
{
  plugins: ['visual-dev/plugins/umi'];
  visualDev: {
    editor: 'vscode';
  }
}

vite

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({
      editor: 'vscode',
    }),
  ],
});

the project is successfully launched, a small icon will appear in the lower left corner of the screen, which can be triggered by clicking.

项目启动成功后，在屏幕的左下角会有一个小图标出现，点击即可触发。

WeChat

License

MIT LICENSE