prettier 설정

.prettierrc

{
    "trailingComma": "all",
    "tabWidth": 2,
    "useTabs": true,
    "semi": true,
    "singleQuote": true,
    "importOrder": [
        "<THIRD_PARTY_MODULES>",
        "^@/components/(.*)$",
        "^@/screens/(.*)$",
        "^@/ui/(.*)$",
        "^@/hooks/(.*)$",
        "^@/shared/(.*)$",
        "^@/services/(.*)$",
        "^@/assets/(.*)$",
        "^@/utils/(.*)$",
        "^@/config/(.*)$",
        "^@/store/(.*)$",
        "^../(.*)",
        "^./(.*)",
        "(.scss)$"
    ],
    "importOrderSeparation": true,
    "importOrderSortSpecifiers": true
}

importOrder

이름에서 알 수 있듯이 정렬을 진행하는 순서이다.
나의 경우에는 별칭을 기준으로 정렬 순서를 정하고 있다.

별칭을 설정하면 좋다는 이유가 바로 이것 때문이다.

제일 앞에있는 순서대로 정렬이 진행되며,
가장 마지막의 ^[./]는 작성된 것들이 아닌 나머지를 뜻한다.

잉? 그럼 라이브러리 같은거 import한거는 어디에 해당하나요? 🙄

@trivago/prettier-plugin-sort-imports 라이브러리는 외부 라이브러리를 가장 위에 두도록 기본 설정이 되어있다.

그러나 만약 해당 순서를 바꾸고 싶다면 아래처럼 '<THIRD_PARTY_MODULES>' 을 원하는 곳에 입력해주면 된다.

 

importOrderSeparation

해당 옵션은 각 범주마다 공백을 줄지 말지를 결정하는 옵션이다.
기본적으로 설정하지 않으면 false이다.

 

importOrderSortSpecifiers

설정한 범주 내에서 정렬을 할지 말지를 결정하는 옵션이다.
기본적으로 설정하지 않으면 false이다.