如何通过ESLint规则强制React使用useEffect命名导入而非完整导入？

完全可以通过ESLint实现这个要求，而且有现成的成熟方案，无需从零编写自定义规则。下面分两种情况说明：

现成解决方案（推荐） #

借助eslint-plugin-react插件的内置规则就能快速实现需求，步骤如下：

1. 安装依赖 #

确保项目中已安装ESLint和eslint-plugin-react：

npm install eslint eslint-plugin-react --save-dev

2. 配置ESLint规则 #

在你的ESLint配置文件（比如.eslintrc.js）中添加以下规则：

module.exports = {
  plugins: ['react'],
  rules: {
    // 禁止从React导入默认导出（即import React from 'react'）
    'react/no-default-import': 'error',
    // 强制使用React的命名导入，禁止React.xxx的调用方式
    'react/prefer-named-imports': 'error'
  }
};

规则说明：

• react/no-default-import：直接阻断import React from 'react'这种写法，触发错误提示。
• react/prefer-named-imports：扫描代码中所有React.xxx的调用（比如React.useEffect），要求替换为对应的命名导入（先写import { useEffect } from 'react'，再直接用useEffect）。

如果需要额外强化，还可以搭配eslint-plugin-import的import/no-namespace规则，禁止任何通过命名空间访问模块成员的写法：

npm install eslint-plugin-import --save-dev

然后在配置中添加：

rules: {
  // ...其他规则
  'import/no-namespace': 'error'
}

自定义规则（特殊场景需求） #

如果现成规则无法满足你的特殊逻辑（比如只针对特定React API做限制），可以编写自定义ESLint规则：

1. 创建自定义规则文件 #

在项目中新建rules/react-prefer-named-imports.js：

module.exports = {
  meta: {
    type: 'suggestion',
    docs: {
      description: '强制使用React的命名导入，禁止React.xxx调用',
      category: '最佳实践',
      recommended: true
    },
    fixable: 'code', // 支持自动修复
    schema: []
  },
  create(context) {
    const importedReactNames = new Set(); // 已导入的React命名成员
    let hasDefaultReactImport = false; // 是否存在React默认导入

    return {
      // 监听导入声明，收集React的导入信息
      ImportDeclaration(node) {
        if (node.source.value === 'react') {
          node.specifiers.forEach(spec => {
            if (spec.type === 'ImportDefaultSpecifier') {
              hasDefaultReactImport = true;
            } else if (spec.type === 'ImportSpecifier') {
              importedReactNames.add(spec.imported.name);
            }
          });
        }
      },
      // 监听成员表达式，检查是否是React.xxx调用
      MemberExpression(node) {
        if (node.object.type === 'Identifier' && node.object.name === 'React' && hasDefaultReactImport) {
          const methodName = node.property.name;
          context.report({
            node,
            message: `请使用'${methodName}'的命名导入，而非'React.${methodName}'`,
            // 自动修复：添加命名导入并替换调用方式
            fix(fixer) {
              const fixes = [];
              // 如果未导入该成员，添加到React的导入声明中
              if (!importedReactNames.has(methodName)) {
                const importDecl = context.getSourceCode().ast.body.find(
                  n => n.type === 'ImportDeclaration' && n.source.value === 'react'
                );
                if (importDecl) {
                  fixes.push(fixer.insertTextAfter(importDecl.specifiers.at(-1), `, ${methodName}`));
                  importedReactNames.add(methodName);
                }
              }
              // 替换React.xxx为xxx
              fixes.push(fixer.replaceText(node, methodName));
              return fixes;
            }
          });
        }
      },
      // 检查未使用的React默认导入
      'Program:exit'() {
        if (hasDefaultReactImport && importedReactNames.size === 0) {
          const importDecl = context.getSourceCode().ast.body.find(
            n => n.type === 'ImportDeclaration' && n.source.value === 'react' && n.specifiers.some(s => s.type === 'ImportDefaultSpecifier')
          );
          if (importDecl) {
            context.report({
              node: importDecl,
              message: '未使用的React默认导入，请移除或改用命名导入',
              fix(fixer) {
                return fixer.remove(importDecl);
              }
            });
          }
        }
      }
    };
  }
};

2. 启用自定义规则 #

修改ESLint配置文件：

module.exports = {
  rules: {
    './rules/react-prefer-named-imports': 'error'
  }
};

这个自定义规则会自动检测React.xxx调用，提示替换为命名导入，还能自动修复代码（添加缺失的命名导入、替换调用方式、移除未使用的React默认导入）。

内容的提问来源于stack exchange，提问作者valerii15298