MaterialUI的自定义ESLint导入规则 [英] Custom ESLint Import Rule for MaterialUI
问题描述
我在React中有一个使用Material UI的项目，并且我正在应用
I have a project in React, using Material UI, and I am applying one of their suggested methods to reduce my bundle size.
基本上，我需要安装 babel-plugin-transform-imports 包并更新我们导入组件的方式:
Basically, I need to install the babel-plugin-transform-imports package and update the way we import components:
// Replace this (Option 1):
import Button from "@material-ui/core/Button";
// Whith this (Option 2):
import { Button } from "@material-ui/core";
一切正常，但是，我希望以后防止出现错误的"进口(选择1).
Everything is working fine, however, I would like to prevent the "wrong" imports (Option 1) in the future.
是否有一种自定义ESLint规则的方法，当从Material UI包中导入时，该规则将强制选项2仅仅导入?
Is there a way to customize a ESLint rule that will force the Option 2 import ONLY when importing from the Material UI package?
我正在阅读有关创建自定义ESLint规则的信息，但希望避免使用该路由.
I was reading about creating a custom ESLint rule, but would prefer to avoid that route.
推荐答案
经过研究，我发现Material UI使用自己的自定义ESLint规则创建了一个包:
After some research, I found that Material UI created a package with their own custom ESLint rules:
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 )，但该规则尚未发布.当他们发布它时，这可能是我最好的选择.
They have a rule to solve my issue (restricted-path-imports), but that is not published yet. When they publish it, that may be the best way to go for me.
关于发布规则的讨论:
https://github.com/mui-org/material-ui/issues/15610#issuecomment-512804075
这篇关于MaterialUI的自定义ESLint导入规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
