> For AI agents: the complete documentation index is available at https://rslint.rs/llms.txt, the full documentation bundle is available at https://rslint.rs/llms-full.txt.

# jsx-filename-extension

[Added in v0.3.0](https://github.com/web-infra-dev/rslint/releases/tag/v0.3.0)
## Configuration


```ts title=rslint.config.ts
import { defineConfig, reactPlugin } from '@rslint/core';

export default defineConfig([
  reactPlugin.configs.recommended,
  {
    rules: {
      'react/jsx-filename-extension': 'error',
    },
  },
]);
```

## Rule Details

Restrict file extensions that may contain JSX. By default, only `.jsx` files may contain JSX.

Examples of **incorrect** code for this rule:

```javascript
// In file: Component.js
var Hello = <div>Hello</div>;
```

Examples of **correct** code for this rule:

```jsx
// In file: Component.jsx
var Hello = <div>Hello</div>;
```

## Options

- `extensions`: An array of allowed file extensions (default: `[".jsx"]`).
- `allow`: `"always"` (default) or `"as-needed"`.
  - `"always"`: Allow the specified extensions whether or not they contain JSX.
  - `"as-needed"`: Only allow the specified extensions when the file actually contains JSX.
- `ignoreFilesWithoutCode`: When `true`, files with no code statements are ignored in `"as-needed"` mode.

## Original Documentation

- [eslint-plugin-react: jsx-filename-extension](https://github.com/jsx-eslint/eslint-plugin-react/blob/v7.37.5/docs/rules/jsx-filename-extension.md)
- [Source code](https://github.com/jsx-eslint/eslint-plugin-react/blob/v7.37.5/lib/rules/jsx-filename-extension.js)