230201 항해99 87일차 ESlint로 import order 설정

import, css 등은 할 수 있다면 코드를 원하는 부류끼리 묶어서 깔끔하게 정리하고 싶다. ESlint로 import order를 자동으로 알려주는 방법을 찾았고, 프로젝트에 적용했다.
사용하면서 굉장히 편리하다고 느꼈던 기능 중 하나였기 때문에 설정 방법을 기록한다.

설정 방법

1. ESlint 플러그인 설치

yarn add -D eslint-plugin-import

2. .eslintrc.js 파일에 plugins와 rules를 수정해 import grouping과 sorting을 벗어난 경우 에러로 인식하도록 하고, 이를 강제하도록 설정

module.exports = {
  //... existing
  plugins: [...(existing plugins), 'import'],
  rules: {
    // this is for sorting WITHIN an import
    'sort-imports': ['error', {ignoreCase: true, ignoreDeclarationSort: true}],
    // this is for sorting imports
    'import/order': [
      'error',
      {
        groups: [
          ['external', 'builtin'],
          'internal',
          ['sibling', 'parent'],
          'index',
        ],
        pathGroups: [
          {
            pattern: '@(react|react-native)',
            group: 'external',
            position: 'before',
          },
          {
            pattern: '@src/**',
            group: 'internal',
          },
        ],
        pathGroupsExcludedImportTypes: ['internal', 'react'],
        'newlines-between': 'always',
        alphabetize: {
          order: 'asc',
          caseInsensitive: true,
        },
      },
    ],
  },
};

알아서 원하는 규칙으로 위 파일을 수정하면 된다.

참조: Organizing Imports in React and React Native