[원티드 프리온보딩] TIL - (2)

5월 4일

ESLint와 Prettier 설정

과제를 시작하기에 앞서, 팀원들과 ESLint와 Prettier 설정부터 하기로 했다. 많은 곳에서 참고되는 Airbnb 스타일 가이드와 팀원들 간의 소통을 통해 적절하게 ESLint를 수정하고 활용하였다. 이를 잘 활용만 하면 내가 머리를 복잡하게 쓰지 않아도 코드가 멋지게 짜여질 수 있는 마법을 볼 수 있는 것 같다.

Single quotes or double quotes

Single quotes를 사용할지, 혹은 double quotes를 사용할지에 대해 Airbnb 스타일 가이드부분을 참고하였다. JSX 어트리뷰트에는 double을, 그 외의 모든 JS 어트리뷰트에는 single을 사용하기로 하였다.
따라서, .prettierrc.yml 파일에 singleQuote: true를 추가해주었으며, 기존에 있던 jsxSingleQuote: true는 삭제하였다.

줄 바꿈 시 semicolon

줄 바꿈이 이루어질 때, 코드 맨 끝에 세미콜론이 붙는 것이 나을지 붙지 않는 것이 나을지에 대해 생각해보았다. 우선 팀원들 모두 세미콜론이 붙는 것이 코드가 더 잘 읽히고 줄 구분이 쉽다고 느꼈기에 붙이는 것으로 결론이 났는데, 과연 다른 스타일 가이드들이나 ESLint에서는 어떠한 근거를 제시하는지 확인해보고 싶었다. Airbnb 스타일 가이드에 따르면, 자바스크립트는 세미콜론이 없는 줄바꿈을 마주했을 때 Automatic Semicolon Insertion(ASI)를 통해 코드가 실행되기 전에 세미콜론을 자동으로 삽입해주는 작동을 한다고 한다. ASI 덕분에 세미콜론을 붙이지 않아도 자동적으로 세미콜론이 추가되고 코드의 줄바꿈을 구분하여 실행이 이루어질 수 있다고 해도 만약 자바스크립트가 줄 바꿈을 제대로 인식하지 못하고 잘못된 곳에 세미콜론을 붙여버리게 되면 오류가 발생하게 된다. 즉, 이러한 오류 자체를 미연에 방지하기 위해 세미콜론을 붙이는 것이 권장된다는 의미이다.
따라서, .prettierrc.yml 파일에 semi: false를 삭제하였으며, .eslintrc.json 파일의 "semi":["warn","never"] 부분을 "semi":["warn","always"]로 수정해주었다.