【前端】【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 打开文件(跳转行列无误)

相关推荐
李鸿耀16 小时前
主题换肤指南:设计到开发的完整实践
前端
带娃的IT创业者21 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
非凡ghost1 天前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_11061 天前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白1 天前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
学习同学1 天前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽1 天前
【初学】调试 MCP Server
前端·mcp
四月_h1 天前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate1 天前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
许商1 天前
【stm32】cmake构建vscode开发环境
ide·vscode·编辑器