ESLint规则配置：解决特定文件夹导入限制

2024-12-18 18:22:13

ESLint 规则配置：解决特定文件夹导入限制难题

在项目开发过程中，为了保持代码结构的清晰和模块间的解耦，通常需要对模块导入进行一定的限制。ESLint 作为一个强大的代码检查工具，提供了丰富的规则来帮助我们实现这一目标。本文将探讨如何使用 ESLint no-restricted-imports 规则，解决特定文件夹的导入限制问题，即禁止从 entities 文件夹导入到除 modules 文件夹之外的任何其他文件夹。

问题分析

项目采用典型的分层结构，不同模块存放于不同的文件夹中：

src
 --app
 --components
 --entities
 --modules
 --shared
 --widgets

目前的需求是禁止从 entities 文件夹导入到除 modules 文件夹以外的其他文件夹。之前已经通过配置 no-restricted-imports 规则实现了禁止从 modules 文件夹进行深度导入：

    "no-restricted-imports": [
      "error",
      {
        "patterns": [
          "modules/*/*",
          "!modules/*/index"
        ]
      }
    ]

但这种方式不适用于 entities 文件夹的导入限制，因为它会同时禁止 modules 文件夹对 entities 文件夹的导入，这与需求不符。

解决方案

为了解决这个问题，我们需要借助 ESLint no-restricted-imports 规则的 paths 选项，它允许我们定义更细粒度的导入限制。

1. 方案一：使用 glob 模式

这种方案允许使用更灵活的 glob 模式来匹配路径，我们可以精确地指定允许和禁止的导入模式。

配置步骤:

在 ESLint 配置文件 (如 .eslintrc.js 或 .eslintrc) 中，找到 rules 字段。
添加或修改 no-restricted-imports 规则，配置如下：

"no-restricted-imports": [
    "error",
    {
        "patterns": [
            {
              "group": ["!modules/*", "**"],  // 对所有文件禁止，除了modules文件夹
              "patterns": ["**/entities/*"]  // entities文件夹只能在group允许的地方导入
            },
            "modules/*/*", // 同时，也禁用 modules 文件夹下二级及以上深度的 import
            "!modules/*/index" // modules 的 index 除外
        ]
    }
]

代码示例及详解:

"group": ["!modules/*", "**"]:
- !modules/*: 表示 modules 文件夹下的所有文件将不会被这个 pattern 限制。
- **: 表示所有其他路径，会匹配除了 modules/* 之外的所有文件和文件夹。
"patterns": ["**/entities/*"]: 表示禁止所有地方导入 ** /entities/*，除了 group 中定义的路径。配合 group 就实现了禁止 entities 文件夹被除 modules 以外的文件夹导入。
"modules/*/*": 限制从 modules 文件夹下进行深度导入。
"!modules/*/index": 允许从 modules 文件夹下的 index 文件导入。

操作步骤:

修改 ESLint 配置文件后保存。
ESLint 会自动应用新的配置，对代码进行检查。
如果代码中存在违反规则的导入语句，ESLint 会报错提示。

2. 方案二：使用正则表达式

正则表达式可以提供更强大的路径匹配能力。如果你的项目结构或文件名有更复杂的规则，使用正则表达式会更加灵活。

配置步骤:

在 ESLint 配置文件中，找到 rules 字段。
添加或修改 no-restricted-imports 规则，配置如下：

"no-restricted-imports": [
    "error",
    {
      "patterns": [
        {
          "group": ["!/modules\\/.*/", "(/.*)/"],
          "patterns": ["/entities\\/.*/"],
        },
         "modules/*/*",
        "!modules/*/index"
      ],
    },
  ],

代码示例及详解:

"group": ["!/modules\\/.*/", "(/.*)/"]:
- !/modules\\/.*/: 正则表达式，匹配所有路径中包含 /modules/ 的字符串，! 表示排除 modules 文件夹。注意，由于这是正则表达式，需要转义斜杠，故实际表示的路径就是modules下所有文件。
- (/.*)/: 正则表达式，匹配所有路径。这里作为兜底规则，如果文件不是在 modules 下，则继续后面的校验。
"patterns": ["/entities\\/.*/"]: 正则表达式，匹配路径中包含 /entities/ 的字符串。即禁止所有地方导入 /entities/，除非符合 group 的规则，也就是 modules。