ESLint：如何使用“无限制导入”限制某些路径但允许子路径？

Question

我正在使用 Material-UI 并且我正在从

import { Button } from "@material-ui/core";

到

import Button from "@material-ui/core/Button";

我想添加一个 lint 规则，不允许从“@material-ui/core”直接导入，但允许任何子文件夹，例如“@material-ui/core/Button”。

我发现了一个应该解决它的“无限制进口”规则，但我只能限制“@material-ui/core”下的任何东西，所以“@material-ui/core/*”也受到限制。

我尝试了几种方法来设置规则，但对于我的用例，所有这些方法都失败了。 即：

"no-restricted-imports": ["error", "@material-ui/core"]
///////
"no-restricted-imports": ["error", {
    "patterns": ["@material-ui/core"]
}]

但两者都行不通。 我是否遗漏了什么，或者只是无法实现？

Answer 1

我想用 lodash 做同样的事情。

对于 Treeshaking，我想限制

从'lodash'导入{get}；

但允许

从 'lodash/get' 导入获取；

为此进行 eslint 配置，

'no-restricted-imports': [
      'error',
      {
        paths: [
          {
            name: 'lodash',
            message:
              "Please use `import [package] from 'lodash/[package]'` instead."
          }
        ],
        patterns: ['!lodash/*']
      }
    ]

您可以为您的包裹尝试类似的方法。

Answer 2

您可以对某些文件路径使用覆盖

"no-restricted-imports": ["error", "@material-ui/core"],
"overrides": [{
  "files": [...],
  "rules: {
    "no-restricted-imports": ["error", {
      "patterns": ["@material-ui/core"]
    }]
  },
}],