A Vite plugin that adds location data attributes to JSX elements
npm install @builder.io/vite-plugin-jsx-locA Vite plugin that adds location data attributes to JSX elements for debugging and development purposes.
``bash`
npm install @builder.io/vite-plugin-jsx-locor
yarn add @builder.io/vite-plugin-jsx-locor
pnpm add @builder.io/vite-plugin-jsx-loc
Add the plugin to your vite.config.ts:
`typescript
import { defineConfig } from 'vite';
import { jsxLocPlugin } from '@builder.io/vite-plugin-jsx-loc';
export default defineConfig({
plugins: [jsxLocPlugin()],
});
`
This will add a data-loc attribute to all JSX elements in your code, containing the relative file path and line number where the element is defined. For example:
`jsx
// Input: src/components/Button.tsx
export function Button() {
return ;
}
// Output (during development):
export function Button() {
return ;
}
`
- Adds source location information to JSX elements
- Works with both .jsx and .tsx filesnode_modules`
- Skips processing of
- Preserves source maps
- Minimal performance impact
- No configuration required
MIT