Prettier로 import 순서 일관성 유지하기

Prettier를 사용하면 코드를 보기 좋게 정리해주기도 하지만, 협업시 팀원 간 스타일을 통일하게 하여 사소한 충돌을 줄여서 협업의 효율성을 높임

import 순서 일관성 유지하기

  1. @ianvs/prettier-plugin-sort-imports
npm i -D prettier @ianvs/prettier-plugin-sort-imports

prettier config 파일 수정
.prettierrc

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "printWidth": 120,
  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
  "importOrder": [
    "^react$",
    "^react-dom$",
    "^react-router-dom$",
    "",
    "^react(.*)$",
    "",
    "<BUILTIN_MODULES>",
    "",
    "<THIRD_PARTY_MODULES>",
    "",
    "^@/store/(.*)$",
    "",
    "^@/api/(.*)$",
    "",
    "^@/hooks/(.*)$",
    "",
    "^@/utils/(.*)$",
    "^@/util/(.*)$",
    "",
    "^@/constants",
    "^@/constants/(.*)$",
    "",
    "^@/pages/(.*)$",
    "",
    "^@/services/(.*)$",
    "",
    "^@/components/(.*)$",
    "",
    "^@/assets/(.*)$",
    "",
    "^[./]"
  ]
}
  • “plugins”: [“@ianvs/prettier-plugin-sort-imports”] 이부분이 있어야 동작함

pacakge.json 파일 수정

  "scripts": {
    "dev": "vite --host 0.0.0.0",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "format": "prettier --write --cache ."
  }
  1. @trivago/prettier-plugin-sort-imports@2.0.0
npm i -D npm i @trivago/prettier-plugin-sort-imports@2.0.0

사용방법은 똑같은데 해당 모듈이 더 깔끔한 거 같다.

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "printWidth": 120,
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "importOrder": [
    "^react$",
    "^react-dom$",
    "^react-router-dom$",
    "^react(.*)$",
    "<BUILTIN_MODULES>",
    "<THIRD_PARTY_MODULES>",
    "^@/store/(.*)$",
    "^@/api/(.*)$",
    "^@/hooks/(.*)$",
    "^@/util(.*)$",
    "^@/utils/(.*)$",
    "^@/util/(.*)$",
    "^@/constants",
    "^@/constants/(.*)$",
    "^@/pages/(.*)$",
    "^@/services/(.*)$",
    "^@/components/(.*)$",
    "^@/assets/(.*)$",
    "^[./]"
  ],
  "importOrderSeparation": true, 
  "importOrderSortSpecifiers": true
}

One thought on “Prettier로 import 순서 일관성 유지하기

  1. Thank you for breaking this down so well, it helps me understand the situation better

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다