ESLint 按包名排序导入

Posted 2023-03-07

【中文标题】ESLint 按包名排序导入

【英文标题】：ESLint sort imports by package name

【发布时间】：2021-12-15 09:31:42

【问题描述】：

我正在尝试按包名称对我的导入进行排序，但根据文档中可用的内容，它似乎不受支持。

有没有办法让它工作？

import  NgModule  from '@angular/core';
import  BrowserModule  from '@angular/platform-browser';

上面的代码失败了，因为它希望 BrowserModule 位于第一行。但我希望这被认为是正确的，因为我想按包名称订购。

这是我的 ESLint 配置。

"sort-imports": [
            "error",
            
                "ignoreCase": true,
                "ignoreDeclarationSort": false,
                "ignoreMemberSort": false,
                "memberSyntaxSortOrder": [
                        "none",
                        "all",
                        "multiple",
                        "single"
                ],
                "allowSeparatedGroups": true
            
        ],

【参考方案1】：

基本 ESLint 规则不支持它 - 它按名称排序。

您可以使用与此处相同的不同排序规则。

https://www.npmjs.com/package/eslint-plugin-simple-import-sort

【参考方案2】：

我正在使用eslint-plugin-import，它支持这样的功能。发布我的配置以供参考。它将强制 React 导入总是首先，然后是以 @my_org 开头的导入，然后根据组的顺序配置其余部分

"import/order": [
      "error",
      
        "alphabetize": 
          caseInsensitive: true,
          order: "asc",
        ,
        "groups": ["external", "builtin", "parent", ["sibling", "index"]],
        "newlines-between": "never",
        "pathGroups": [
          
            group: "external",
            pattern: "react",
            position: "before",
          ,
          
            group: "external",
            pattern: "@my_org/**",
            position: "after",
          ,
        ],
        "pathGroupsExcludedImportTypes": ["builtin"],
      ,
    ],