# unplugin-jsx-source
[](https://www.npmjs.com/package/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.
## Install
```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/`](./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](https://github.com/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()],
})
```
## Made with
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 `