개발 초기에 깃허브에 머지하거나 풀을 땡겨오면서 바뀐것도 없어보이는데 자꾸 수정사항이 있는 것으로 나오거나, 충돌이 나는 경우를 한번 쯤 경험해 보았을 것이다. 우리가 중요하게 생각하지 않았던, '' 나 ""의 서로다름, 코드의 마지막에 ;을 찍는지 않찍는지, tab으로 들여쓰기를 하면 몇번의 띄어쓰기를 적용하는지가 사람마다 달라서 불필요한 커밋과 개발 코스트가 소모된다. 따라서 협업을 진행할 때에 코드의 띄어쓰기 하나라도 규칙을 가지고 작성해야한다.
이러한 불편한 점을 제거하기 위해 prettier라는 라이브러리를 사용하면 좀 더 개발 코스트를 줄일 수 있다.
prettier 라이브러리란?
prettier는 코드 포맷터 라이브러리 중 하나이다. 코드 포맷터는 코드 스타일을 자동으로 정리해주는 도구로, 개발자가 일관된 코드 스타일을 유지할 수 있도록 도와줄 수 있다. prettier는 주로 JavaScript, TypeScript, CSS, HTML 등의 코드를 다루며, VS Code, Atom, Sublime Text 등 다양한 에디터에서 사용할 수 있다.
필자는 VA code로 개발을 진행하는데 매번 라이브러리를 설치하지 않고, 확장프로그램에서 prettier를 설치하면 작성하는 모든 코드에 코드 포맷을 적용할 수 있다.
사용방법
사용방법은 의외로 간단하다. 필자처럼 VS Code에서 확장프로그램을 받아 확장설정에서 값을 변경하여 저장해주면 다음 코드들을 작성한 이후 파일을 저장하였을 때 알아서 코드 포맷을 맞춰준다.
일반적으로 확장프로그램이 아닌 라이브러리를 설치하였을 때는 npm을 통해서 설치하고,
프로젝트의 루트 디렉토리에 prettierrc.json파일을 작성해 준다.
{
"printWidth": 80,
"tabWidth": 2,
"singleQuote": true,
"semi": true,
"trailingComma": "all"
}위의 코드를 예시로 들면 한 줄은 최대 80자로 그 이상 넘어가면 줄바꿈을 해주고
tab은 띄어쓰기 2번의 양으로 고정하고, 따옴표"는 항상'홑따옴표를 사용하고, 매 코드가 끝나는 지점에
;세미콜론을 적어주고, 마지막 줄에 항상 ,쉼표를 추가해 줘야한다는 설정 예시이다.
더 자세한 설정을 알고싶다면 prettier 공식페이지 DOCS를 확인하자
명령어를 통해서 설정해 두었던 코드 포맷을 많은 파일에 한번에 적용할 수도 있다.
prettier --write
"**/*.js"
위의 명령어를 사용하여 특정 경로에 있는 모든 파일들을 한번에 코드 포멧을 적용할 수 있다.
prettier를 사용하여 일관된 코드 포맷을 유지하고, 개발 코스트를 줄여보자
