Prettier란?
프리티어는 내가 원하는 코드 컨벤션을 자동으로 맞춰주는 코드 포맷터입니다.
Visual Studio Code에 전역으로 Prettier 설정하기
1. VScode extention에서 prettier 설치
VScode 화면 좌측 블럭 아이콘을 눌러 extensions 마켓에 prettier를 검색합니다. 다운로드 횟수가 제일 많은 prettier 클릭 후 우리가 설치하려는 프리티어 익스텐션이 맞는지 확인 후 install을 클릭해 설치를 해주세요.
2. VScode 포맷터 기본값 prettier로 설정해주기
설치가 완료되었으면 우리의 VSCode에 기본 포맷터를 프리티어로 설정해주어야 합니다. cmd+, 로 VS code 설정창 들어가 주세요.
아래 이미지처럼 설정화면 상단의 설정 검색에서 Editor: Default Formatter 검색 후 해당 설정에서 Prettier를 선택합니다.
3. 포맷터 맞춰주는 시점을 파일 저장되는 시점으로 변경하기
다음으로 설정 검색창에 Editor: Format on save mode을 검색해 찾은 후 Editor: Fomat On Save를 체크해줍니다. 해당 설정은 파일을 저장할 때 마다 프리티어가 자동으로 포맷팅을 하게하는 설정입니다. 만약 특정 프로젝트마다 다른 프리티어 설정을 따르고 싶다면
Prettier : require config 설정에 체크를 해주세요.
4. 내 코드컨벤션 VScode에 전역으로 설정하기
cmd + shift + p 를 클릭하여 settings.json을 검색 후 Preferences : Open User Settings (JSON)을 선택합니다.
prettier 설정을 아래 json 형태로 수정할 수 있습니다.
아래는 해당 설정들을 설명하는 주석을 추가하였습니다. 본인이 추구하는 코드 컨벤션에 맞추어 설정을 변경할 수 있습니다.
{
// 한 줄의 최대 문자 수를 설정 (120자까지 허용, 초과 시 줄바꿈)
"prettier.printWidth": 120,
// 기본 포매터로 Prettier를 지정 (esbenp.prettier-vscode 확장 사용)
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 파일 저장 시 자동으로 코드 포매팅 실행
"editor.formatOnSave": true,
// 프로젝트별 Prettier 설정 파일이 있어야만 포매팅 실행 (전역 설정 무시)
"prettier.requireConfig": true,
// 객체나 배열의 마지막 항목 뒤에 쉼표 추가하지 않음
"prettier.trailingComma": "none",
// 들여쓰기를 공백 대신 탭으로 설정
"prettier.useTabs": true
}prettier 온라인에서 빠른 설정하기
위의 링크에 들어가면 prettier 공식 사이트에서 제공하는 포맷터 생성기로 json 설정 파일을 쉽게 생성할 수 있습니다. 원하는 설정을 한 후에 좌측 하단의 Copy config JSON을 클릭하면 json 값이 복사되어 바로 settings.json에 붙여넣으면 간편하게 설정값을 변경할 수 있습니다.
프로젝트시 꼭 지켜야하는 코드컨벤션
서로의 IDE에 코드 포맷터가 설정되어 있지 않다면, 다른 사람의 파일을 약간만 수정하더라도 코드 포맷이 바뀌는 일은 일어나지 않을 것입니다. 그러나 각자의 IDE에 Prettier와 같은 코드 포맷터 설정이 서로 다르다면, 예기치 않게 코드 전체에 세미콜론이 추가되거나 작은따옴표가 큰따옴표로 바뀌는 등의 변화가 발생할 수 있습니다. 이러한 변화로 인해 발생하는 예상치 못한 충돌을 해결하려면 많은 시간과 노력이 필요하고, 이는 생각보다 번거롭고 비효율적입니다.
따라서 Prettier를 적절하게 팀 프로젝트에 녹여 사용하는 것이 매우 중요합니다. Prettier는 우리가 작성한 코드의 가독성을 높이는 데 도움을 줄 뿐 아니라, ESLint와 함께 사용했을 때 팀 전체가 동일한 컨벤션을 지킬 수 있도록 도와주는 강력한 도구가 됩니다.
이번 포스팅에서는 Prettier에 대한 내용만 다루었지만, ESLint와 Prettier를 함께 설정하여 사용한다면 더 나아가 팀의 코드 컨벤션 문화를 형성하는 데 중요한 역할을 할 수 있습니다. 이를 통해 효율적이고 일관성 있는 코드 작성 환경을 구축할 수 있을 것입니다.