使用 sort-imports 排序规则美化头部 import 代码

我们在开发一个页面的时候,文件头部总是会有一堆 import 代码,特别是使用 React 技术栈的同学感同身受,随着项目代码的增多,如果不对头部的代码进行分层,会导致代码看起来很冗余,我们需要它按照一定的规则进行排序。

问题本质

  • 当头部 import 代码过多时,它往往是这样的:
 import { useAntdTable, useBoolean, useRequest, useSetState } from 'ahooks'
 import type { ColumnsType, ColumnType } from 'antd/es/table';
 import ImportFileModal from './components/ImportFileModal'
 import ImportFundReceiptListTable from './components/ImportFundReceiptListTable'
 import { get, reduce, toNumber } from 'lodash'
 import moment, { Moment } from 'moment'
 import React, { FC, useState } from 'react'
 import { Link } from 'react-router-dom';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
 import { transPostToGet } from '@/utils/utils';
 import ImportErrorModal from './components/ImportErrorModal'
 import ImportNumberModal from './components/ImportNumberModal'
 import TrendTotal from './components/TrendTotal'
 import { Button, Card, Col, DatePicker, Form, Row, Space, Table } from 'antd'
 import { FundReceiptTable, Json2DBParams, TableParams } from './utils/interface'
 import { generatePageJson, getReceiptList, saveJsonDB } from './utils/service'

如果不进行处理,可读性极差,对于有强迫症的我实在忍不了。

配置 Eslint

  1. Eslint官网 本身提供了一条名叫 sort-imports 的规则,首先我们需要安装一个插件 eslint-plugin-simple-import-sort
pnpm add -D eslint-plugin-simple-import-sort
  1. 配置 .eslintrc.cjs 文件,加入配置:
{
 "plugins": ["simple-import-sort"],
 "rules": {
   "simple-import-sort/imports": "error",
 }
}

这样我们就配置好了,以后当我们开发页面的时候,Eslint 会自动帮我们把头部的 import 代码进行排序。

排序后是这样的:

import { useAntdTable, useBoolean, useRequest, useSetState } from 'ahooks'
import { Button, Card, Col, DatePicker, Form, Row, Space, Table } from 'antd'
import type { ColumnsType, ColumnType } from 'antd/es/table';
import { get, reduce, toNumber } from 'lodash'
import moment, { Moment } from 'moment'
import React, { FC, useState } from 'react'
import { Link } from 'react-router-dom';

import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { transPostToGet } from '@/utils/utils';

import ImportErrorModal from './components/ImportErrorModal'
import ImportFileModal from './components/ImportFileModal'
import ImportFundReceiptListTable from './components/ImportFundReceiptListTable'
import ImportNumberModal from './components/ImportNumberModal'
import TrendTotal from './components/TrendTotal'
import { FundReceiptTable, Json2DBParams, TableParams } from './utils/interface'
import { generatePageJson, getReceiptList, saveJsonDB } from './utils/service'

怎么样,是不是可读性变好很多!

觉得不错的话点个赞吧🫰

  • 9
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

白雾茫茫丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值