🚀   새로운 블로그로 이전했습니다.

(ESLint) sort import

snippet: lint
2023.01.11
2분

eslint sort-imports 설정은 autofix를 제공해주지 않는다.

크게 2가지 방법으로 해결할 수 있다.


simple-import-sort

plugin을 통해서 설정이 간편하다.
https://github.com/lydell/eslint-plugin-simple-import-sort

yarn add -D eslint-plugin-simple-import-sort
.eslintrc.js
module.exports = {
    //...
    "plugins": ["simple-import-sort"],
    "rules": {
        "simple-import-sort/imports": "error",
        "simple-import-sort/exports": "error"
    }
}

import 순서 커스텀화

{
    'simple-import-sort/imports': [
        'error',
        {
        groups: [['^\\u0000'], ['^@?\\w'], ['^~/', '^\\.']],
        },
    ],
}

eslint-plugin-import

타 plugin과 충돌될 경우 이를 사용하면 좋다. (예를 들어 eslint-plugin-svelte)
https://github.com/import-js/eslint-plugin-import

yarn add -D eslint-plugin-import
.eslintrc.js
module.exports = {
    //...
    settings: {
        'import/resolver': {
            alias: {
                map: [
                    ['~', './src'],
                ],
                extensions: ['.js', '.jsx', '.ts', '.tsx', '.svelte'],
            },
        },
    },
    rules: {
        // https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md
        'import/order': [
            'error',
            {
                groups: ['builtin', 'external', 'internal', ['parent', 'sibling', 'index']],
                alphabetize: {
                    order: 'asc',
                    caseInsensitive: true,
                },
                'newlines-between': 'always',
            },
        ],
        'import/first': 'error',
        'import/newline-after-import': 'error',
        'import/prefer-default-export': 'off',
        'import/no-useless-path-segments': ['error', { noUselessIndex: true }],
    }
}

import/order가 절대경로를 internal script로 인식하기 위해선 settings."import/resolver" 설정을 해줘야 한다.