[VS Code] 통일된 코드를 위한 , Prettier

팀 프로젝트를 하다 보면 100명의 사람과 일하면 100명의 코딩 스타일이 모두 다른 것을 알 수 있다. 그러다보니 생기는 문제가 남의 코드를 읽기도 힘들어지지만 , 남이 내 코드를 읽기도 힘들어져서 협업의 효율이 떨어지게 된다. 그런 문제점을 해결해주는 VS Code Formatter, Prettier에 대해 적어보고자 한다.

 

100명의 스타일이 모두 다르다면 , 그것을 하나로 통일해주는 도구가 코드 포맷터이고 , 그 중 가장 인기있는 도구가 Prettier이다. 내가 어떤 방식으로 코딩하든 , 다른 사람이 어떻게 코딩하든 정해진 방식대로 변경해주는 것이다. 그렇게 되면 내가 읽을 때 , 남이 읽을 때 모두 통일된 환경으로 읽고 쓸수 있어서 협업의 효율이 올라간다. 

 

설치

VS Code에서 Prettier를 검색한 모습

VS Code에서 확장 / 익스텐션 부분에서 Prettier를 검색하면 나온다. 현재 1800만명 이상이 다운받은 모습을 볼 수 있다. 

 

.prettierrc 파일

설치 후 .prettierrc를 만들어야 한다. 이 파일을 개발하고자 하는 프로젝트의 루트 폴더 안에 넣어주면 된다.

{
  "trailingComma": "all",	// 여러 줄 사용시 , 후행 콤마 사용 방식
  "printWidth": 80,		// 이 길이가 넘어가게 되면 줄바꿈
  "useTabs": false,		// 탭을 사용하는지 여부
  "tabWidth": 2,		// 탭 길이
  "singleQuote": true,		// 싱글 쿼테이션 사용 여부
  "bracketSpacing": true,	// 객체 리터럴에서 괄호에 공백을 넣을 것인지 여부
  "semi": true,			// 세미콜론 사용 여부
  "arrowParens": "always",	// 화살표 함수 괄호 사용 여부
  "endOfLine": "auto",		// EoF 방식 , OS별로 처리 방법이 다르다고 한다
  "jsxBracketSameLine": false,	// jsx에서 마지막 > 를 다음 줄로 바꿀지 여부
  "jsxSingleQuote": false	// jsx 싱글 쿼테이션 사용 여부
}

현재 본인이 사용하고 있는 prettier 방식이다. 사실 처음에는 불편한 부분도 있었다 . Tab을 4칸으로 쓰는 나에게 2칸을 사용하자니 너무 좁아보이기도 했고 , 글 너비가 짧다보니 줄 수가 늘어나는 문제도 있었다. 하지만 또 사용하다보니 탭이 짧아서 불필요하게 너비가 길어지지도 않았고 , 창을 두개 띄우고 비교하는 경우에 글이 짤리지도 않았다. 나 어쩌면 저 환경에 적응해 버렸을지도 .. ?

 

후기

점점 효율적인 개발을 하기 위한 방법들을 찾아내고 있어서 즐겁게 코딩할 수 있었다. 무엇보다 소통이 잘 되는 부분이 편했다. "몇번째 줄에 어디어디~ " 이런식으로 지점을 말할 때도 공통적으로 소통할 수 있었고 , 서로의 코드도 잘 읽히게 되었다. 효율적인 코딩을 위해 한 발자국 딛은거 같아서 뿌듯하다 :)