[](https://www.npmjs.com/package/unplugin-jsx-source)
npm install unplugin-jsx-source
A plugin designed to automatically annotate your JSX components with a data-at(configurable) attribute, indicating the file name and line number for easier debugging and development.
``bash`
npm i unplugin-jsx-source
Vite
`ts
// vite.config.ts
import jsxSource from 'unplugin-jsx-source/vite'
export default defineConfig({
plugins: [
jsxSource({ / options / }),
],
})
`
Example: playground/
Rollup
`ts
// rollup.config.js
import jsxSource from 'unplugin-jsx-source/rollup'
export default {
plugins: [
jsxSource({ / options / }),
],
}
`
Webpack
`ts`
// webpack.config.js
module.exports = {
/ ... /
plugins: [
require('unplugin-jsx-source/webpack')({ / options / })
]
}
Nuxt
`ts`
// nuxt.config.js
export default defineNuxtConfig({
modules: [
['unplugin-jsx-source/nuxt', { / options / }],
],
})
> This module works for both Nuxt 2 and Nuxt Vite
Vue CLI
`ts`
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-jsx-source/webpack')({ / options / }),
],
},
}
esbuild
`ts
// esbuild.config.js
import { build } from 'esbuild'
import jsxSource from 'unplugin-jsx-source/esbuild'
build({
plugins: jsxSource()],
})
`
https://github.com/unplugin/unplugin-starter
cause I saw that idea again from Nate (Tamagui's author) https://x.com/natebirdman/status/1890913196967419958
although Astro also has it with