【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器

🔧 使用 vueDevTools 插件并修改默认打开编辑器

一文搞懂 vite-plugin-vue-devtools 的使用方式与如何设置默认打开编辑器（包括 VSCode、WebStorm，甚至 Trae）。

🌟 什么是 vueDevTools？

vite-plugin-vue-devtools 是一个为 Vite + Vue 项目提供开发时调试能力的插件，它能在浏览器中实时显示组件结构、props、emits 等信息，并支持点击组件源码位置打开本地编辑器，非常适合调试大型 Vue 项目。

🚀 快速安装与使用

1️⃣ 安装插件

npm install vite-plugin-vue-devtools -D

2️⃣ 注册插件到 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { vueDevTools } from 'vite-plugin-vue-devtools'

export default defineConfig({
plugins: [
vue(),
vueDevTools({
launchEditor: 'code' // 默认使用 VSCode
}),
],
})

🛠️ 如何修改默认打开的编辑器？

vueDevTools 内部使用了 launch-editor 库，它支持多种主流编辑器打开代码行列。

🧩 支持的常见编辑器值如下：

🧪 自定义编辑器：以 Trae 为例

假如你使用的是自定义编辑器 Trae，你希望点击 DevTools 中的组件位置时能自动用 Trae 打开并跳到对应的行列：

✅ 方法一：将 trae 添加到系统环境变量

✅ 方法二：直接写 Trae 的完整路径

如果你不想配置环境变量，也可以直接填写 Trae 可执行文件的完整路径：

vueDevTools({
launchEditor: 'C:/Users/你/AppData/Local/Programs/Trae/Trae.exe'
})

🧩 vueDevTools 全部配置项参考

vueDevTools({
componentGlobs: ['src/**/*.{vue,ts,js}'], // 匹配组件路径
launchEditor: 'code', // 编辑器
enable: true, // 是否启用
devtoolsUIRoute: '/__devtools', // 调试界面路由
componentPreviewEnabled: true, // 是否显示预览
injectInDev: true, // 只在开发模式注入
componentMetadata: true // 显示组件信息
})

🖼️ 效果预览

配置好之后，运行开发环境：

npm run dev

访问页面时，按下 Ctrl + Shift + D（默认快捷键）即可打开 DevTools 面板，点击组件名称旁的文件路径，会自动使用你配置的编辑器打开并跳转到相应的行列！

🧠 小结

📌 结语

vueDevTools 插件极大提升了 Vue 项目的开发体验，尤其是组件结构复杂时，调试与跳转变得前所未有地丝滑。无论你用的是 VSCode、WebStorm，还是小众编辑器 Trae，只要配置得当，都能享受同样的便捷体验！

问题-这个模式会有行列跳转不到的问题，可以看这篇文章解决

【前端】【Vue DevTools】Vue DevTools 进阶：用 Trae / Cursor 替换 VSCode 打开文件（跳转行列无误）