10
头图

As the name implies, the imported modules are sorted, and the effect is as follows:

image.png

Comparing the code before and after sorting, the sorted code looks cleaner. react**family bucket, external library, public component, subcomponent, api , tool class are arranged in order.

Common rule configuration

{
  "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
        }
  }]
}

Among them, group is to group import modules, pathGroups is to customize grouping by path, newlines-between Whether line breaks are performed between different groups, alphabetize Sort the order within each group according to alphabetical order

Focus on the pathGroups attribute, which has 4 sub-attributes:

  • pattern: shortest path match for modules in the current group
  • patternOptions: If you need a more precise match, see here
  • Group: 1, sibling , 06202776F70814, index , parent , internal , external , builtin , object , type , unknown
  • position: defines the position of the group, after , before

Regarding the function of pathGroupsExcludedImportTypes , I didn't understand it. Welcome to add.


robin
1.6k 声望3.2k 粉丝

折腾不止、夜游八方~