Prettier는 코드를 일관되게 포맷팅하기 위한 도구로, 여러 설정 옵션을 제공합니다.

이러한 옵션들은 .prettierrc, prettier.config.js, 또는 package.json의 prettier 필드를 통해 구성할 수 있습니다. 주요 Prettier 속성들에 대해 자세히 설명드리겠습니다.

printWidth

• 한 줄에 표시할 최대 문자 수를 지정합니다.
• 기본값은 80입니다.

useTabs

• 들여쓰기에 탭(true)을 사용할지, 공백(false)을 사용할지 지정합니다.
• 기본값은 false입니다.

semi

• 각 문장의 끝에 세미콜론을 추가할지 여부를 지정합니다.
• 기본값은 true입니다.

singleQuote

• 문자열에 단일 따옴표(true)를 사용할지, 더블 따옴표(false)를 사용할지 지정합니다.
• 기본값은 false입니다.

quoteProps

• 객체 속성의 따옴표 사용 방식을 지정합니다 ("as-needed", "consistent", "preserve" 중 하나).
• "as-needed"는 필요할 때만 따옴표를 사용합니다.
• "consistent"는 최소 하나의 속성에 따옴표가 필요한 경우 모든 속성에 따옴표를 사용합니다.
• "preserve"는 입력된 코드의 따옴표를 유지합니다.

jsxSingleQuote

• JSX에서 문자열에 단일 따옴표를 사용할지 지정합니다.
• 기본값은 false입니다.

trailingComma

• 다중 줄을 사용하는 배열, 객체 등에서 마지막 요소 뒤에 쉼표를 추가할지 여부를 지정합니다 ("none", "es5", "all" 중 하나).
• "none"은 쉼표를 추가하지 않습니다.
• "es5"는 ES5에서 유효한 곳에만 쉼표를 추가합니다.
• "all"은 가능한 모든 곳에 쉼표를 추가합니다.

bracketSpacing

• 객체 리터럴의 중괄호 사이에 공백을 추가할지 여부를 지정합니다.
• 기본값은 true입니다.

jsxBracketSameLine

• JSX에서 마지막 >를 다음 줄로 내릴지, 같은 줄에 둘지를 지정합니다.
• 기본값은 false입니다.

arrowParens

• 화살표 함수의 매개변수에 항상 괄호를 추가할지 여부를 지정합니다 ("avoid", "always" 중 하나).
• "avoid"는 필요한 경우에만 괄호를 사용합니다.
• "always"는 항상 괄호를 사용합니다.

---

.prettierrc 예시

{
  "singleQuote": true, // 작은따옴표(')를 문자열에 사용합니다.
  "semi": true, // 문장 끝에 세미콜론을 사용합니다.
  "useTabs": false, // 탭 대신 공백을 사용하여 들여쓰기를 합니다.
  "tabWidth": 2, // 탭 또는 스페이스 문자의 간격을 2로 설정합니다.
  "trailingComma": "all", // 객체 또는 배열의 마지막 요소 뒤에 항상 쉼표(,)를 사용합니다.
  "printWidth": 80, // 한 줄의 최대 길이를 80으로 설정합니다.
  "arrowParens": "always", // 화살표 함수의 매개변수가 하나일 때에도 괄호를 사용합니다.
  "orderedImports": true, // import 문을 알파벳 순서로 정렬합니다.
  "bracketSpacing": true, // 객체 리터럴의 중괄호({}) 사이에 공백을 추가합니다.
  "jsxBracketSameLine": false, // JSX 요소의 여는 괄호(<)를 다음 줄에 놓습니다.
  "plugins": ["prettier-plugin-tailwindcss"]
}