使用eslint自动调整代码引入顺序(react版)

原创

whileideath

修改于 2023-03-27 17:47:42

2.4K2

修改于 2023-03-27 17:47:42

文章被收录于专栏：全栈工程师的自我修养全栈工程师的自我修养

一、例子

导入前

import React from "react";
import Button from "../Button";

import  "./styles.css";
import type { User } from "../../types";
import { getUser } from "../../api";

import PropTypes from "prop-types";
import classnames from "classnames";
import { truncate, formatNumber } from "../../utils";

导入后

import React from "react";
import classnames from "classnames";
import PropTypes from "prop-types";

import { getUser } from "../../api";
import type { User } from "../../types";
import { formatNumber, truncate } from "../../utils";
import Button from "../Button";
import "./styles.css";

二、操作流程

安装插件：插件地址：https://github.com/lydell/eslint-plugin-simple-import-sort

yarn add -D eslint-plugin-simple-import-sort

配置：

在.eslintrc中分别加入simple-import-sort，如下

plugins: [
  'react',
  'simple-import-sort'
],

在rules中加入以下规则

'simple-import-sort/imports': [
  'error',
  {
    groups: [
      // react放在首行
      ['^react', '^@?\\w'],
      // 内部导入
      ['^(@|components)(/.*|$)'],
      // 父级导入. 把 `..` 放在最后.
      ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
      // 同级导入. 把同一个文件夹.放在最后
      ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
      // 样式导入.
      ['^.+\\.?(css)$'],
      // 带有副作用导入，比如import 'a.css'这种.
      ['^\\u0000'],
    ]
  }
],
'simple-import-sort/exports': 'error',// 导出
'import/no-duplicates': 'error',// 合并同一个导入。ide自动导入，会导致impoprt {a} from 'A'和impoprt {a1} from 'A'导入2次
'import/first': 'error', // 确保所有导入位于文件的顶部
'import/newline-after-import': 'error' // 确保在导入后有换行符

最后执行