[DevTools] Prettier 주요 포맷팅 옵션과 추천 설정

들어가며

---

자바스크립트를 사용하는 개발은 코드 포맷팅 도구로 Prettier를 많이 사용한다. Prettier는 .prettierrc (혹은 .prettierrc.js) 구성 파일에 원하는 코드 스타일을 커스터마이징 할 수 있는데, 한국어로 구글링 하면 많이 나오는 국룰 커스텀(?)을 별생각 없이 사용하고 있었다.

// .prettierrc
{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

 

사용하는데 큰 문제는 없었지만 언제 한 번 선호하는 코드 스타일에 따라 설정을 손봐야겠다는 생각을 하던 참에 우연히 My Code Formatting Guidelines 라는 글을 발견했다. 이 가이드라인을 참고하여 주요 속성에 대해 더 자세히 알아보고 추천 설정도 적용해 보자.

 

 

주요 옵션

---

💡 모든 옵션의 추천값은 개인적인 선호가 반영됐다.

 

useTabs

코드를 들여쓰기 할 때 탭(tab) 문자를 사용할지, 스페이스(space)를 사용할지 결정하는 속성. 탭 문자를 사용하면 들여쓰기를 조금 더 의미적으로(Semantic) 표시할 수 있다. 스페이스는 다양한 목적으로 사용할 수 있지만, 탭은 주로 들여쓰기에만 사용하므로 코드 가독성이 높아질 수 있다. 또한 스크린 리더 같은 보조 기술을 사용해서 코드를 읽을 때 탭을 사용하면 들여쓰기를 더 쉽게 인식할 수 있다.

// 스페이스는 · 탭은 → 기호로 표기

// useTabs: false
function example() {
··if (true) {
····console.log("Hello, world!");
··}
}

// useTabs: true
function example() {
→if (true) {
→→console.log("Hello, world!");
→}
}

 

• 기본값: false (스페이스로 들여 쓰기)
• 추천값: true (탭 문자로 들여 쓰기) — 프로젝트 상황에 따라 변경

 

semi

표현식 끝에 세미콜론을 자동으로 추가할지 여부를 결정하는 속성. 자바스크립트는 세미콜론 자동 삽입 기능(ASI)이 있어서 세미콜론을 생략해도 코드는 작동하지만, 특정 상황에서 예상치 못한 에러가 발생할 수 있기 때문에 명시적으로 세미콜론을 추가하는 것이 좋다. 

 

아래 코드에선 return 키워드 뒤에 세미콜론이 자동 삽입돼서 아무것도 반환하지 않는 문제가 발생한다.

function getValue() {
  return
  { value: 1 };
}

getValue(); // undefined

 

• 기본값: true (표현식 끝에 세미콜론 추가)
• 추천값: true

 

singleQuote

문자열을 표시할 때 큰따옴표(") 대신 작음따옴표(')를 사용할지 여부를 결정하는 속성. 작은따옴표를 사용하면 HTML 속성과 구분하기 쉬워지는 장점이 있다.

// singleQuote: true
const greeting = 'Hello, world!';

// singleQuote: false
const greeting = "Hello, world!";

 

• 기본값: false (큰따옴표 사용)
• 추천값: true (작은따옴표 사용)

 

jsxSingleQuote

JSX에서 속성을 표시할 때 큰따옴표(") 대신 작은따옴표(')를 사용할지 여부를 결정하는 속성. JSX는 HTML과 유사한 문법을 사용하므로, 속성 값은 큰따옴표로 감싸는 게 일반적이다.

// jsxSingleQuote: true
<div className='container'>Hello, world!</div>;

// jsxSingleQuote: false
<div className="container">Hello, world!</div>;

 

• 기본값: false (큰따옴표 사용)
• 추천값: false

 

quoteProps

객체 리터럴의 속성 이름을 따옴표로 감쌀지 여부를 결정하는 속성. 객체 속성 이름에 하이픈(-) 등이 들어가면 따옴표로 감싸야하는데 이때 일관성을 위해 모든 속성에 따옴표를 사용하는 게 좋다.

// quoteProps: "as-needed"
const user = {
  name: 'John',
  age: 30,
  'email-address': 'john.doe@gmail.com',
};

// quoteProps: "consistent"
// email-address 속성에 따옴표가 필요하므로 전체 속성에 따옴표 사용
const user = {
  'name': 'John',
  'age': 30,
  'email-address': 'john.doe@gmail.com',
};

 

• 기본값: as-needed (필요한 속성에만 따옴표 사용)
• 추천값: consistent (1개 이상의 속성에 따옴표가 필요하면 모든 속성에 따옴표 사용)

 

trailingComma

여러 줄로 이루어진 배열, 객체 리터럴, 함수 호출 파라미터 등의 마지막 요소 뒤에 쉼표 추가 여부를 결정하는 속성. 마지막 요소 뒤에 쉼표를 추가하면 새로운 요소를 추가하거나 순서를 변경할 때 더 편리해지는 장점이 있다.

// trailingComma: "none"
const user = {
  name: 'John',
  age: 30 // 후행 콤마 없음
};

// trailingComma: "all"
const user = {
  name: 'John',
  age: 30, // 후행 콤마 있음
};

 

• 기본값: "all" (가능한 모든 곳에 후행 쉼표 추가)
• 추천값: "all"

 

bracketSpacing

객체 리터럴의 양쪽 중괄호 안쪽에 공백 추가 여부를 결정하는 속성. 공백을 추가하면 코드가 더 읽기 쉬워진다.

// bracketSpacing: false
const user = {name: 'John', age: 30};

// bracketSpacing: true
const user = { name: 'John', age: 30 };

 

• 기본값: true (객체 중괄호 안쪽에 공백 추가)
• 추천값: true

 

arrowParens

화살표 함수의 파라미터를 괄호로 감쌀지 여부를 결정하는 속성. 화살표 함수는 파라미터가 1개일 땐 괄호를 생략할 수 있지만, 괄호를 항상 표시하도록 설정해서 일관성을 유지할 수 있다. 원래 1개였던 함수 파라미터를 2개 이상으로 수정할 때 일일이 괄호를 추가할 필요가 없는 장점도 있다.

// arrowParens: "avoid"
const getUser = name => `User: ${name}`;

// arrowParens: "always"
const getUser = (name) => `User: ${name}`;

 

• 기본값: "always" (화살표 함수 파라미터에 항상 괄호 사용)
• 추천값: "always"

 

proseWrap

마크다운 파일에서 긴 줄을 자동으로 줄 바꿈 할지 여부를 결정하는 속성. 마크다운 텍스트는 일반적인 코드와는 다르게 각 블록을 한 줄로 묶어서 처리하는 게 좋다. 이렇게 하면 문서 편집자가 텍스트를 표시하는 방식을 쉽게 정의할 수 있다.

 

• 기본값: "preserve" (기존 줄 바꿈 유지)
• 추천값: "preserve"

 

htmlWhitespaceSensitivity

HTML 파일에서 공백 문자를 어떻게 처리할지 결정하는 속성. "css" 로 설정하면 HTML 요소의 display 속성에 따라 공백을 처리한다. inline, inline-block 요소는 공백을 유지하고, block 요소는 공백을 제거한다. "css" 로 설정하면 CSS가 HTML의 시각적 레이아웃을 정의하는 방식을 반영하기 때문에 일관성을 유지할 수 있는 장점이 있다.

<!-- htmlWhitespaceSensitivity: 'css' -->
<div>
  <span>텍스트</span> <span>텍스트</span>
</div>

<!-- htmlWhitespaceSensitivity: 'strict' (모든 공백 유지) -->
<div>
  <span>텍스트</span> <span>텍스트</span>
</div>

<!-- htmlWhitespaceSensitivity: 'ignore' (모든 공백 제거) -->
<div>
  <span>텍스트</span><span>텍스트</span>
</div>

 

• 기본값: "css" (display 속성에 따라 공백 처리)
• 추천값: "css"

 

endOfLine

파일의 줄 끝 문자를 결정하는 속성. 운영체제마다 줄 끝을 처리하는 방식이 다르기 때문에 이를 통일할 필요가 있다. macOS, Linux 같은 Unix 계열 시스템에선 LF(Line Feed, \n)를 사용하고, Windows에선 CRLF(Carriage Return and Line Feed, \r\n)를 사용한다. Windows에선 LF와 CRLF를 모두 지원하는 반면, Unix 계열은 LF만 인식할 수 있기 때문에 호환성을 위해 LF를 기본으로 사용하는 게 좋다.

 

• 기본값: "lf" (줄 끝 문자를 Line Feed로 사용)
• 추천값: "lf"

 

embeddedLanguageFormatting

HTML, Markdown 등에 포함된 코드 블록의 포맷팅 여부를 결정하는 속성. "auto"로 설정하면 HTML <script> 태그 안에 있는 자바스크립트 코드나, Markdown 파일 내 코드 블록 등의 내용을 자동으로 감지하고 포맷팅 한다.

 

• 기본값: "auto" (임베드된 코드 블록을 자동으로 감지하고 포맷팅)
• 추천값: "auto"

 

singleAttributePerLine

HTML, JSX, Vue 태그에서 각 속성을 개별 줄에 배치할지 여부를 결정하는 속성. 요소 속성을 한 줄에 배치하면 구조 파악이 쉬워지고, 공간을 더 효율적으로 사용할 수 있다.

// singleAttributePerLine: false
<Button color="blue" size="large" onClick={handleClick} />

// singleAttributePerLine: true
<Button
  color="blue"
  size="large"
  onClick={handleClick}
/>

 

• 기본값: false (가능하면 한 줄에 여러 속성 배치)
• 추천값: false

 

 

최종 설정

---

// .prettierrc.js

module.exports = {
  // 들여쓰기 너비 2칸
  tabWidth: 2,
  // 들여쓰기에 탭 문자 사용
  useTabs: true,
  // 코드 마지막에 세미콜론 추가
  semi: true,
  // 문자열에 작은따옴표(') 사용
  singleQuote: true,
  // JSX 속성값에 큰따옴표("") 사용
  jsxSingleQuote: false,
  // 객체 속성에 따옴표가 필요한 속성이 하나라도 있으면, 모든 속성에 따옴표 사용
  quoteProps: 'consistent',
  // 여러 줄로 이루어진 객체, 배열, 함수 호출 파라미터 등의 마지막 요소 뒤에 항상 쉼표 추가
  trailingComma: 'all',
  // 객체 양쪽 중괄호 안쪽에 항상 공백 추가
  bracketSpacing: true,
  // 화살표 함수 파라미터에 항상 괄호 사용
  arrowParens: 'always',
  // 마크다운 파일에서 기존 작성된 대로 줄바꿈 유지
  proseWrap: 'preserve',
  // HTML 파일에서 CSS display 속성에 따라 공백 처리
  htmlWhitespaceSensitivity: 'css',
  // 파일의 줄 끝을 Unix 스타일 줄바꿈(\n, line feed)으로 설정
  endOfLine: 'lf',
  // HTML, Markdown 등에 포함된 코드 블록 자동 포맷팅
  embeddedLanguageFormatting: 'auto',
  // HTML, JSX, Vue 태그에서 가능한 경우 한 줄에 여러 속성 배치
  singleAttributePerLine: false,
};

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요