/vite-plugin-react-code-navigation

代码导航 vite 插件

Primary LanguageTypeScript

vite-plugin-react-code-navigation

代码导航 vite 插件

功能 ( function )

在网页的某个组件上点击某个快捷键，快速跳转到 vscode 上组件对应的位置

使用 esbuild 打包 ( use esbuild to bundle )

npm run build 执行打包

插件使用方法 ( how to use the vite plugin )

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import codeNavigation from 'vite-plugin-react-code-navigation'

export default defineConfig({
   plugins: [
      react(), 
      codeNavigation(['Button', 'IconButton', 'DialogTitle']) 
      // array of react component name
   ]
})

点击 shift 和 鼠标右键 跳转到组件在vscode编辑器的对应位置。

click shift + right mouse button to jump the component position in vscode IDE

预览效果图 ( preview )

pin-Interview