자주 쓰는 Prettier 설정

install

npm install -D prettier @trivago/prettier-plugin-sort-importsbash

.prettierrc 설정

react 프로젝트에서는 "^(next/(.*)$)|^(next$)" 생략

.prettierrc

{
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "importOrder": [
    "^(react/(.*)$)|^(react$)",
    "^(next/(.*)$)|^(next$)",
    "<THIRD_PARTY_MODULES>",
    "^@/(.*)$",
    "^[./]"
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true,
  "printWidth": 100,
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "endOfLine": "auto"
}json

with tailwind

npm install -D prettier-plugin-tailwindcssbash

.prettierrc

{
  "plugins": ["prettier-plugin-tailwindcss"] // 추가
}json

@trivago/prettier-plugin-sort-imports

import 구문을 자동으로 정렬해 주는 플러그인

importOrder: import 문의 정렬 순서를 지정
importOrderSeparation: true로 설정하면 import 그룹 사이에 빈 줄 추가
importOrderSortSpecifiers: import 구문 내부의 항목들을 알파벳순으로 정렬