javascript 如何配置eslint-plugin-import，使导入按字母顺序排序，而不考虑文件路径？

ia2d9nvy 于 2023-04-04 发布在 Java

关注(0)|答案(1)|浏览(245)

我找不到配置“eslint-plugin-import”规则的文档。
我想按class/interface/etc.. name的字母顺序对我的导入进行排序，而不考虑文件路径。
例如，在我的当前配置中，下面是我的导入如何按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';

JavaScript

来源：https://stackoverflow.com/questions/71869457/how-to-configure-eslint-plugin-import-so-the-imports-are-sorted-alphabetically-w

1条答案

按热度按时间

cclgggtu1#

我有类似的问题，我也想排序，因为你在你的问题中提到。但目前看来，这是不可能的。
我用稍微不同的方法解决了这个问题。我把@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或任何其他来源。
我知道这可能不是确切的解决方案，但它可能是最合适的，至少对我来说是：）。

赞(0）回复(0）举报 2023-04-04

我来回答

javascript 如何配置eslint-plugin-import，使导入按字母顺序排序，而不考虑文件路径？

1条答案

相关问题

热门标签

最新问答