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

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

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


🌟 什么是 vueDevTools

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


🚀 快速安装与使用

1️⃣ 安装插件

bash 复制代码
npm install vite-plugin-vue-devtools -D

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

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. 测试是否配置成功:

    bash 复制代码
    trae --version
  4. 修改 vite.config.ts

    ts 复制代码
    vueDevTools({
      launchEditor: 'trae'
    })

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

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

ts 复制代码
vueDevTools({
  launchEditor: 'C:/Users/你/AppData/Local/Programs/Trae/Trae.exe'
})

🧩 vueDevTools 全部配置项参考

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

🖼️ 效果预览

配置好之后,运行开发环境:

bash 复制代码
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 打开文件(跳转行列无误)

相关推荐
web打印社区1 天前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗1 天前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长1 天前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅1 天前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_1 天前
Chrome开发者工具
前端·chrome
YiHanXii1 天前
this 输出题
前端·javascript·1024程序员节
楊无好1 天前
React中ref
前端·react.js
程琬清君1 天前
vue3 confirm倒计时
前端·1024程序员节
歪歪1001 天前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节
唔661 天前
flutter实现web端实现效果
前端·flutter