vite-plugin-code-inspector：下一代代码审查插件（v1.0.1版本发布）告别 React War

告别 React Warning！vite-plugin-code-inspector 完美支持 Fragment 且更灵活了

大家好，我是 vite-plugin-code-inspector 的作者。现在 v1.0.1 版本发布了！！！

往期文章： vite-plugin-code-inspector：下一代代码审查插件

最近有 React 开发者在使用插件时反馈了一个困扰已久的控制台警告问题。为了给大家提供更丝滑的开发体验，我紧急排查并修复了这个问题，同时也带来了一个全新的配置项，让插件的灵活性更上一层楼。

🐛 遇到的问题

在 React 项目中，如果你使用了 <Fragment> 或者简写 <></> 来包裹元素，控制台可能会出现如下的红色警告：

Warning: Invalid prop data-v-inspector supplied to React.Fragment. React.Fragment can only have key and children props.

原因分析

vite-plugin-code-inspector 的工作原理是在编译阶段自动给 JSX/Vue 模板元素注入 data-v-inspector 属性（包含文件路径和行列信息），以便实现点击页面元素自动跳转到 IDE 对应代码的功能。

然而，React 的 Fragment 是一个虚拟容器，它不会渲染成真实的 DOM 节点，因此 React 严格限制了它只能接收 key 和 children 属性。当我们尝试向它注入 data-v-inspector 时，React 就会报出上述警告。

🛠️ 解决方案 & 新特性

在最新版本（v1.0.1+）中，我们带来了双重解决方案：

1. ⚡️ 智能自动识别

核心编译器现在更加智能了！它能自动识别代码中的 Fragment 和 React.Fragment 标签，并在注入阶段直接跳过它们。

这意味着，你不需要做任何配置，只需要升级插件版本，这个烦人的 Warning 就会立刻消失。

2. 🛡️ 新增 `hideJsxTags` 黑名单配置

为了应对更复杂的场景（比如你使用了某些自定义的虚拟组件，也不希望被注入属性），我们新增了 hideJsxTags 配置项。

你可以在 vite.config.ts 中手动指定不想被注入 data-v-inspector 的组件名：

// vite.config.ts
import { defineConfig } from "vite";
import inspector from "vite-plugin-code-inspector";

export default defineConfig({
  plugins: [
    inspector({
      // 这里的标签将不会被注入 inspector 属性
      hideJsxTags: ["Interact", "MyVirtualComponent"],
    }),
  ],
});

这将赋予开发者极大的灵活性，彻底解决特定组件的兼容性问题。

🚀 如何升级

非常简单，只需要更新你的依赖即可：

npm install vite-plugin-code-inspector@latest -D
# or
pnpm add vite-plugin-code-inspector@latest -D

💖 结语

vite-plugin-code-inspector 致力于做最通用的 IDE 跳转插件，支持 Vue2/3, React, Svelte, Angular, Solid, Qwik 等几乎所有主流框架。

如果你觉得好用，欢迎来 GitHub 给我们点个 Star ⭐️！

🔗 GitHub: github.com/jm-niu/vite…

Happy Coding! 💻✨

vite-plugin-code-inspector：下一代代码审查插件（v1.0.1版本发布）