Prettier

{
  "tabWidth": 4,
  "useTabs": false,
  "singleQuote": false,
  "semi": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "printWidth": 120,
  "vueIndentScriptAndStyle": true,
  "endOfLine": "lf"
}

옵션	값	설명
tabWidth	4	들여쓰기 폭을 4칸으로 설정(보통 기본은 2칸).
useTabs	false	탭 대신 스페이스를 사용하여 들여쓰기.
singleQuote	false	문자열에 작은따옴표(') 대신 큰따옴표(")를 사용.
semi	true	구문 끝에 세미콜론을 붙임.
trailingComma	"none"	마지막 요소 뒤에 쉼표를 붙이지 않음(ESLint에서 경고가 날 수 있음).
bracketSpacing	true	객체 리터럴 중괄호 { foo: bar } 처럼 공백을 추가.
printWidth	120	한 줄에 최대 120자까지 작성(줄바꿈 기준).
vueIndentScriptAndStyle	true	.vue 파일의 <script>와 <style>태그 안에서도 들여쓰기를 적용.
endOfLine	"lf"	줄 끝 문자를 LF(Line Feed, \n)로 설정(Unix 스타일).

• 팀에서 윈도우/맥/리눅스를 함께 사용하는 경우 endOfLine: "lf"는 줄바꿈 혼란을 줄이기 위하여 설정.

적용 방법

1. Prettier 설치

npm install --save-dev prettier

2. .prettierrc 파일 생성
   위 예제 파일과 같이 생성

3. .prettierignore 파일
   Prettier 포맷팅에서 제외할 파일/폴더를 지정하려면 .prettierignore 파일을 추가.

node_modules
dist
build

4. 명령어 추가 (옵션)
   package.json 의 "script" 항목에 명령어를 추가.

"scripts": {
  "format": "prettier --write ."
}

npm run format

1. vscode

1. 코드 포맷팅 실행
   현재 디렉토리(프로젝트 전체)의 모든 포맷 가능한 파일을 설정에 맞게 자동 정리하고 싶은 경우.

npx prettier --write .

특정 파일만 하고 싶은 경우.

npx prettier --write src/components/Button.jsx

2. VS Code에서 자동 포맷 설정
   Prettier 확장 설치 (Prettier - Code formatter).
   VS Code 설정 (settings.json)에 아래 추가

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

2. Jet Brain

1. Prettier 설정 위치
   Languages & Frameworks → JavaScript → Prettier

2. Prettier Package
   프로젝트에 설치된 Prettier 경로를 지정.

./node_modules/.bin/prettier

IntelliJ가 자동으로 감지한 경로를 사용할 수 있음.

3. Configuration File
   .prettierrc 파일이 프로젝트 루트에 있으면 자동 인식한다. 따로 지정해줄 필요는 없다.

4. 저장 시 자동 포맷 적용
   Preferences → Tools → Actions on Save → Run Prettier

이 옵션을 켜두면 저장할 때마다 자동으로 Prettier가 실행됨.