import문 정렬하기

코드를 작성하다 보면 라이브러리, 컴포넌트, 함수 등 import하는 것이 많아질 때가 있다.

import가 많아지게 되면 상단이 난잡해져서 필요한 것을 찾는 것이 힘들 때가 있다.

이번 글에서는 import문 정렬을 적용한 것에 대해 이야기하고자 한다.

sort-imports

먼저 eslint에서 자체적으로 제공하는 sort-imports가 있다.

{
  "sort-imports": ["error", {
    "ignoreCase": false,
    "ignoreDeclarationSort": false,
    "ignoreMemberSort": false,
    "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
    "allowSeparatedGroups": false
  }]
}

사용 방법은 위와 같으며 적용한 결과는 다음과 같다.

import 'module-without-export.js';
import * as bar from 'bar.js';
import * as foo from 'foo.js';
import {alpha, beta} from 'alpha.js';
import {delta, gamma} from 'delta.js';
import a from 'baz.js';
import {b} from 'qux.js';

각 옵션에 대한 정보는 공식 문서에 있는 예시를 참고하면 좋다.

여러 개를 가져오는 import에 대해서는 —fix 옵션 사용 시 내부적으로 sort를 진행하는 것을 확인할 수 있었다.

// before
import {beta, alpha} from 'alpha.js';

// after
import {alpha, beta} from 'alpha.js';

하지만 그 외의 것들은 오류 메시지만 나오고 자동으로 sort가 되지 않을뿐더러 그룹 간 개행이 이루어지지 않았다.

구글링을 하다 보니 2019년에 작성된 이슈를 발견할 수 있었고 eslint 팀에서 auto fix를 우선순위에 두고 작업을 하고 있지 않다고 했다. 댓글에도 플러그인을 쓰라는 의견이 많았고 이에 플러그인을 적용하게 되었다.

eslint-plugin-simple-import-sort

조사를 하다 보니 eslint-plugin-simple-import-sort라는 플러그인이 사용하기 편리해 보여서 이를 적용해보기로 했다.

이는 grouping을 통해 sort를 해주는 플러그인이고 사용 방법은 아래와 같다.

module.exports = {
	...
  plugins: ["simple-import-sort"],
  rules: {
	  ...
    "simple-import-sort/imports": [
      "error",
      {
        groups: [
          ["^\\u0000"],
          ["^expo"],
          ["^react"],
          ["^@"],
          ["^[a-z]"],
          ["^@/"],
          ["^\\./", "^\\.\\./"],
        ],
      },
    ],
  },
};

groups를 지정해 주면 그에 맞게 sort를 해주며 각 그룹마다 개행까지 해준다. 내가 설정한 그룹은 아래의 규칙을 따른다.

1. Side Effect Imports. ex) import "./setup";
2. expo로 시작하는 Import. ex) import { useFonts } from "expo-font";
3. react로 시작하는 Import. ex) import { useEffect } from "react";
4. @로 시작하는 외부 라이브러리 import. ex) import { QueryClientProvider } from "@tanstack/react-query";
5. 소문자로 시작하는 외부 라이브러리 import. ex) import lodash from "lodash";
6. Alias 경로 Import. ex) import Button from "@/components/common/button";
7. 상대 경로 Import. ex) import Text from "../text";

위 rule을 적용하기 전, 후의 결과는 아래와 같다.

// before
import { Image } from "expo-image";
import Button from "../button";
import Flex from "../flex";
import Text from "../text";
import { Dimensions, StyleSheet } from "react-native";
import { colors } from "@/constants/color";

// after
import { Image } from "expo-image";

import { Dimensions, StyleSheet } from "react-native";

import { colors } from "@/constants/color";

import Button from "../button";
import Flex from "../flex";
import Text from "../text";

그룹별로 나뉘어져서 훨씬 보기 좋아졌다!

마무리하며

평소에는 import문이 섞여있는 것을 신경 쓰지 않고 작업을 했었다. 그러다가 최근에 가독성이 너무 떨어진다고 생각하여 찾아보고 적용해 보았는데 깔끔해져서 너무 마음에 든다.

다른 사람들이 이 플러그인을 추천하냐고 물어본다면 당연히 추천한다!

참고

• eslint-sort-imports
• eslint-plugin-simple-import-sort