import 순서를 지정하는 eslint-import-plugin

하나의 파일이 많은 package들을 import하다보면 import된 시간순서에 따라 뒤죽박죽으로 선언됩니다

 

민감하신분들은 상단의 import 구문들이 모여있는 곳을 깨끗이 순서대로 정리를 하는 사람도 있을테고

 

그냥 무시하고 넘어가는 분들도 있을거예요

 

import 가 모여있는 곳을 깨끗이 정리하고 싶으시다면

 

import 선언의 패키지들의 순서를 지정하는 eslint-import-plugin 이 있습니다

 

typescript에서 사용하고 싶으시면 eslint-import-resolver-typescript 를 사용하시면 됩니다

 

 

.eslintrc.js(json, js, yml) 를 아래의 설정을 참고하여 선언해주시면 됩니다

 

import 되는 순서를 Path의 pattern을 통해 상세하게 그룹화할수도 있고

 

알파벳 순이라던가, 그룹별 한줄띄기라던가 다양한 설정을 사용하실수 있습니다

 

module.exports = {
  plugins: ['import'],
  rules: {
    // turn on errors for missing imports
    'import/no-unresolved': 'error',
    'import/order': [
      'warn',
      {
        groups: ['builtin', 'external', 'internal'],
      },
    ],
  },
  settings: {
    'import/parsers': {
      '@typescript-eslint/parser': ['.ts', '.tsx'],
    },
    'import/resolver': {
      typescript: {},
    },
  },
};