查看原文
其他

解决import导入顺序杂乱无章的问题

作者:热心市民王某 

https://juejin.cn/post/7281474941257220152

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

解决方案

eslint-plugin-import

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

  1. builtin: 这代表Node.js内置的模块,例如fspath等。
import fs from 'fs';
  1. external: 这代表外部库或框架,通常是你通过npm或yarn安装的模块。
import axios from 'axios';
  1. internal: 这代表项目内部的模块,但它们通常在项目的不同目录或子目录中。这些模块不是直接的父级或同级模块。
import { someFunction } from '@utils/my-helper';
  1. parent: 这代表从父目录导入的模块。
import something from '../something';
  1. sibling: 这代表与当前文件在同一目录下的其他文件。
import { siblingFunction } from './sibling-module';
  1. index: 这代表从目录的index文件导入的模块。
import { indexFunction } from './';
  1. object: 这代表导入的对象属性,例如:
import('some-module').then(({ someExport }) => ...);
  1. 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
  1. 配置 ESLint: 在 .eslintrc.js 或你的 ESLint 配置文件中,添加以下配置:
module.exports = {
     // ... 其他配置
     plugins: ['simple-import-sort'],
     rules: {
       'simple-import-sort/imports''error',
       'simple-import-sort/exports''error',
     },
   };
  1. 自定义排序:
    '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 `],
       ],
     },
   ],

这样就会按照我们系统中的功能模块排序了!

推荐阅读  点击标题可跳转

1、一次前端性能优化——性能得分从56到96

2、用代码聊聊我们跟目前主流前端编程不一样的地方

3、二十张图片彻底讲明白 Webpack 设计理念,以看懂为目的

继续滑动看下一个
大前端技术之路
向上滑动看下一个

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存