【eslint 插件】导入语句排序

编写思路

  • 通过编写 eslint 插件
  • 在 ast 遍历过程中筛选出所有导入语句
  • 记录排序前导入语句代码块内容
  • 对导入语句进行排序
  • 比对排序前后导入语句代码块
  • 若不一样则进行替换

排序规则

  • 对导入语句进行分组
    • npm 包
    • 相对路径/绝对路径
      • 判断路径中是否携带指定路径类型(ex.['components', 'api']),若携带则划分至该路径类型组
      • ex. import aa from './../seller/components/aa',划分至 components 组
      • 若不携带,则正向遍历找到第一个路径,划分至该路径分组
      • ex. import aa from './../hooks/aa',划分至 hooks 组
      • 若存在分组内仅有一条导入语句,划分至合并分组
    • import type
  • 属性排序
    • 针对具名导入,属性由短至长排序
  • 组内排序
    • 导入语句由短至长排序
  • 组间排序
    • npm 包最前,合并分组 & 类型导入分组位于最后
    • 其余分组按照导入语句数量由短至长排序
    • 组间空一行

插件使用

arduino 复制代码
pnpm add eslint-plugin-for-sort-import -D
js 复制代码
// eslint.config.js
import importSortPlugin from 'eslint-plugin-for-sort-import'

export default [
  ...importSortPlugin(),
]

若未生效可重启编辑器 or

bash 复制代码
ctrl + shift + p,输入 restart eslint server

参数说明

csharp 复制代码
export interface PluginConfig {
  /** 行尾风格: 'lf' 或 'crlf' */
  end_of_line: 'lf' | 'crlf'
  /** 缓存大小限制 */
  max_cache_size: number
  /** 路径类型识别列表 */
  path_type: string[]
}
  • end_of_line: 行尾风格,默认 'lf'
    • 用于决定换行符采用 '\n' 还是 '\r\n'
  • max_cache_size: 缓存大小限制
    • 插件采用了 LRU Cache,缓存文件排序后的结果
  • path_type: 路径类型识别列表
    • 用于指定分组

核心逻辑

此处仅展示了最简单的将导入语句按照长短排序

js 复制代码
export const sortImportsRule = {
  meta: {
    type: 'suggestion',
    docs: {
      description: '导入语句按照指定规则排序',
      category: 'Stylistic Issues',
      recommended: false
    },
    fixable: 'code'
  },
  create(context) {
    return {
      Program(node) {
        const sourceCode = context.getSourceCode()

        // 筛选出所有导入声明
        const importDeclarations = node.body.filter((node) => node.type === 'ImportDeclaration')
        if (importDeclarations.length === 0) return

        // 获取当前导入代码块
        const start = importDeclarations[0].range[0]
        const end = importDeclarations[importDeclarations.length - 1].range[1]
        const currentText = sourceCode.text.slice(start, end)

        // 生成排序后的导入代码块
        const group = [...importDeclarations]
        group.forEach((node, index) => {
          group[index].processedText = sourceCode.getText(node)
        }
        group.sort((a, b) => a.processedText.length - b.processedText.length)
        const newImports = group.map((node) => node.processedText).join('\n')

        // 如果当前导入代码块不等于排序后的导入代码块,则重新排序,进行修复
        if (currentText !== newImports) {
          context.report({
            node: importDeclarations[0],
            message: '导入语句未按照排序规则进行排序',
            fix(fixer) {
              return fixer.replaceTextRange([start, end], newImports)
            }
          })
        }
      }
    }
  }
}

最后

感兴趣的可移步源码

相关推荐
袁煦丞7 分钟前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆8 分钟前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记19 分钟前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆19 分钟前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户214118326360220 分钟前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军20 分钟前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句22 分钟前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜23 分钟前
CommonJS与ESM
前端·javascript
LaoZhangAI23 分钟前
GPT-image-1 API如何传多图:开发者完全指南
前端·后端
G等你下课25 分钟前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试