自定义ESLint导入MaterialUI规则

Question

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

基本上，我需要安装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规则的文章，但倾向于避免使用这种方式。

Answer 1

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

NPM一揽子计划：

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

GitHub页面：

https://github.com/mui-org/material-ui/tree/master/packages/eslint-plugin-material-ui

他们有一个规则来解决我的问题(restricted-path-imports)，但还没有公布。当他们出版的时候，这可能是我最好的方式。

关于发布规则的讨论：

https://github.com/mui-org/material-ui/issues/15610#issuecomment-512804075

Answer 2

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

Answer 3

更新2022

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

https://github.com/kajirikajiri/eslint-plugin-mui-path-imports