Reactjs 物料的自定义ESLint导入规则

我在React中有一个项目，使用Material UI，我正在应用其中一个来减小捆绑包的大小

基本上，我需要安装

babel-plugin-transform-imports

包并更新我们导入组件的方式：

// Replace this (Option 1):
import Button from "@material-ui/core/Button";
// Whith this (Option 2):
import { Button } from "@material-ui/core";

一切正常，但是，我希望防止将来出现“错误”的导入（选项1）

是否有一种自定义ESLint规则的方法，当从物料UI包导入时，该规则将强制选项2仅导入

---

我正在阅读有关创建自定义ESLint规则的内容，但我更愿意避免这种做法。

据我所知，自定义是您唯一的选择。这些语法之间的唯一区别是导入默认导出或命名导出。因此，如果要防止专门针对材质ui包的默认导入，则需要创建一个自定义eslint规则，该规则查看导入语句并与材质ui匹配，因为您不希望在所有默认导入上出错。

经过一些研究，我发现Material UI创建了一个具有自己自定义ESLint规则的包：

NPM包：

GitHub页面：

他们有一个规则来解决我的问题（

受限路径导入

），但还没有发布。当他们发表时，这可能是我最好的方式

关于发布规则的讨论：

---

谢谢你的回答！我没有创建自定义lin规则的经验，所以希望其他人有其他想法来避免这种情况。