Why add empty line bettween two react imports

[余腾靖]

settings:

{
    'simple-import-sort/imports': [
            'error',
            {
                groups: [
                    // Side effect imports.
                    ['^\\u0000'],
                    // Node.js builtins prefixed with `node:`.
                    ['^node:'],
                    // framework
                    ['^react$', '^next(/.*)?$', '^jotai$', '^@mui/'],
                    // Packages.
                    // Things that start with a letter (or digit or underscore), or `@` followed by a letter.
                    ['^@?\\w'],
                    ['^@?(minimals|lib|components|hooks|utils|types|constants)(/.*|$)'],
                    // Absolute imports and other imports such as Vue-style `@/foo`.
                    // Anything not matched in another group.
                    ['^'],
                    // Relative imports.
                    // Anything that starts with a dot.
                    ['^\\.'],
                ],
            },
        ],
}

input:

import { useState } from 'react';
import type { FC } from 'react';

output:

import { useState } from 'react';

import type { FC } from 'react';

versions:

"eslint": "^8.57.0",
"eslint-plugin-import": "2.29.1",
"eslint-plugin-simple-import-sort": "^12.1.0",

[Simon Lydell]

Hi! From https://github.com/lydell/eslint-plugin-simple-import-sort?tab=readme-ov-file#custom-grouping:

Type imports have \u0000 appended to their from string (ends with \u0000). You can match them with "\u0000$".

This means that your '^react$' regex doesn’t match in the type import, because it is matched against 'react\u0000'.

(Yes, this \u0000 stuff is pretty weird, but it is what it is.)

[余腾靖]

Ok, I rewrite to:

'simple-import-sort/imports': [
  error,
  {
    groups: [
      // Side effect imports.
      ['^\\u0000'],
      // Node.js builtins
      [
        '^node:',
        `^(${require('node:module')
          .builtinModules.filter((mod) => mod !== 'constants')
          .join('|')})(/.*|$)`,
      ],
      // Framework
      ['^react\u0000?$', '^next(/.*)?\u0000?$', '^jotai\u0000?$', '^@mui/'],
      // Packages
      ['^@?\\w'],
      // Internal modules
      ['^(@/)?(minimals|lib|components|hooks|utils|types|constants)(/.*|$)'],
      // Absolute imports and other imports such as Vue-style `@/foo`.
      // Anything not matched in another group.
      ['^'],
      // Relative imports.
      // Anything that starts with a dot.
      ['^\\.'],
    ],
  },
],

[Simon Lydell]

Nice! 👍