import导入顺序杂乱的问题

我们经常会遇到项目中的import语句顺序混乱的问题。这不仅会影响代码的可读性,还可能使我们代码在提交的时候产生不必要的冲突。

解决方案

eslint-plugin-import

开始我调研了一下eslint-plugin-import插件。这款插件的排序逻辑是这样:

  1. builtin : 这代表Node.js内置的模块,例如fspath等。

    import fs from 'fs';

  2. external: 这代表外部库或框架,通常是你通过npm或yarn安装的模块。

    import axios from 'axios';

  3. internal: 这代表项目内部的模块,但它们通常在项目的不同目录或子目录中。这些模块不是直接的父级或同级模块。

    import { someFunction } from '@utils/my-helper';

  4. parent: 这代表从父目录导入的模块。

    import something from '../something';

  5. sibling: 这代表与当前文件在同一目录下的其他文件。

    import { siblingFunction } from './sibling-module';

  6. index : 这代表从目录的index文件导入的模块。

    import { indexFunction } from './';

  7. object: 这代表导入的对象属性,例如:

    import('some-module').then(({ someExport }) => ...);

  8. type: 这代表从模块导入的类型或接口(这在TypeScript中特别有用)。

    import type { MyType } from './types';

大致分为这些模块。我们可以在eslint的规则中根据这些模块进行排序。但是这并不是我想要的排序模式,我更希望根据功能进行排序。组件放在一起,hooks放在一起,工具函数放在一起,等等。

eslint-plugin-simple-import-sort

于是我找到了eslint-plugin-simple-import-sort这个插件。使用方式如下:

  1. 安装插件:

    npm install --save-dev eslint-plugin-simple-import-sort

  2. 配置 ESLint : 在 .eslintrc.js 或你的 ESLint 配置文件中,添加以下配置:

    module.exports = {
    // ... 其他配置
    plugins: ['simple-import-sort'],
    rules: {
    'simple-import-sort/imports': 'error',
    'simple-import-sort/exports': 'error',
    },
    };

  3. 自定义排序:

    复制代码
     'simple-import-sort/imports': [
      'error',
      {
        groups: [
          [`^vue$`, `^vue-router$`, `^ant-design-vue$`, `^echarts$`], // 你可以根据需要添加更多的内置模块
            [`.*\\.vue$`], // .vue 文件
            [`.*/assets/.*`, `^@/assets$`],
            [`.*/config/.*`, `^@/config$`],
            [`.*/hooks/.*`, `^@/hooks$`],
            [`.*/plugins/.*`, `^@/plugins$`],
            [`.*/router/.*`, `^@/router$`],
            [`^@/services$`, `^@/services/.*`],
            [`.*/store/.*`, `^@/store$`],
            [`.*/utils/.*`, `^@/utils$`],
            [`^`],
            [`^type `],
        ],
      },
    ],
相关推荐
猩兵哥哥3 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
EMT4 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
我是日安4 小时前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js
鹏多多5 小时前
深入解析vue的keep-alive缓存机制
前端·javascript·vue.js
用户516816614584121 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦21 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He1 天前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ1 天前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊1 天前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码1 天前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js