# react/jsx-filename-extension

> Restrict the file extensions that may contain JSX

If JSX can be in any file, you can't tell from a file's name whether it holds components, and tools that pick a parser by extension have to treat every file as JSX. By default the rule only allows JSX in `.jsx` files.

The rule only reports the first JSX element in the file.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"react/jsx-filename-extension" = "error" # or "warn"
```

Every option, set to its default:

```toml bunfig.toml
[lint.rules]
"react/jsx-filename-extension" = ["error", {
  extensions = [".jsx"],
  allow = "always", # "always" or "as-needed"
  ignoreFilesWithoutCode = false,
}]
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad {"filename": "Button.js"} */}
```jsx
export function Button({ label }) {
  return <button>{label}</button>;
}
```

Not reported:

{/* good {"filename": "Button.jsx"} */}
```jsx
export function Button({ label }) {
  return <button>{label}</button>;
}
```

## Options

| Option | Default | What it does |
| --- | --- | --- |
| `extensions` | `[".jsx"]` | The extensions that can contain JSX, each with its dot. |
| `allow` | `"always"` | With `"as-needed"`, also report a file that has one of these extensions but no JSX. |
| `ignoreFilesWithoutCode` | `false` | With `"as-needed"`, don't report a file that has no code at all. |

A TypeScript project needs `.tsx` in the list:

```toml bunfig.toml
[lint.rules]
"react/jsx-filename-extension" = ["error", { extensions = [".jsx", ".tsx"] }]
```

{/* good {"filename": "Button.tsx", "options": [{"extensions": [".jsx", ".tsx"]}]} */}
```tsx
export function Button({ label }: { label: string }) {
  return <button>{label}</button>;
}
```

With `"as-needed"`, a `.jsx` file without JSX is reported:

{/* bad {"filename": "format.jsx", "options": [{"allow": "as-needed"}]} */}
```jsx
export function formatPrice(cents) {
  return (cents / 100).toFixed(2);
}
```

With `ignoreFilesWithoutCode`, a file that only has comments isn't:

{/* good {"filename": "empty.jsx", "options": [{"allow": "as-needed", "ignoreFilesWithoutCode": true}]} */}
```jsx
// Nothing here yet.
```