7

eslint-plugin-import 规则之 Import / Order

 2 years ago
source link: https://segmentfault.com/a/1190000041375528
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

顾名思义，是对导入的模块进行排序，效果如下：

image.png

对比排序前后代码，排序后的代码看起来更整洁，react**全家桶、外部库、公共组件、子组件、api、工具类依次排列。

常用规则配置

{
  "import/order": ["error", {
        "groups": [
          "builtin",
      "external",
      ["internal", "parent", "sibling", "index"],
      "unknown",
        ],
    "pathGroups": [
      {
        "pattern": "@app/**",
        "group": "external",
        "position": "after"
      }
    ],
    "pathGroupsExcludedImportTypes": ["builtin"],
        "newlines-between": "always",
        "alphabetize": {
            "order": "asc",
            "acseInsensitive": true
        }
  }]
}

其中，group 是对导入模块进行分组，pathGroups 是通过路径自定义分组，newlines-between 不同组之间是否进行换行，alphabetize 根据字母顺序对每个组内的顺序进行排序

重点介绍下 pathGroups 属性，该属性有 4 个子属性：

  • pattern：当前组中模块的最短路径匹配
  • patternOptions：如果需要更精确的匹配，看这里
  • group：在规定的组中选其一，index、sibling、parent、internal、external、builtin、object、type、unknown
  • position：定义组的位置，after、before

关于 pathGroupsExcludedImportTypes 的作用愣是没看懂，欢迎大家补充。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK