[TypeScript] eslint-plugin-import - There should be no empty line between import groups

Settings

• Node: 20.11.17
• @typescript-eslint/eslint-plugin: 7.0.1
• @typescript-eslint/parser: 7.0.1
• eslint: 8.56.0
• eslint-config-prettier: 9.1.0
• eslint-import-resolver-typescript: 3.6.1
• eslint-plugin-import: 2.29.1
• eslint-plugin-prettier: 5.1.3
• prettier: 3.2.5

// .eslintrc.js

module.exports = {
    parser: '@typescript-eslint/parser',
    parserOptions: {
        project: 'tsconfig.json',
        tsconfigRootDir: __dirname,
        sourceType: 'module',
    },
    plugins: ['@typescript-eslint/eslint-plugin', 'import'],
    extends: [
        'plugin:@typescript-eslint/recommended',
        'plugin:prettier/recommended',
        'plugin:import/recommended',
        'plugin:import/typescript',
    ],
    root: true,
    env: {
        node: true,
        jest: true,
    },
    ignorePatterns: ['.eslintrc.js', 'dist/**'],
    settings: {
        'import/resolver': {
            typescript: true,
            node: true,
        },
        'import/parsers': { '@typescript-eslint/parser': ['.ts'] },
        'import/internal-regex': '^@libs',
    },
    rules: {
        indent: 'off',
        'max-depth': ['error', 4],
        'prettier/prettier': ['error', { printWidth: 120, tabWidth: 4 }],
        '@typescript-eslint/interface-name-prefix': 'off',
        '@typescript-eslint/explicit-function-return-type': 'off',
        '@typescript-eslint/explicit-module-boundary-types': 'off',
        '@typescript-eslint/no-explicit-any': 'off',
        '@typescript-eslint/no-empty-function': 'off',
        '@typescript-eslint/ban-types': ['error', { types: { Function: false, Object: false } }],
        '@typescript-eslint/ban-ts-comment': ['error', { 'ts-ignore': false }],
        '@typescript-eslint/no-unused-vars': 'warn',
        'import/namespace': 'off',
        'import/order': [
            'error',
            {
                groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
                alphabetize: {
                    order: 'asc',
                    caseInsensitive: true,
                },
                'newlines-between': 'never',
            },
        ],
    },
};

 

 

Problem

// external
import { Foo } from 'foo';
import { Bar } from 'bar';
import { Baz } from 'baz';
// utils
import { utilFunc } from '@libs/utils';


console.error('blah blah');
console.debug('This is test code...!');
console.log(utilFunc('Hello, world!'));

$ eslint —fix

# error: There should be no empty line between import groups  import/order

 

import 를 정렬하는 규칙을 추가하고 싶어서 eslint-plugin-import 를 추가했더니 

 

 

Resolved

// 최상단에 있는 주석은 문제 없음!
import { Foo } from 'foo';
import { Bar } from 'bar';
import { Baz } from 'baz';
import { utilFunc } from '@libs/utils'; // THIS_IS_COMMENT
// import 사이에만 없으면 문제 없음!


console.error('blah blah');
console.debug('This is test code...!');
console.log(utilFunc('Hello, world!'));

 

import 구문 사이에 있는 주석이 있는 경우 문제가 발생하는 것으로 확인되어 위 예시처럼

중간에 있던 주석을 없애주니 정상 작동되었다.

 

 

Reference

• 유사 문제