react/jsx-filename-extension Restriction ​
What it does ​
Enforces consistent use of the JSX file extension.
Why is this bad? ​
Some bundlers or parsers need to know by the file extension that it contains JSX
Examples ​
Examples of incorrect code for this rule:
jsx
// filename: MyComponent.js
function MyComponent() {
return <div />;
}Examples of correct code for this rule:
jsx
// filename: MyComponent.jsx
function MyComponent() {
return <div />;
}Rule options ​
allow (default: "always") ​
When to allow a JSX filename extension. By default all files may have a JSX extension. Set this to as-needed to only allow JSX file extensions in files that contain JSX syntax.
js
"rules": {
"react/jsx-filename-extension": ["error", { "allow": "as-needed" }]
}extensions (default: [".jsx"]) ​
The set of allowed extensions is configurable. By default '.jsx' is allowed. If you wanted to allow both '.jsx' and '.tsx', the configuration would be:
js
"rules": {
"react/jsx-filename-extension": ["error", { "extensions": [".jsx", ".tsx"] }]
}ignoreFilesWithoutCode (default: false) ​
If enabled, files that do not contain code (i.e. are empty, contain only whitespaces or comments) will not be rejected.
js
"rules": {
"react/jsx-filename-extension": ["error", { "ignoreFilesWithoutCode": true }]
}How to use ​
To enable this rule in the CLI or using the config file, you can use:
bash
oxlint --deny react/jsx-filename-extensionjson
{
"rules": {
"react/jsx-filename-extension": "error"
}
}