Prettier를 활용한 코드 포맷팅

개발자들은 코드를 작성하면서 가독성을 높이고 일관성을 유지하는 것이 중요합니다. 이를 위해 코드 스타일을 일정하게 유지하는 것은 깨끗하고 협업에 용이한 코드 작성을 도와줍니다. 하지만 코드 스타일은 주관적이며 공동 작업 시 충돌을 유발할 수 있습니다. 이런 문제를 해결하기 위해 Prettier라는 도구가 있습니다.

 

설치(npm)

이 명령은 프로젝트의 개발 의존성으로 Prettier를 설치합니다. 개발 의존성으로 설치하면 프로젝트 내에서 Prettier를 사용할 수 있습니다. 이렇게 설치한 Prettier를 사용하려면 터미널에서 명령어를 실행하여 파일을 자동으로 포맷팅하거나, 프로젝트의 빌드 스크립트에 통합하여 파일을 포맷팅할 수 있습니다.

npm install prettier --save-dev

 

설치(VSCode Extension)

이 확장 프로그램은 Visual Studio Code에서 작동하도록 설계된 Prettier와 연동됩니다. 이 확장 프로그램을 설치하면 코드 에디터에서 Prettier를 사용하여 파일을 자동으로 포맷팅할 수 있습니다. 코드를 작성하는 동안 확장 프로그램은 지원되는 파일 유형에 대해 자동으로 포맷팅 기능을 제공합니다. 사용자가 저장할 때마다 자동으로 코드를 정리해줄 수도 있습니다.

이 확장 프로그램을 설치하려면 VSCode의 확장 프로그램 탭에서 "Prettier - Code formatter"를 검색하고 설치하면 됩니다.

사용법

Prettier는 코드 포맷터로서, 일관되지 않고 가독성이 떨어지는 코드를 일관된 형식으로 자동 변환해주어 코드의 가독성을 향상시킵니다. Prettier를 사용하여 설정할 수 있는 주요 옵션은 다음과 같습니다:

1. singleQuote: true: 문자열을 작은따옴표(')로 감싸도록 설정합니다. 이 옵션으로 모든 문자열이 작은따옴표로 통일되어 표시됩니다.

2. tabWidth: 2: 들여쓰기 시 사용되는 공백의 개수를 2개로 설정합니다. 이는 코드의 들여쓰기를 2개의 공백으로 일관되게 유지합니다.

3. semi: true: 문장의 끝에 세미콜론을 붙이도록 설정합니다. 이로써 모든 문장이 세미콜론으로 종결되어 일관성을 유지합니다.

4. arrowParens: 'avoid': 화살표 함수의 매개변수가 하나일 때 괄호를 생략하도록 설정합니다. 이는 코드를 더 간결하게 만들어 줍니다.

5. printWidth: 80: 한 줄의 최대 길이를 80자로 설정합니다. 80자를 넘어가는 코드는 자동으로 줄 바꿈되어 가독성을 높여줍니다.

6. bracketSpacing: true: 객체 리터럴의 중괄호 사이에 공백을 사용하도록 설정합니다. 이는 객체 리터럴을 더 읽기 쉽게 만들어 줍니다.

이러한 Prettier의 설정 옵션을 통해, 팀 프로젝트는 물론 개인 프로젝트에서도 일관된 코드 스타일을 유지할 수 있습니다. 팀 프로젝트의 경우, 모든 팀원이 동일한 Prettier 설정을 공유하여 사용함으로써 코드 스타일의 일관성을 보장할 수 있습니다. 개인 프로젝트에서도 이 설정을 적용하고 코드를 작성하면, 가독성이 높은 코드를 유지할 수 있으며, 이는 유지보수와 협업 시 많은 이점을 제공합니다.

 

module.exports = {
    singleQuote: true,
    trailingComma: 'es5',
    tabWidth: 2,
    semi: true,
    arrowParens: 'avoid',   // 화살표 함수의 괄호 스타일 ('avoid': 하나의 인자에는 괄호를 생략)
    printWidth: 80,         // 한 줄의 최대 길이
    bracketSpacing: true,   // 객체 리터럴에서 중괄호 사이의 공간 사용
};

 

장점

Prettier는 개발 과정에서 다양한 이점을 제공하는 코드 포맷터입니다. 그 주요 장점은 다음과 같습니다:

1. 일관성 유지: Prettier는 코드를 자동으로 일관된 형태로 포맷팅합니다. 이는 개발자 간의 코드 스타일 충돌을 줄이고, 프로젝트 전체에서 코드의 일관성을 유지하는 데 도움이 됩니다. 코드의 일관성은 코드의 가독성을 높이고, 유지보수를 용이하게 만듭니다.

2. 시간 절약: 개발자가 코드 스타일을 일일이 수동으로 조정하는 데 소요되는 시간을 절약할 수 있습니다. Prettier를 사용하면, 코드를 작성하는 과정에서 자동으로 포맷팅이 적용되므로, 개발자는 복잡한 코드 스타일 가이드를 따르기 위해 추가적인 시간을 소비할 필요가 없습니다. 이는 전반적인 개발 생산성을 향상시킵니다.

3. 팀 협업 강화: 팀 내에서 Prettier 설정을 공유하고 통일하여 사용하면, 코드 리뷰 과정에서 발생할 수 있는 스타일 관련 이슈를 최소화할 수 있습니다. 이는 개발자 간의 의사소통을 원활하게 하고, 코드 리뷰 시간을 줄이며, 팀의 협업 효율성을 증가시킵니다.

이처럼 Prettier는 개발자와 팀에게 코드의 일관성을 유지하고, 생산성을 높이며, 협업을 강화하는 중요한 도구입니다. Prettier의 도입은 단순히 코드 포맷팅을 넘어서 프로젝트 관리와 팀 워크를 개선하는 방법으로 평가될 수 있습니다.