如何配置esint插件导入，使导入按字母顺序排序，而不考虑文件路径

Question

我找不到配置"；eslint插件导入"规则。

我想按类/接口等的字母顺序对我的导入进行排序。。名称，而不考虑文件路径。

例如，在我当前的配置中，以下是我的导入如何按ESLint:排序

import React from 'react';
import './App.css';
import MenuIcon from '@mui/icons-material/Menu'; <---------------- Look at this line
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import logo from './logo.svg';

这是我使用的配置

"import/order": [
"error",
{
"groups": [
"builtin",
"external",
"internal"
],
"pathGroups": [
{
"pattern": "react",
"group": "external",
"position": "before"
}
],
"pathGroupsExcludedImportTypes": [
"react"
],
"newlines-between": "always",
"alphabetize": {
"order": "asc",
"caseInsensitive": true
}
}
],

我想这样分类：

import React from 'react';
import './App.css';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu'; <---------------- Look at this line
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import logo from './logo.svg';

Answer 1

我遇到了类似的问题，我也想按照你在问题中提到的进行排序。然而，目前看来这是不可能的。

我用稍微不同的方法为自己解决了这个问题。我将@mui/material/视为一个路径组，将@mui/icons-material视为另一路径组。

具有以下配置的

"import/order": [
"error",
{
"groups": ["builtin", "external", "internal"],
"pathGroups": [
{
"pattern": "react",
"group": "external",
"position": "before"
},
{
"pattern": "@mui/icons-material/**",
"group": "external",
"position": "after"
},
{
"pattern": "@mui/material/**",
"group": "external",
"position": "before"
}
],
"pathGroupsExcludedImportTypes": ["react"],
"newlines-between": "always",
"alphabetize": {
"order": "asc",
"caseInsensitive": true
}
}
]
},

你会得到这样的结果

import "./App.css";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import MenuIcon from "@mui/icons-material/Menu";
import logo from "./logo.svg";

注意@mui/icons-material/和@mui/material/之间的分隔(新行(

这是通过pathGroups中的设置实现的。您可以为任何其他导入添加这些类型的模式，这些导入可能来自@mui或任何其他源。

我知道这可能不是确切的解决方案，但可能是目前最合适的解决方案。至少对我来说是：(。