因为严重的强迫症，所以自己写了一个eslint-plugin-group-import

前言

可能很多人会问，排序插件不是已经有了吗，你这是在重复造轮子呀，其实仔细想想市面上已经有现成的了，像eslint-plugin-import和eslint-plugin-simple-import-sort,其实我也有用过，但是他们都是要自己去配置的，然而我的想法是它可以自动去分组并从小到大去排序，于是就诞生了eslint-plugin-group-import

使用

pnpm add eslint-plugin-group-import -D

在你的.eslintrc.cjs中添加group-import到plugins:

module.exports = {
  plugins: ['group-import']
}

然后添加import导入到rules

module.exports = {
  rules: {
    'group-import/imports': 2
  }
}

也可以搭配sort-imports对声明的变量进行排序

module.exports = {
  rules: {
    'sort-imports': [
      2,
      {
        ignoreDeclarationSort: true
      }
    ]
  }
}

效果

排序前↓

import os from 'node:os'
import { useDebounceFn } from '@vueuse/core'
import Tab1 from './test/Tab/index.vue'
import RightMemu1 from './test/RightMemu/index.vue'
import RightMemu2 from './test/RightMemu1/index.vue'
import type { Ref } from 'vue'
import RightMemu from './components/RightMemu/index.vue'
import Tab from './components/Tab/index.vue'
import { fun } from './test'
import { fun2, fun3 } from './test1'
import { reactive, ref } from 'vue'

排序后↓

// npm组
import os from 'node:os'
import { reactive, ref } from 'vue'
import { useDebounceFn } from '@vueuse/core'
import type { Ref } from 'vue'

// 自动分组 
import Tab from './components/Tab/index.vue'
import RightMemu from './components/RightMemu/index.vue'

// 自动分组
import Tab1 from './test/Tab/index.vue'
import RightMemu1 from './test/RightMemu/index.vue'
import RightMemu2 from './test/RightMemu1/index.vue'

// other组
import { fun } from './test'
import { fun2, fun3 } from './test1'

默认的排序规则是：npm包 > type（类型）> other

• 它会自动识别当前包是不是npm包，如果是就是一组，可能有人会问type不是npm为什么要合成一块，其实如果type有两个以上就会形成一组，如果是一个的话，我觉得合并一起会好看点，不用那么多换行,而且npm和type的优先级最大 不会合并到other里面去的
• 其次 只要有两个以上就会自动根据你的路径./components前一个斜杠去合成一组，其他单个的合成other一组
• 自动分组后 会把组里面的进行排序 也会把所有的自动分组按数量进行排序

配置

sort

自定义排序的优先级，默认npm,type在最上面，other在最下面，可以通过groups配置去改变中间位置

module.exports = {
  rules: {
    'group-import/imports': [
      2,
      {
        sort: ['./components']
      }
    ]
  }
}

排序前↓

import { storeToRefs } from 'pinia'
import { onMounted, ref } from 'vue'
import type { iconDialogRefType, wallpaperDialogRefType } from './type'

import useRightMemu from './hooks/useRightMemu'
import useRightMemu1 from './hooks/useRightMemu1'

import Tab from './components/Tab/index.vue'
import RightMemu from './components/RightMemu/index.vue'
import IconDialog from './components/IconDialog/index.vue'
import SearchInput from './components/SearchInput/index.vue'
import WallpaperDialog from './components/wallpaperDialog/index.vue'

import { useBgIamgeStore } from '../stores/index'
import { pageVisibilitychange } from '../utils/index'
import { useRightMemuStore, useTabStore } from '@/stores'

console.log(1)
console.log(2)
console.log(3)
console.log(4)

排序后↓

import { storeToRefs } from 'pinia'
import { onMounted, ref } from 'vue'
import type { iconDialogRefType, wallpaperDialogRefType } from './type'


import Tab from './components/Tab/index.vue'
import RightMemu from './components/RightMemu/index.vue'
import IconDialog from './components/IconDialog/index.vue'
import SearchInput from './components/SearchInput/index.vue'
import WallpaperDialog from './components/wallpaperDialog/index.vue'

import useRightMemu from './hooks/useRightMemu'
import useRightMemu1 from './hooks/useRightMemu1'

import { useBgIamgeStore } from '../stores/index'
import { pageVisibilitychange } from '../utils/index'
import { useRightMemuStore, useTabStore } from '@/stores'

console.log(1)
console.log(2)
console.log(3)
console.log(4)

最后

欢迎去体验一下，也可以提issues给予改进