Next.js 14+Material UI5：如何用ESLint限制组件导入方式？

直接在ESLint配置的rules段添加以下规则即可实现需求：

"no-restricted-imports": [
  "error",
  {
    "paths": [
      {
        "name": "@material-ui/material",
        "message": "请从具体子路径导入组件，例如：import Box from '@material-ui/material/Box'"
      }
    ],
    "patterns": [
      "!@material-ui/material/*"
    ]
  }
]

规则说明 #

• paths字段：明确禁止直接从@material-ui/material根包导入任何内容，同时给出清晰的错误提示引导正确导入方式。
• patterns字段：通过!前缀排除子路径，允许从@material-ui/material/*这类具体子路径导入组件。

如果你的项目使用的是Material UI 5官方最新包名@mui/material，只需将上述配置中的@material-ui/material替换为@mui/material即可。

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