Prettier (한국어)

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


Installation (Prettier Command Line Tool)

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

Installation

npm install prettier --save-dev

Installation (VSCode Extension)

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

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

Prettier VSCode

Usage

일관되지 않고 가독성이 떨어지는 코드를 Prettier를 사용하여 코드를 보다 일관된 형식으로 변환할 수 있습니다.

  • Name
    singleQuote: true
    Type
    사용법
    Description

    이 옵션은 코드 내에서 문자열을 작은따옴표(')로 감싸도록 하는 설정입니다. 예시에서 true로 설정되어 있으므로, 문자열은 모두 작은따옴표로 감싸지게 됩니다.

  • Name
    tabWidth: 2
    Type
    사용법
    Description

    이 옵션은 들여쓰기에 사용되는 공백의 개수를 나타냅니다. 2로 설정되어 있으므로, 2개의 공백이 하나의 들여쓰기로 적용됩니다.

  • Name
    semi: true
    Type
    사용법
    Description

    이 옵션은 문장 끝에 세미콜론(;)을 사용하도록 하는 설정입니다. true로 설정되어 있으므로, 문장의 끝에 세미콜론을 붙입니다.

  • Name
    arrowParens: 'avoid'
    Type
    사용법
    Description

    이 옵션은 화살표 함수의 매개변수가 하나일 때 괄호를 생략할지 여부를 결정하는 설정입니다. 'avoid'로 설정되어 있으므로, 하나의 인자가 있는 화살표 함수에서는 괄호를 생략합니다.

  • Name
    printWidth: 80
    Type
    사용법
    Description

    이 옵션은 한 줄의 최대 길이를 설정합니다. 예시에서는 80으로 설정되어 있으므로, 한 줄이 80자를 넘어가면 줄 바꿈을 하게 됩니다.

  • Name
    bracketSpacing: true
    Type
    사용법
    Description

    이 옵션은 객체 리터럴에서 중괄호() 사이의 공백 사용 여부를 설정합니다. true로 설정되어 있으므로, 객체 리터럴의 중괄호 사이에 공백을 사용합니다.

팀 프로젝트라면 당연히 팀 프로젝트 prettier에 따라야하고, 개인 프로젝트 진행 시 설정해놓고 코드를 작성한다면 가독성 좋은 코드를 작성할 수 있습니다.

prettier.config.js

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

장점

설명

  • Name
    일관성 유지
    Type
    장점
    Description

    Prettier는 코드를 일관된 형태로 포맷팅하므로 개발자들 간의 코드 스타일 충돌을 줄이고, 프로젝트 전체의 일관성을 유지할 수 있습니다.

  • Name
    시간 절약
    Type
    장점
    Description

    코드 스타일을 일일이 수동으로 맞추는 시간을 절약할 수 있습니다. 코드 작성 시간이 줄어들어 생산성이 향상됩니다.

  • Name
    팀 협업 강화
    Type
    장점
    Description

    팀 내에서 Prettier를 통일하여 사용하면 개발자 간의 코드 리뷰 시간을 줄이고 의사소통을 원활하게 할 수 있습니다.

prettier Logo

단점

설명

  • Name
    개인 취향 반영 불가
    Type
    단점
    Description

    Prettier는 코드를 고정된 스타일로 포맷팅하므로, 개인의 선호하는 스타일을 반영하기 어렵습니다.

  • Name
    코드 변경 히스토리 관리 어려움
    Type
    단점
    Description

    Prettier를 도입하면 코드 변경이 일어날 때마다 커밋 히스토리가 복잡해질 수 있습니다.

prettier Logo2

Prettier와 ESLint 동시 사용 이유

설명

  • Name
    각자의 강점과 목적
    Type
    Description

    Prettier와 ESLint는 각자의 강점과 목적이 있습니다. Prettier는 코드의 일관된 스타일을 유지하면서 가독성을 높이는 데에 뛰어나지만, ESLint는 코드의 품질 검사와 정적 분석을 통해 버그나 문제를 사전에 예방하는 데에 특화되어 있습니다.

    따라서 Prettier와 ESLint를 함께 사용하는 경우, Prettier로 코드 스타일을 맞추고, ESLint로 코드 품질을 체크하며 잠재적인 문제를 발견하고 해결할 수 있습니다.

prettier eslint