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

Table of Contents

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

import 순서 일관성 유지하기

@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/(.*)$",
    "",
    "^[./]"
  ]
}

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 ."
  }

@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
}

감사합니다.