useComponentExportOnlyModules

JSX and TSX

摘要

¥Summary

规则生效日期：v1.9.2

¥Rule available since: v1.9.2
诊断类别：lint/style/useComponentExportOnlyModules

¥Diagnostic Category: lint/style/useComponentExportOnlyModules
此规则没有修复方案。

¥This rule doesn’t have a fix.
此规则的默认严重级别为 warning。

¥The default severity of this rule is warning.
此规则属于以下域：

¥This rule belongs to the following domains:
- react
来源：

¥Sources:
- 灵感来自 react-refresh/only-export-components
  
  ¥Inspired from react-refresh/only-export-components

如何配置

¥How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "style": {
5
        "useComponentExportOnlyModules": "error"
6
      }
7
    }
8
  }
9
}

描述

¥Description

强制仅在仅导出 React Components 的模块中声明组件。

¥Enforce declaring components only within modules that export React Components exclusively.

这是启用 React Fast Refresh 功能所必需的，该功能可以提高开发效率。判断某个元素是否为组件取决于命名约定。组件应使用 PascalCase 编写，常规函数应使用 camelCase 编写。如果框架已有既定约定，可以考虑选择性地指定例外情况。

¥This is necessary to enable the React Fast Refresh feature, which improves development efficiency. The determination of whether something is a component depends on naming conventions. Components should be written in PascalCase and regular functions in camelCase. If the framework already has established conventions, consider optionally specifying exceptions.

示例

¥Examples

无效

¥Invalid

1
export const foo = () => {};
2
export const Bar = () => <></>;

code-block.jsx:1:14 lint/style/useComponentExportOnlyModules ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Exporting a non-component with components is not allowed.
  
  > 1 │ export const foo = () => {};
      │              ^^^
    2 │ export const Bar = () => <></>;
    3 │ 
  
  ℹ Fast Refresh only works when a file only exports components.
  
  ℹ Consider separating non-component exports into a new file.
  
  ℹ If it is a component, it may not be following the variable naming conventions.

1
const Tab = () => {};
2
export const tabs = [<Tab />, <Tab />];

code-block.jsx:1:7 lint/style/useComponentExportOnlyModules ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Components should be exported.
  
  > 1 │ const Tab = () => {};
      │       ^^^
    2 │ export const tabs = [<Tab />, <Tab />];
    3 │ 
  
  ℹ Fast Refresh only works when a file only exports components.
  
  ℹ Consider separating component exports into a new file.
  
  ℹ If it is not a component, it may not be following the variable naming conventions.

1
const App = () => {}
2
createRoot(document.getElementById("root")).render(<App />);

code-block.jsx:1:7 lint/style/useComponentExportOnlyModules ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Unexported components are not allowed.
  
  > 1 │ const App = () => {}
      │       ^^^
    2 │ createRoot(document.getElementById(“root”)).render(<App />);
    3 │ 
  
  ℹ Fast Refresh only works when a file only exports components.
  
  ℹ Consider separating component exports into a new file.
  
  ℹ If it is not a component, it may not be following the variable naming conventions.

有效

¥Valid

1
export default function Foo() {
2
    return <></>;
3
}

1
const foo = () => {};
2
export const Bar = () => <></>;

1
import { App } from "./App";
2
createRoot(document.getElementById("root")).render(<App />);

返回标准 React 组件的函数也是允许的。

¥Functions that return standard React components are also permitted.

1
import { memo } from 'react';
2
const Component = () => <></>
3
export default memo(Component);

选项

¥Options

`allowConstantExport`

某些工具（例如 Vite）允许导出常量以及组件。启用以下选项后，该规则将支持此模式。

¥Some tools, such as Vite, allow exporting constants along with components. By enabling the following, the rule will support the pattern.

1
{
2
  "linter": {
3
    "rules": {
4
      "style": {
5
        "useComponentExportOnlyModules": {
6
          "options": {
7
            "allowConstantExport": true
8
          }
9
        }
10
      }
11
    }
12
  }
13
}

`allowExportNames`

如果你使用的框架处理某些特定导出项的热模块替换 (HMR)，则可以使用此选项来避免这些导出项的警告。

¥If you use a framework that handles Hot Module Replacement(HMR) of some specific exports, you can use this option to avoid warning for them.

Remix 示例：

¥Example for Remix:

1
{
2
  "linter": {
3
    "rules": {
4
      "style": {
5
        "useComponentExportOnlyModules": {
6
          "options": {
7
            "allowExportNames": [
8
              "json",
9
              "loader",
10
              "headers",
11
              "meta",
12
              "links",
13
              "scripts"
14
            ]
15
          }
16
        }
17
      }
18
    }
19
  }
20
}

useComponentExportOnlyModules

摘要

如何配置

描述

示例

无效

有效

选项

allowConstantExport

allowExportNames

相关链接

`allowConstantExport`

`allowExportNames`