Skip to content
← Back to rules

react/jsx-filename-extension Restriction

🚧 An auto-fix is planned for this rule, but not implemented at this time.

它的作用

强制一致地使用 .jsx 文件扩展名。

为什么这很糟糕?

某些打包器或解析器需要通过文件扩展名知道其中包含 JSX, 才能正确处理这些文件。

示例

以下是此规则的错误代码示例:

jsx
// 文件名: MyComponent.js
function MyComponent() {
  return <div />;
}

以下是此规则的正确代码示例:

jsx
// 文件名: MyComponent.jsx
function MyComponent() {
  return <div />;
}

配置

此规则接受一个包含以下属性的配置对象:

allow

type: "always" | "as-needed"

default: "always"

何时允许使用 JSX 文件扩展名。默认情况下,所有文件都可以使用 JSX 扩展名。 将其设置为 as-needed,则只允许在包含 JSX 语法的文件中使用 JSX 文件扩展名。

"always"

始终允许使用 .jsx 文件扩展名。

"as-needed"

仅允许在包含 JSX 语法的文件中使用 .jsx 文件扩展名。

extensions

type: string[]

default: ["jsx"]

允许的文件扩展名集合。 可以包含或省略前导点(例如,"jsx" 和 ".jsx" 都是有效的)。

ignoreFilesWithoutCode

type: boolean

default: false

如果启用,不包含代码的文件(即为空、仅包含空白字符或注释)不会被拒绝。

如何使用

To enable this rule using the config file or in the CLI, you can use:

json
{
  "plugins": ["react"],
  "rules": {
    "react/jsx-filename-extension": "error"
  }
}
ts
import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/jsx-filename-extension": "error",
  },
});
bash
oxlint --deny react/jsx-filename-extension --react-plugin

版本

此规则于 v0.15.14 中添加。

参考资料