【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)
            }
          })
        }
      }
    }
  }
}

最后

感兴趣的可移步源码

相关推荐
爱分享的程序员31 分钟前
全栈架构设计图
前端
KenXu44 分钟前
YYEVA WebGPU 渲染实现技术解析
前端·webgl
~卷心菜~1 小时前
CSS基础-即学即用 -- 笔记1
前端·css·笔记
我最厉害。,。1 小时前
CSRF 请求伪造&Referer 同源&置空&配合 XSS&Token 值校验&复用删除
前端·xss·csrf
vvilkim1 小时前
深入解析React.lazy与Suspense:现代React应用的性能优化利器
前端·react.js·前端框架
野猪亨利2581 小时前
【JS 小白也能懂】回调函数:让代码学会「听话办事」的魔法
前端
五号厂房1 小时前
前端接口编写的最佳实践总结:设计、实现、维护全流程
前端
Cutey9161 小时前
Vue 实现多语言国际化的完整指南
前端·javascript·面试
广龙宇1 小时前
【Web API系列】Web Shared Storage API 深度解析:WindowSharedStorage 接口实战指南
前端