⬅️ 프로젝트 형식을 위한 prettier 설정

• 깃허브에 PR할 때, 코드 형식이 정돈되지 않는 문제 발생.
• 따라서, prettier로 포매팅 규칙 정리.

1. Dev 옵션으로 프리티어와 tailwindcss용 프리티어 플러그인 설치.

   npm install -D prettier prettier-plugin-tailwindcss
   

   

2. package.json 다음과 같이 수정

   "scripts": {
       "dev": "vite",
       "build": "tsc -b && vite build",
       "lint": "eslint .",
       "preview": "vite preview",
       "format": "prettier --write src/"
   }
   

   

3. .prettierrc 파일 루트에 추가하여 포맷 규칙 설정.

   {
     "semi": true,
     "singleQuote": true,
     "tabWidth": 2,
     "useTabs": false,
     "plugins": ["prettier-plugin-tailwindcss"]
   }
   

   • "semi": true
     • 모든 JS 구문 끝에 세미콜론(;)을 자동 추가
   • "singleQuote": true
     • 문자열을 감쌀 때 큰따옴표(") 대신 작은따옴표(')를 사용
   • "tabWidth": 2
     • 들여쓰기의 공백 너비 ⇒ 2칸
   • "useTabs": false
     • 탭대신에 스페이스로 들여쓰기
   • "plugins": ["prettier-plugin-tailwindcss"]
     • TailwindCSS 클래스의 정렬을 자동으로 맞춰줌.

4. .prettierignore 파일 루트에 추가하여 포맷 제외대상 설정.

   node_modules/
   public/
   

• 이와 같이 설정이 끝나면, 다음과 같이 앞으로 포맷하면 됨.

  npm run format