← Back to rules

react/jsx-filename-extension 限制

An auto-fix is available for this rule.

它的作用

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

为什么这是个问题？

某些打包工具或解析器需要通过文件扩展名来判断文件是否包含 JSX，以便正确处理这些文件。

示例

此规则的错误代码示例：

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

此规则的正确代码示例：

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

配置

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

allow

type: "always" | "as-needed"

default: "always"

何时允许使用 JSX 文件扩展名。默认情况下，所有文件都可使用 JSX 扩展名。设置为 as-needed 仅允许包含 JSX 语法的文件使用 JSX 扩展名。

extensions

type: string[]

default: ["jsx"]

允许的文件扩展名集合。 可以包含或不包含前导点（例如，"jsx" 和 ".jsx" 均为有效）。

ignoreFilesWithoutCode

type: boolean

default: false

如果启用，不包含代码的文件（即空文件、仅包含空白字符或注释的文件）将不会被拒绝。

如何使用

要通过配置文件或 CLI 启用此规则，可以使用：

配置 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-filename-extension": "error"
  }
}

CLI

oxlint --deny react/jsx-filename-extension --react-plugin

参考资料

• 规则源码