前端项目 Import sort 管理前端项目 Import sort 管理，依赖 eslint 和 vscode

前端项目 Import sort 管理，依赖 eslint 和 vscode 的设置

依赖安装

yarn add eslint-plugin-import -D
yarn add eslint-import-resolver-typescript -D
yarn add @typescript-eslint/parser -D

.eslintrc.js配置

// 具体 import order 参考 https://github.com/import-js/eslint-plugin-import/blob/HEAD/docs/rules/order.md#importorder
module.export = {
  // ...
  extends: [
    // ...
    "plugin:import/recommended",
  ],
  rules: {
    //...
    "import/order": [
      "error",
      {
        // 对导入模块进行分组，分组排序规则如下
        groups: [
          "builtin", // 内置模块
          "external", // 外部模块
          "parent", //父节点依赖
          "sibling", //兄弟依赖
          "internal", //内部引用
          "index", // index文件
          "type", //类型文件
          "unknown",
        ],
        //通过路径自定义分组
        pathGroups: [
          {
            pattern: "@/**", // 把@开头的应用放在external分组后面
            group: "external",
            position: "after",
          },
        ],
        // 是否开启独特组，用于区分自定义规则分组和其他规则分组
        distinctGroup: true,
        // 每个分组之间换行
        "newlines-between": "always",
        // 相同分组排列规则 按字母升序排序
        alphabetize: { order: "asc" },
      },
    ],
  },
};

3）要增加@typescript-eslint/parser和 eslint-import-resolver-typescript插件和以下配置

module.export = { 
    extends: [ 
    // ...
    "plugin:import/typescript",
    ],
    settings: {
        "import/resolver": { 
            typescript: true, 
            node: true, 
        }, 
    },
};

通过命令一件跑，工程化配置

# 可以跑这个命令
yarn run lint:fix

"unimported:ci": "unimported",
"lint:fix": "eslint -c .eslintrc.js --ext .ts,.tsx src --fix",
"prettier:format-codes": "prettier --write src",

vscode 自动保存 format 会自动剔除无用依赖，依赖排序

  "editor.codeActionsOnSave": {
    "source.organizeImports": true,
    "source.fixAll": true
  },

可参考文章：