eslint-plugin-import 規則之 Import / Order

顧名思義，是對匯入的模組進行排序，效果如下：

對比排序前後程式碼，排序後的程式碼看起來更整潔，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 的作用愣是沒看懂，歡迎大家補充。