eslint 를 이용해서 import 순서를 자동으로 바꿔보자!

우리는 종종 프로젝트 협업을 하다보면 무수한 import 구문들을 만나게 된다.

사소하지만 종종 import 구문 순서가 맞지 않아서 다른 팀원들과 충돌 나는 경우가 많았다. 게다가 import 구문 순서를 정해 놓으면 어떤 것이 어디서 불러와졌는지 알기 쉬운 코드가 된다.

그렇다면, 어떻게 import 구문 순서를 다른 팀원들에게도 강요할 수 있을까?

이렇때 유용하게 사용되는 것이 eslint 이다. eslint 는 코딩 컨벤션에 위배되는 코드나 안티패턴들을 자동 검출하게 해주는 도구다.

대부분의 IDE 에서는 eslint로 검출된 안티패턴이나 코드 컨벤션에 맞지 않는 코드들을 자동으로 고쳐주는 기능인 autofix 를 제공한다.

우리가 자주쓰는 vscode에서는 settings.json 에 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, 구문을 추가하게 되면 autofix가 적용된다. 아직 안쓰신 분들은 빠르게 설정하시고 코딩생활 광명 찾으시길 바란다.

eslint에 우리가 원하는 컨벤션들을 담기 위해서는 .eslintrc.json 파일의 plugins 와 rules 속성을 이용하면 된다.

eslint 에서 import export 에 관한 컨벤션이 담겨있는 plugin 은 eslint-plugin-import 를 사용했다.

이 플러그인에서는 import/order 뿐만이 아니라 no-named-export 나 no-commonjs 같은 다양한 룰들도 제공한다.

우리는 import 순서에 관심 있으므로 import/order 에 관해서 내가 설정해준 config 들을 보면, 아래와 같다.

module.exports = {
	...,
  plugins: ['import'],
  rules: {
    ...,
    'import/order': [
      'warn',
      {
        groups: ['builtin', 'external', 'internal', 'type'],
        pathGroups: [
          {
            pattern: 'react+(|-native)',
            group: 'builtin',
            position: 'before',
          },
          {
            pattern: '@**',
            group: 'external',
            position: 'after',
          },
        ],
        alphabetize: {
          order: 'asc',
          caseInsensitive: true,
        },
        pathGroupsExcludedImportTypes: ['builtin'],
      },
    ],
  },
};

groups : 'builtin', 'external', 'internal' , 'type' 등 으로 나누어 진다.

// 1. node "builtin" modules
import fs from 'fs';

// 2. "external" modules
import React from 'react'

// 3. "internal" modules (상대 경로)
import foo from 'src/foo';

또 유용하게 썻던것은 groups 순서 이 외에 일정한 패턴을 가진 녀석들을 다른 그룹으로 묶어서 순서를 결정하는 pathGroups 속성이다.

나는 react 나 react-native 에서 import 받아오는 것을 최상위에 선언하고 싶었고 그렇기때문에

  {
      pattern: 'react+(|-native)',
      group: 'builtin',
      position: 'before',
 },

위와 같은 속성을 추가해 주었다. 정규 표현식으로 import 받아오는 경로가 react 나 react-native 라면 builtin 그룹 전에 올라와야한다는 rule 이다.

다음으로 해줬던 것은 절대 경로로 설정해 주었던 path 들을 external 다음에 선언하기 위해서 pattern 과 group,position 을 추가해주었다.

lint 적용 결과

// 적용전
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import React, { useCallback, useMemo, useRef } from 'react';
import { useTodos } from '@hooks';
import { FlatList, ListRenderItem } from 'react-native';
import { ImportType } from '@types';
import Item from './components/Item';

// 적용 후
import React, { useCallback, useMemo, useRef } from 'react';
import { FlatList, ListRenderItem } from 'react-native';

import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { useTodos } from '@hooks';
import { ImportType } from '@types';

import Item from './components/Item';

참고

https://www.npmjs.com/package/eslint-plugin-import

https://dev.to/julioxavierr/sorting-your-imports-with-eslint-3ped

https://seohyun0120.tistory.com/entry/ESLint-importsexports-%EA%B5%AC%EB%AC%B8%EC%9D%98-%EC%88%9C%EC%84%9C-%EC%9E%90%EB%8F%99-%EC%A0%95%EB%A0%AC%ED%95%98%EA%B8%B0