【前端】【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 库，它支持多种主流编辑器打开代码行列。

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

编辑器名	值（launchEditor）
VS Code	'code'
WebStorm	'webstorm'
PhpStorm	'phpstorm'
Sublime Text	'sublime'
Atom	'atom'
VSCodium	'vscodium'
Trae（自定义）	'trae'（需配置环境变量或路径）

---

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

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

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

1. 找到 Trae 安装路径，例如：

   C:\Users\你\AppData\Local\Programs\Trae\Trae.exe

2. 添加该路径到系统环境变量 PATH。

3. 测试是否配置成功：

   trae --version

4. 修改 vite.config.ts：

   vueDevTools({
     launchEditor: '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 面板，点击组件名称旁的文件路径，会自动使用你配置的编辑器打开并跳转到相应的行列！

---

🧠 小结

功能	配置项	默认值
启用插件	enable	true
设置编辑器	launchEditor	'code'
自定义路径	launchEditor: 'xxx.exe'	✔️
调试面板路由	devtoolsUIRoute	'/__devtools'
快捷键	Ctrl + Shift + D	可自定义

---

📌 结语

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

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

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