代码定位插件 Vue 3 + TypeScript + Vite

按住Alt+鼠标左键 单击 页面中的元素，可以跳转到对应的代码页面

安装

npm i vite-plugin-vue-code-position -D

使用

1. 在vite.config.ts中引入插件，然后启动项目就可以了，按住alt+鼠标左键单击页面中的元素就可以跳转到对应的代码位置

import CodePosition from 'vite-plugin-vue-code-position'

export default defineConfig({
  plugins: [CodePosition(), vue()],
})

1.1 如果是vite版本低于5的，不能直接通过import引入插件 需要写一个方法引入

async function codePosition(data) {
    const plugin = await import('vite-plugin-vue-code-position');
    return plugin.default(data);
}

export default defineConfig({
  plugins: [CodePosition({PORT:3213}), vue()],

})

2. 可以指定端口和打开的编辑器，如果不配置，则默认是localhost:3213 ，默认打开的是code

import CodePosition from 'vite-plugin-vue-code-position'

export default defineConfig({
  plugins: [CodePosition({IDE:'code'}), vue()],
})

//也可以使用trae打开 CodePosition({IDE:'trae'}

注意! 关于IDE 短名的配置

这里的{IDE:'code'} 表示打开的是vscode
其中的code 实际上是vscode安装目录下的 bin目录下的文件名称，就叫code 没有后缀
之所以能找到code 是因为在环境变量中添加了vscode的安装目录
比如我常用trae开发，我的trae编辑器的安装目录 D:\software\Trae
那我的环境变量 就是在用户变量的path中添加 D:\software\Trae\bin   
bin文件夹下 就有一个名叫trae的文件

//我一开始是配置在系统变量的，但是发现不行，只有在用户变量的path中添加了才可以

3. 可以更换端口

//如果控制台报错 说端口占用 请及时更换端口
import CodePosition from 'vite-plugin-vue-code-position'

export default defineConfig({
  plugins: [CodePosition({IDE:'code',port:3210}), vue()],
})