如何配置ESLint规则限制仅可导入指定目录下的index.tsx？

我在项目的/components/business/my-component目录下有这些文件：

• hooks/useHook.ts
• layout/Layout.tsx
• index.tsx

想要配置ESLint规则，只允许导入该目录下的index.tsx，如果直接导入useHook.ts或Layout.tsx这类文件，就抛出错误。

我试过下面的配置，但没生效：

{
    "rules": {    
        "no-restricted-imports": [
            "error",
            {
                "patterns": [
                    "*/components/business/**", // 试图阻断所有business目录下的导入
                    "!*/components/business/**/index" // 试图仅允许business目录下的index文件
                ]
            }
        ]
    }
}

期望的规则效果：

import Foo from '@/components/business/myComponent/index' // 必须通过检查
 import { Layout } from '@/components/business/myComponent/Layout' // 必须触发错误

正确的配置方案 #

原配置的通配符匹配逻辑存在问题，**会匹配任意层级目录，导致排除规则没有精准生效。可以用更精确的glob模式实现需求：

{
  "rules": {
    "no-restricted-imports": [
      "error",
      {
        "patterns": [
          // 禁止导入business目录下所有非index的文件（适配相对/绝对路径）
          "*/components/business/**/!(*index*)",
          // 允许index文件的导入
          "!*/components/business/**/index",
          // 如果项目用了@路径别名，补充对应规则
          "@/components/business/**/!(*index*)",
          "!@/components/business/**/index"
        ]
      }
    ]
  }
}

或者更简洁的写法，直接禁止导入business子目录内的非index文件：

{
  "rules": {
    "no-restricted-imports": [
      "error",
      {
        "patterns": [
          "*/components/business/*!/index",
          "@/components/business/*!/index"
        ]
      }
    ]
  }
}

说明 #

• !(*index*) 是glob模式，匹配所有文件名不包含index的文件
• *! 表示匹配除了index之外的子目录/文件路径
• 如果项目没有使用@别名，可以删掉对应的规则行

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