理解eslint-plugin-perfectionist中样式导入排序的问题

eslint-plugin-perfectionist是一个强大的ESLint插件，专注于帮助开发者保持代码的一致性和完美性。其中，sort-imports规则是该插件最核心的功能之一，它能够自动对JavaScript/TypeScript文件中的导入语句进行排序和分组。

在实际使用中，开发者可能会遇到样式导入（如.scss文件）未被正确排序的情况。这通常是由于配置中缺少关键选项导致的。让我们深入分析这个问题及其解决方案。

问题现象

当开发者按照文档配置sort-imports规则后，发现样式导入（如'./toast.scss'）没有被归入预期的"style"分组，而是保持原样或与其他导入语句分离。这会导致导入语句的组织不够理想，影响代码的可读性。

根本原因

样式导入本质上属于"副作用导入"（side-effect import），即那些不导入任何具体值，仅用于引入模块副作用的导入语句。在eslint-plugin-perfectionist中，默认情况下不会对这些副作用导入进行排序处理。

解决方案

要解决这个问题，需要在规则配置中显式启用sortSideEffects选项。这个选项专门控制是否对副作用导入进行排序。修改后的配置示例如下：

rules: {
  'perfectionist/sort-imports': [
    'error',
    {
      type: 'natural',
      order: 'asc',
      sortSideEffects: true,  // 关键配置项
      groups: [
        'react',
        'type',
        ['builtin', 'external'],
        'internal-type',
        'internal',
        ['parent-type', 'sibling-type', 'index-type'],
        ['parent', 'sibling', 'index'],
        'object',
        'aliased',
        'style',
        'unknown',
      ],
      customGroups: {
        value: {
          react: ['^react$', '^react-.+'],
          aliased: ['^@'],
        },
      },
    },
  ],
},

实际效果对比

启用sortSideEffects后，样式导入将被正确识别并归入"style"分组。以示例代码为例：

修改前结果:

import React, { MouseEvent, useEffect, useMemo, useState } from 'react';
import { Button, ProgressBar } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';

import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { DynamicIcon } from '@platform/components/dynamic-icon-components';
import { Namespace } from '@platform/router';

import './toast.scss';

import { Toast } from '@platform/types/ui-types';

修改后预期结果:

import React, { MouseEvent, useEffect, useMemo, useState } from 'react';
import { Button, ProgressBar } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';

import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { DynamicIcon } from '@platform/components/dynamic-icon-components';
import { Namespace } from '@platform/router';
import { Toast } from '@platform/types/ui-types';

import './toast.scss';

最佳实践建议

1. 对于包含样式导入的项目，始终启用sortSideEffects选项
2. 将"style"分组放在导入分组的较后位置，通常放在对象导入和未知导入之前
3. 考虑将CSS模块导入（如.module.scss）也纳入样式分组
4. 在团队中统一这些配置，确保所有成员获得一致的代码格式化体验

通过正确配置eslint-plugin-perfectionist，开发者可以确保项目中所有类型的导入语句都能得到恰当的组织和排序，从而提高代码的可维护性和一致性。