MaterialUI 的自定义 ESLint 导入规则

Question

我在 React 中有一个项目，使用 Material UI，我正在应用他们建议的方法之一来减少我的包大小。

基本上，我需要安装babel-plugin-transform-imports package 并更新我们导入组件的方式：

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

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

有没有办法自定义 ESLint 规则，仅在从 Material UI package 导入时强制选项 2 导入？

我正在阅读有关创建自定义 ESLint 规则的信息，但希望避免使用该路线。

Answer 1

据我所知，定制是您唯一的选择。 这些语法之间的唯一区别是导入默认导出或命名导出。 因此，如果要防止特定于material-ui软件包的默认导入，则您需要创建一个自定义eslint规则，该规则查看导入语句并与material-ui匹配，因为您不想对所有默认导入都出错。

Answer 2

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

NPM软件包：

https://www.npmjs.com/package/eslint-plugin-material-ui

GitHub页面：

他们有一条规则可以解决我的问题（ restricted-path-imports ），但是该规则尚未发布。 当他们发布它时，这可能是我的最佳选择。

有关发布规则的讨论：

Answer 3

2022 年更新

@kajirikajiri实际上正是为此制作了 eslint 插件！