MaterialUI 的自定义 ESLint 导入规则答案

【问题标题】：Custom ESLint Import Rule for MaterialUIMaterialUI 的自定义 ESLint 导入规则
【发布时间】：2019-12-21 01:43:10
【问题描述】：

我在 React 中有一个项目，使用 Material UI，我正在应用 their suggested methods 之一来减小我的包大小。

基本上，我需要安装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 规则，在从 Material UI 包导入时强制选项 2 导入ONLY？

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

NPM 包：

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

GitHub 页面：

他们有一个规则可以解决我的问题 (restricted-path-imports)，但尚未发布。当他们发布它时，这对我来说可能是最好的方式。

关于发布规则的讨论：

【讨论】：