Develop:

Prettier에 Trailing-Commas 설정하기

칠일오. 2023. 8. 8. 16:41

'ESLint 설정하기' 글에서 간략히 prettier code를 작성하였는데, 개발을 하다 보니 render를 해주는 파일에서 prettier를 실행하면 자꾸 콤마 에러가 발생하였다. (ESLint 잔소리)

 

Before

다행히 해당 문제는 아주 간단히 해결할 수 있었다.

그전에! Trailing-Commas란 무엇인지에 대해 짚고 넘어가보자.

 

Trailing-Commas

trailing comma는 마지막에 콤마를 붙이는 코딩 방식으로 만약 새로운 속성을 추가할 때, 마지막 줄에 trailing comma가 있으면 해당 줄을 수정 없이 그대로 사용할 수 있어 버전 관리 이력이 간단해지는 장점이 있다.

 

Solution 

해결 방법은 간단하다. 

{
  ...
  "trailingComma": "all",
  ...
}

.prettierrc 파일에 가서 trailingComma 부분을 "all"로 변경해 주면 된다! 그러면 모든 곳에 해당 규칙이 적용된다. (전체 코드가 궁금하다면 'ESLint 설정하기' 글에서 확인할 수 있습니다.)

 

After

prettier를 사용해도 이제는 콤마를 찍어주는 걸 확인할 수 있다:)

 

📜 출처