ESLint 自定义规则来限制 Material UI 导入

Question

我正在开发一个使用 Nextjs 14 的项目，使用 Material UI 5 组件进行样式设置。我想知道是否有 ESLint 自定义规则来限制导入组件的方式，可能使用 no-restricted-imports。

// This should trigger an error
import { Box } from "@material-ui/material";
// This should be allowed
import Box from "@material-ui/material/Button";

是否有一个自定义 ESLint 规则可以满足我的需求，而不是我可以轻松地将其放入

rules

部分？也欢迎未弃用的插件。

我已经尝试了各种配置

no-restricted-imports

但无法破解它。也许在 ESLint 上有更多经验的人可以帮助我。

Answer 1

刚刚使用一些适当的正则表达式使其工作：

"no-restricted-imports": ["error", {
    "patterns": [{
      "regex": "@material-ui\/material$",
      "message": "No root mui import"
}]

@material-ui\/material$

转义正斜杠并使用美元符号标记字符串结尾

$

游乐场