使用 eslint 自动调整 import 代码顺序

CSDN 中文章不一定能及时更新，欢迎关注我的博客查看最新版本：许盛的博客

随着项目代码量的增多，每个 js/ts 文件头部都会有一堆 import 代码。

之前都是依赖 webstorm 的自动导入功能，然后手动调整下顺序，将 node_modules 中引入代码和项目目录中的引入代码区分开就行，反正 webstorm 默认打开文件的时候，会把上面的一堆 import 代码给折叠起来。

而写 go 的时候，goland 可以自动调用 go fmt ，将 import 部分的代码也优化优化。

最近想着把编码规范再制定的细致一点，正好把这个问题也解决下。

eslint 自带规则

从官网中可以看到，eslint 本身提供了一条名叫 sort-imports 的规则，详情见文档：https://eslint.org/docs/rules/sort-imports

但是实际使用下来，发现功能有限，针对多行的 import 语句，无能为力，文档描述如下：

第三方插件

既然官方的能力不够强，就考虑下第三方插件了，一番检索，发现了 eslint-plugin-simple-import-sort 这个插件。

提供 sort-imports 能力的插件有好几个，试了一下，eslint-plugin-simple-import-sort 最靠谱。

安装

yarn add -D eslint-plugin-simple-import-sort

配置

在 .eslintrc 中分别加入：

{
  "plugins": ["simple-import-sort"]
}

{
  "rules": {
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error"
  }
}

体验

执行 eslint --fix src/**，完美。