Vite 插件

TanStack Devtools 的 Vite 插件为在 Vite 驱动的应用程序中使用 devtools 提供了无缝集成。借助此插件，您将获得 devtools 内置功能的补充功能，例如更好的控制台日志、服务器事件总线和增强的调试功能。

安装

要添加 devtools vite 插件，您需要将其安装为开发依赖项

npm install -D @tanstack/devtools-vite

npm install -D @tanstack/devtools-vite

然后将其添加为 Vite 配置文件中的第一个插件

import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [
    devtools(),
    // ... rest of your plugins here
  ],
}

import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [
    devtools(),
    // ... rest of your plugins here
  ],
}

然后就完成了！

配置

您可以通过将选项传递给 devtools 函数来配置 devtools 插件

import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [
    devtools({
      // options here
    }),
    // ... rest of your plugins here
  ],
}

import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [
    devtools({
      // options here
    }),
    // ... rest of your plugins here
  ],
}

eventBusConfig

用于 devtools 与客户端通信的事件总线的配置

import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [
    devtools({
      eventBusConfig: {
        // port to run the event bus on
        port: 1234,
        // console log debug logs or not
        debug: false
      }, 
    }),
    // ... rest of your plugins here
  ],
}

import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [
    devtools({
      eventBusConfig: {
        // port to run the event bus on
        port: 1234,
        // console log debug logs or not
        debug: false
      }, 
    }),
    // ... rest of your plugins here
  ],
}

editor

重要

editor 仅适用于 VS Code 以外的编辑器，默认情况下，它与 VS Code 开箱即用。如果您的终端中没有 code，您仍然需要进行设置，如果您不知道如何操作，可以遵循本指南： https://stackoverflow.com/questions/29955500/code-is-not-working-in-on-the-command-line-for-visual-studio-code-on-os-x-ma

打开编辑器配置，其中包含两个字段： name 和 open。 name 是您的编辑器名称，而 open 是一个函数，用于打开具有给定文件和行号的编辑器。您可以按如下方式实现自己的编辑器版本

import { devtools } from '@tanstack/devtools-vite'

export default {
 plugins: [
   devtools({
     editor: {
       name: 'VSCode',
       open: async (path, lineNumber, columnNumber) => {
         const { exec } = await import('node:child_process')
         exec(
           // or windsurf/cursor/webstorm
           `code -g "${(path).replaceAll('$', '\\$')}${lineNumber ? `:${lineNumber}` : ''}${columnNumber ? `:${columnNumber}` : ''}"`,
         )
       },
     }, 
   }),
   // ... rest of your plugins here
 ],
}

import { devtools } from '@tanstack/devtools-vite'

export default {
 plugins: [
   devtools({
     editor: {
       name: 'VSCode',
       open: async (path, lineNumber, columnNumber) => {
         const { exec } = await import('node:child_process')
         exec(
           // or windsurf/cursor/webstorm
           `code -g "${(path).replaceAll('$', '\\$')}${lineNumber ? `:${lineNumber}` : ''}${columnNumber ? `:${columnNumber}` : ''}"`,
         )
       },
     }, 
   }),
   // ... rest of your plugins here
 ],
}

enhancedLogs

增强日志记录的配置。默认为启用。

import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [
    devtools({
      enhancedLogs: {
        enabled: true
      }
    }),
    // ... rest of your plugins here
  ],
}

import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [
    devtools({
      enhancedLogs: {
        enabled: true
      }
    }),
    // ... rest of your plugins here
  ],
}

injectSource

源注入的配置。默认为启用。

import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [
    devtools({
      injectSource: {
        enabled: true
      }
    }),
    // ... rest of your plugins here
  ],
}

import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [
    devtools({
      injectSource: {
        enabled: true
      }
    }),
    // ... rest of your plugins here
  ],
}

特性

跳转到源代码

允许您通过单击浏览器中的任何内容来打开其源代码位置。

要触发此行为，您需要安装并配置 Devtools Vite 插件，并且面板可在页面上使用。只需在按住 Shift 和 Ctrl（或 Meta）键的同时单击任何元素。

高级控制台日志

允许您直接从浏览器/终端跳转到控制台日志位置

安装

配置