const TEST = '';
한 줄 추가하고 저장했더니 짜잔

모든 줄이 diff에 걸려버리는 불미스러운 사태 발생,,,
이렇게 되면 git commit 히스토리가 지저분해지는건 물론이고 무슨 코드를 수정했는지 찾을수조차 없어져버리는것...

Prettier를 사용하여 협업 시 불필요한 diff를 줄이고 커밋 기록을 깔끔하게 만들어보겠어요.
프로젝트마다, 협업자마자 서타일이 다르겠죵... 개성을 존중하면서 협업을 해 보아요.

Prettier 설정 우선순위

프로젝트의 루트 위치에 .prettierrc 파일을 만들고 옵션을 설정하면 기존 vscode에 적용된 setting.json보다 우선순위로 적용됩니다.

VS Code의 Prettier 확장(Prettier – Code Formatter)은 설정을 읽어들일 때 아래 순서대로 우선순위를 적용합니다.

1. Prettier 구성 파일 (.prettierrc, prettier.config.js 등)이 최우선 적용
2. .editorconfig 일부 설정만 적용
3. VS Code 설정 (settings.json)은 마지막 순위로 적용

프로젝트 내에 Prettier 구성 파일이 하나라도 존재하면, VS Code 설정에 정의된 Prettier 옵션은 모두 무시된다...!

고로 .prettierrc파일을 프로젝트별로 만들면 해당 프로젝트에서만 코드 스타일을 포맷팅 할 수 있다..!

.prettierrc 예시 및 옵션 설명

공식문서를 참고하여 자주 사용하는 옵션을 정리해보겠슴다

default 주석이 달려있는 부분은, 저 값이 디폴트값인 경우입니다.
누구는 디폴트값을 그대로 사용하고, 누구는 다른 세팅으로 사용하고 있을 수도 있으니... 포멧팅 통일이라는 목적성에 맞게 디폴트 설정값도 전부 명시해주었습니다.

설정이 실제로 어떻게 적용되는지 궁금하다면 Prettier Playground에서 직접 테스트해볼 수 있습니다.

{
  "printWidth": 100, // 한 줄의 길이
  "tabWidth": 2, (default)// 탭을 2스페이스로 적용
  "useTabs": true, // 탭 사용
  "semi": true, (default) // 세미콜론 사용
  "singleQuote": true, // 홑따옴표 사용
  "quoteProps": "as-needed", (default) // 쿼테이션 적용 방식
  "jsxSingleQuote": true, //jsx 파일에서 홑따옴표
  "trailingComma": "all", (default) // 여러줄로 나뉘었을 때 쉼표 사용
  "bracketSpacing": true, (default) // 중괄호 양 옆에 한 칸 공백 추가
  "objectWrap": "preserve", (default)// 여러줄로 남길지 여부 
  "bracketSameLine": false, (default)// html 속성 여러줄일 때 >를 한 줄 따로 분리할지 여부 
  "arrowParens": "always", (default)// 화살표 함수에 괄호 사용 
  "proseWrap": "preserve", (default)// 마크다운 텍스트가 printWidth를 넘을 때 줄바꿈 여부 
  "htmlWhitespaceSensitivity": "css", (default)// html 태그 공백 처리 여부
  "vueIndentScriptAndStyle": true, // vue파일에서 script와 style 내부 소스에 indent 추가
  "endOfLine": "lf", (default) // 줄바꿈을 모두 Unix 스타일 \n (Line Feed)로 통일
  "embeddedLanguageFormatting": "auto", (default) // 리터럴 템플릿 내 코드 자동 포멧 여부 
  "singleAttributePerLine": false, (default) // HTML, Vue, JSX 등에서 속성 하나당 한 줄로 강제
  "experimentalTernaries": false, (default) // 여러줄의 조건문 구분 
}

좀 헷갈리거나 생소한것들만 따로 정리해보겠습니다.

printWidth

공식문서에서는 가독성을 위해 80자를 초과하지 않기를 권장합니다. printWidth는 글자수를 정확하게 카운트하는 방식이 아니고 선호하는 줄 길이를 지정하는 옵션입니다.
그치만.... 저에게 80자는 너무 짧아서 100자를 선호합니다 ㅎㅎ

quoteProps

객체 속성의 따옴표 처리 방식입니다.
옵션: as-needed(기본값) consistent preserve

as-needed : quote로 감싸지 않아도 되는 문자로 된 것은, 모두 quote를 제거

// AS-IS
const obj = {
  'prettier-test-code': {},
  'bbb': {},
  ccc: {},
};

// TO-BE
const obj = {
  'prettier-test-code': {},
  bbb: {},
  ccc: {},
};

consistent: 객체 내 하나라도 따옴표가 필요한 속성이 있으면, 모든 속성에 따옴표를 통일

