维特-插孔-jsx-loc

一个Vite插件,为JSX元素添加了位置数据属性,用于调试和开发目的.

安装

npm install @builder.io/vite-plugin-jsx-loc
# or
yarn add @builder.io/vite-plugin-jsx-loc
# or
pnpm add @builder.io/vite-plugin-jsx-loc

使用量

将插件添加到您的 vite.config.ts数字 :

import { defineConfig } from 'vite';
import { jsxLocPlugin } from '@builder.io/vite-plugin-jsx-loc';

export default defineConfig({
  plugins: [jsxLocPlugin()],
});

这将增加一个 data-loc 属性到代码中所有 JSX 元素,包含相对文件路径和定义元素的行号。 例如:

// Input: src/components/Button.tsx
export function Button() {
  return <button>Click me</button>;
}

// Output (during development):
export function Button() {
  return <button data-loc="src/components/Button.tsx:2">Click me</button>;
}

特征

• 在 JSX 元素中添加源位置信息
• 两人合作 .jsx 财务报告和审定财务报表 .tsx 文件
• 跳过处理 node_modules
• 保存源地图
• 最小性能影响
• 不需要配置

许可证

麻省理工学院