prettier로 import module 순서 통일하기

들어가며

코드 베이스가 커지면서, 저희 팀은 조금 더 규격화 된 코드를 지향하기 시작했습니다. 비즈니스 로직이 길어지기 때문에 코드 리뷰 시에도 피로도를 최소화하기 위해 최대한 같은 구조로 쉽게 파악할 수 있도록 import order를 설정하였습니다.

 

다음과 같이 auto import에 의해 자유롭게 추가된 모듈을 순서에 맞춰 보다 읽기 쉽게 구조화할 수 있습니다.

Input

import React, {
    FC,
    useEffect,
    useRef,
    ChangeEvent,
    KeyboardEvent,
} from 'react';
import { logger } from '@core/logger';
import { reduce, debounce } from 'lodash';
import { Message } from '../Message';
import { createServer } from '@server/node';
import { Alert } from '@ui/Alert';
import { repeat, filter, add } from '../utils';
import { initializeApp } from '@core/app';
import { Popup } from '@ui/Popup';
import { createConnection } from '@server/database';

Output

import { debounce, reduce } from 'lodash';
import React, {
    ChangeEvent,
    FC,
    KeyboardEvent,
    useEffect,
    useRef,
} from 'react';

import { createConnection } from '@server/database';
import { createServer } from '@server/node';

import { initializeApp } from '@core/app';
import { logger } from '@core/logger';

import { Alert } from '@ui/Alert';
import { Popup } from '@ui/Popup';

import { Message } from '../Message';
import { add, filter, repeat } from '../utils';

레퍼런스

https://github.com/trivago/prettier-plugin-sort-imports

GitHub - trivago/prettier-plugin-sort-imports: A prettier plugin to sort imports in typescript and javascript files by the provi

$ yarn add prettier @trivago/prettier-plugin-sort-imports

.prettierrc

{
  "printWidth": 90,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "importOrder": [
    "^react",
    "^next",
    "<THIRD_PARTY_MODULES>",

    "^~/api/(.*)$",
    "^~/hooks/(.*)$",
    "^~/components/(.*)$",
    "^~/utils/(.*)$",

    "^[./]"
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}