前端项目如何自定义页面Import排序？

开发问题记录
留言

现在前端开发项目一般都会用 ES Module 模块化开发方式，这就少不了用 import 去加载相关依赖包或组件等。随着 import 语句使用量增加，就迫切需要某种规则约束当前页面的 import 语句的排序，从而提高代码的可读性和可维护性，避免出错。

问题缘由

在最近的开发中因为项目缺少约束 import 语句的规范，导致在打包时因为 import 语句中因为包含了一个无效的引用。导致打包出错，从而不得不重新打包。这严重影响了打包发版效率，因此希望能在开发时 eslint 能自动移除未用到的引用，并且所有 import 语句能按自定义的规则排序而不是随便追加排列

提出问腿

  1. 如何自定义 import 排序?
  2. 如何自动删除未用到的引用？

解决办法

方法一： 修改 vscode 配置

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

用上面的配置可以在保存时自动排序 import 语句，而且能移除未用到的引用，可以解决当前问题。

但是我们发现 vscode 默认的 import 语句排序规则不友好

外部模块的引用放在中间了，我们项目小伙伴对这样都不太习惯，因此想按照自己的习惯自定义排序，于是有了方法二

方法二：用方法一的配置再加上 eslint-plugin-simple-import-sort插件

使用方法：

  1. 安装插件
yarn add eslint-plugin-simple-import-sort -D
  1. 在.eslintrc.js 文件中增加配置
module.export = {
  // ...
  plugins: ["simple-import-sort"],
  rules: {
    "sort-imports": "off",
    "import/order": "off",
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
  },
};

配置好后重启 vscode 后，保存后可以发现 import 语句排序变了

这次 import 语句自动排序后基本达到我们的要求，并且排序规则也比较合适。

优点： 配置简单 使用方便
缺点： 不支持更加详细的自定义排序

我个人觉得这也不算是插件的缺点吧，毕竟在 README 上也说明了这插件不是适合所有人Not for everyone，只是作者个人在小项目中用

This plugin is not for everyone.
I made this plugin for myself. I use it in many little projects and I like it.

由于我们是多人开发项目，且希望 import 语句能按照自定义规则排序，因此有了方法三

方法三：用方法一的配置再加上eslint-plugin-import插件

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

这个插件的配置就比较全面一点，在 import/order 中增加自己需要的排序规则,具体的排序规则可以参考import/order

上面的配置中也解释了各种排序规则的意义和作用

因为我们是使用 Typescript,配置完后发现含有别名的路径不能被解析

查询资料后发现要增加@typescript-eslint/parser和 eslint-import-resolver-typescript插件和以下配置

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

这样用 vscode 的配置加上方法三中的插件可以完美解决前文中提到的两个问题

参考文章：

  1. eslint-plugin-simple-import-sort
  2. eslint-plugin-import