如何配置ESLint为路径别名添加行间距？

我的ESLint自动导入排序配置目前运行正常，React相关导入位于顶部，其余导入已分组且组间有空格，但希望不同路径别名（如@components、@hooks等）之间也能添加行间距。当前所有自定义别名都被归为internal组，组内没有空行分隔。

以下是我的配置文件：

.eslintrc.js #

module.exports = {
  root: true,
  extends: '@react-native-community',
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'import'],
  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      rules: {
        'no-undef': 'off',
        'no-shadow': 'off',
        'react/jsx-uses-react': 'off',
        'react/react-in-jsx-scope': 'off',
        '@typescript-eslint/no-shadow': ['error'],
        'sort-imports': [
          'error',
          { ignoreCase: true, ignoreDeclarationSort: true },
        ],
        'import/order': [
          'error',
          {
            groups: [
              ['external', 'builtin'],
              'internal',
              ['sibling', 'parent'],
              'index',
            ],
            pathGroups: [
              {
                pattern: '@(react|react-native)',
                group: 'external',
                position: 'before',
              },
              {
                pattern: '@tests/**',
                group: 'internal',
              },
              {
                pattern: '@assets/**',
                group: 'internal',
              },
              {
                pattern: '@components/**',
                group: 'internal',
              },
              {
                pattern: '@config/**',
                group: 'internal',
              },
              {
                pattern: '@constants/**',
                group: 'internal',
              },
              {
                pattern: '@hooks/**',
                group: 'internal',
              },
              {
                pattern: '@jotai/**',
                group: 'internal',
              },
              {
                pattern: '@navigation/**',
                group: 'internal',
              },
              {
                pattern: '@routes/**',
                group: 'internal',
              },
              {
                pattern: '@screens/**',
                group: 'internal',
              },
              {
                pattern: '@theme/**',
                group: 'internal',
              },
              {
                pattern: '@types/**',
                group: 'internal',
              },
              {
                pattern: '@utils/**',
                group: 'internal',
              },
            ],
            pathGroupsExcludedImportTypes: ['internal', 'react'],
            'newlines-between': 'always',
            alphabetize: {
              order: 'asc',
              caseInsensitive: true,
            },
          },
        ],
      },
    },
  ],
};

tsconfig.json #

{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@tests/*": ["src/__tests__/*"],
      "@assets/*": ["src/assets/*"],
      "@components/*": ["src/components/*"],
      "@config/*": ["src/config/*"],
      "@constants/*": ["src/constants/*"],
      "@hooks/*": ["src/hooks/*"],
      "@jotai/*": ["src/jotai/*"],
      "@navigation/*": ["src/navigation/*"],
      "@routes/*": ["src/routes/*"],
      "@screens/*": ["src/screens/*"],
      "@theme/*": ["src/theme/*"],
      "@app/types/*": ["src/types/*"],
      "@app/utils/*": ["src/utils/*"]
    }
  }
}

要实现不同路径别名之间的行间距，核心是让每个别名成为独立的分组，从而触发newlines-between: always的规则。你可以通过以下两种方式修改配置：

方法1：启用separateGroups选项（推荐） #

在import/order规则中添加separateGroups: true，该选项会让每个pathGroup作为独立的分组，即使它们属于同一个group，组间也会自动添加空行。

修改后的.eslintrc.js中import/order部分：

'import/order': [
  'error',
  {
    groups: [
      ['external', 'builtin'],
      'internal',
      ['sibling', 'parent'],
      'index',
    ],
    pathGroups: [
      // 保持原有的pathGroups配置不变
      {
        pattern: '@(react|react-native)',
        group: 'external',
        position: 'before',
      },
      {
        pattern: '@tests/**',
        group: 'internal',
      },
      {
        pattern: '@assets/**',
        group: 'internal',
      },
      // ...其余别名配置
    ],
    pathGroupsExcludedImportTypes: ['internal', 'react'],
    'newlines-between': 'always',
    separateGroups: true, // 新增这一行
    alphabetize: {
      order: 'asc',
      caseInsensitive: true,
    },
  },
],

方法2：为每个别名创建独立分组 #

如果需要更精细的控制，可以将每个别名分配到单独的自定义组中，然后在groups数组中声明这些组：

修改后的.eslintrc.js中import/order部分：

'import/order': [
  'error',
  {
    groups: [
      ['external', 'builtin'],
      '@tests',
      '@assets',
      '@components',
      '@config',
      '@constants',
      '@hooks',
      '@jotai',
      '@navigation',
      '@routes',
      '@screens',
      '@theme',
      '@types',
      '@utils',
      ['sibling', 'parent'],
      'index',
    ],
    pathGroups: [
      {
        pattern: '@(react|react-native)',
        group: 'external',
        position: 'before',
      },
      {
        pattern: '@tests/**',
        group: '@tests', // 对应自定义组名
      },
      {
        pattern: '@assets/**',
        group: '@assets',
      },
      {
        pattern: '@components/**',
        group: '@components',
      },
      // ...其余别名都对应到各自的自定义组
    ],
    pathGroupsExcludedImportTypes: ['react'],
    'newlines-between': 'always',
    alphabetize: {
      order: 'asc',
      caseInsensitive: true,
    },
  },
],

注意事项 #

• 方法1更简洁，无需修改大量分组配置，适合你的现有场景。
• 修改配置后，记得重启ESLint服务或重新lint代码，确保配置生效。
• 两种方法都会保留原有的排序规则，同时在不同别名导入之间添加空行。

圣诞快乐！

内容的提问来源于stack exchange，提问作者user14263509