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

原创

whileideath

修改于 2025-10-31 11:18:27

3.4K2

一、例子

导入前

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'
],

eslint9.x版本使用了扁平化风格

import simpleImportSort from "eslint-plugin-simple-import-sort";
在eslint.config.js的plugins字段中加入"simple-import-sort": simpleImportSort,
plugins: {
      // 其它插件
      "simple-import-sort": simpleImportSort,// 主要这一行，上面都是我
    },

在rules中加入以下规则eslint9.x之前版本

'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' // 确保在导入后有换行符

9.x以后版本

rules规则：
'simple-import-sort/imports': [
        'error',
        {
          groups: [
            // 侧效导入（必须优先）
            ['^\\u0000'],

            // Node 内置
            ['^node:'],

            // 包：react 优先，其次其他包
            ['^react', '^@?\\w'],

            // 项目内别名（根据你的约定，这里示例为 '@/...' 与 'components/...'
            ['^@/', '^components(/.*|$)'],

            // 父级相对导入. 把 `..` 放在最后.
            ['^\\.\\.(?!/?$)', '^\\.\\./?$'],

            // 同级与其他相对导入. 把同一个文件夹放在最后
            ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],

            // 样式导入.
            ['^.+\\.(css|less|scss|sass)$'],
          ]
        }
      ],

最后执行