10
头图

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

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:在规定的组中选其一,indexsiblingparentinternalexternalbuiltinobjecttypeunknown
  • position:定义组的位置,afterbefore

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


robin
1.6k 声望3.2k 粉丝

折腾不止、夜游八方~