들어가며

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

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

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

주요 옵션

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

useTabs

<aside> <img src="/icons/search_gray.svg" alt="/icons/search_gray.svg" width="40px" /> 기존 코드 대부분이 스페이스 들여쓰기여서 useTabs: false로 사용 중

</aside>

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

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

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

semi

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

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

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

getValue(); // undefined