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 插件！