// AS-IS
const obj = {
  'prettier-test-code': {},
  bbb: {},
  ccc: {},
};

// TO-BE
const obj = {
  'prettier-test-code': {},
  'bbb': {},
  'ccc': {},
};

preserve: Object의 Syntax에만 맞다면 개발자가 입력한 대로 그대로 사용하게 된다. quote를 없애거나, 넣거나 하지 않는다. 아래처럼 quote를 꼭 써야 하는 경우에도 Syntax만 맞다면 그대로 변경이 없다.

// AS-IS
const obj = {
    'prettier-test-code': {},
    'bbb': {},
    ccc: {},
};

// TO-BE
const obj = {
    'prettier-test-code': {},
    'bbb': {},
    ccc: {},
};

objectWrap

객체 리터럴의 줄바꿈 방식을 설정합니다.
옵션: preserve (기본값) collapse

// preserve 
const test =
  plugins[
    {
      "a-a-a": {},
      bbb: {},
      ccc: {},
    }
  ];
  
// collapse
const test = plugins[{ "a-a-a": {}, bbb: {}, ccc: {} }];

bracketSameLine

HTML에서 속성이 여러줄일 때 > 를 마지막에 따로 뺄지 여부를 설정합니다
옵션: true false(기본값)

// true
<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}>
  Click Here
</button>

// false 
<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}
>
  Click Here
</button>

arrowParens

화살표 함수에 괄호 사용여부
옵션: always (기본값) avoid

"always": 항상 괄호 사용 ((x) => x)
"avoid": 파라미터가 하나면 괄호 생략 (x => x)

proseWrap

마크다운 텍스트가 printWidth를 초과할 때 줄바꿈 여부
옵션: always never preserve (기본값)

• always: 마크다운 텍스트가 printWidth를 넘으면 자동 줄바꿈
• never: 모든 문단을 한 줄로 유지 (soft wrap에 의존)
• preserve(기본): 원본 줄바꿈 유지

htmlWhitespaceSensitivity

HTML 태그 간 공백 처리
옵션: css (기본값) strict ignore

// AS-IS
<div><p> display:block 문자 앞, 뒤 공백  </p> <span> display:inline 문자 앞, 뒤 공백 </span> </div>

// css : css display 값에 따라 공백 처리
<div>
  <p>display:block 문자 앞, 뒤 공백</p> // block일 때는 공백 제거
  <span> display:inline 문자 앞, 뒤 공백 </span> // inline일 때는 공백 유지
</div>

// strict : 공백 모두 보존
<div><p> display:block 문자 앞, 뒤 공백 </p> <span> display:inline 문자 앞, 뒤 공백 </span> </div>

// ignore : 공백 모두 무시
<div>
  <p>display:block 문자 앞, 뒤 공백</p>
  <span>display:inline 문자 앞, 뒤 공백</span>
</div>

vueIndentScriptAndStyle

vue 파일에서 <script> <style> 내부에 indent를 삽입해서, <script> <style> 태그가 wapper처럼 보이는 옵션 (개인적으로 이거 false로 되어있으면 정말 굉장히 신경쓰임,,,, )
옵션: true false (기본값)

// AS-IS
<script setup>
const test='test';
</script>

<style>
body{
  color:red
}
</style>

// TO-BE (true)
<script setup>
  const test = 'test';
</script>

<style>
  body {
    color: red;
  }
</style>

embeddedLanguageFormatting

템플릿 리터럴 내 HTML·GraphQL 등 자동 포맷 여부
옵션: off auto (기본값)

// AS-IS
const tpl = html`<div><span>  Foo</span>  </div>`;

// TO-BE (auto)
const tpl = html`
  <div>
    <span>Foo</span>
  </div>
`;

experimentalTernaries

삼항연산자가 여러줄일 때 물음표(?) 위치 설정. true일 경우 조건 바로 아래 줄에 ?와 :이 각각 시작
옵션: true false(기본값)
true: ?와 :을 새 줄로 내림

false (기본값): 기존 줄과 같은 줄 유지

// true
condition
  ? resultA
  : resultB;

// false
condition ? resultA : resultB;

마무리

• .prettierrc는 반드시 프로젝트 루트에 위치시켜야 모든 작업자가 동일한 포맷으로 작업할 수 있습니다.
• .prettierrc는 Git으로 버전 관리되므로, CI/CD 환경에서도 동일한 포맷을 보장합니다.

.prettierrc는 단순한 설정 파일이 아니라, 협업과 코드 품질을 유지하는 핵심 도구입니다. 위 옵션들을 프로젝트에 맞게 설정해 두면, 누구든지 동일한 포맷으로 코드를 작성할 수 있어 코드 리뷰 효율과 생산성 모두를 높일 수 있습니다.