Prettier 설정하기

2024.06.14 7차 스터디

오늘의 스터디 주제는? Prettier 설정하기!

수준별 수업 중에 Prettier 파일을 프로젝트 안에 만들어 놓으면 협업시에 동일한 기준으로 코드를 작성할 수 있어서 만들어 보는 것을 추천해주셔서 방법에 대해 작성하고자 한다!

1. Prettier란?

프리티어(Prettier)는 코드 포매터(Code Formatter)로서, 주어진 코드를 일관된 스타일로 자동으로 정리해주는 도구입니다. 코드 포매터는 작성한 코드를 일관된 형식으로 자동으로 정렬하고 들여쓰기를 맞추는 역할을 합니다. 이를 통해 코드의 가독성을 향상시키고, 협업 시 개발자들 사이의 코드 스타일을 일치시킬 수 있습니다.

1-1. Prettier의 특징

• 자동 형식 맞춤
  프리티어는 코드를 자동으로 정리해주어, 개발자가 수동으로 들여쓰기나 공백을 조정할 필요가 없습니다.

• 다양한 언어 지원
  JavaScript, TypeScript, CSS, HTML, JSON 등 다양한 프로그래밍 언어와 파일 형식을 지원합니다.

• 구성 가능성
  프리티어는 다양한 설정 옵션을 제공하여 개발자가 코드 스타일을 자신의 기호에 맞게 조정할 수 있습니다. 예를 들어 들여쓰기 너비, 따옴표 스타일, 세미콜론 사용 등을 설정할 수 있습니다.

• 프로젝트에 통합 가능
  프리티어는 대부분의 개발 환경에서 사용할 수 있으며, 진행 중인 소프트웨어 프로젝트에 쉽게 통합하여 사용할 수 있는 능력을 의미합니다.
  즉, 프로젝트에 프리티어를 적용하고, 코드를 정리하거나 포맷팅할 때 프리티어가 원활하게 작동하고 유용하게 사용될 수 있는 상태를 말합니다.

1-2. Prettier의 적용 예시

아래 예시들로 프리티어가 다양한 프로그래밍 언어와 파일 형식에서 어떻게 코드를 정리하고 포맷팅하는지를 알 수 있습니다. 프리티어는 각 언어의 특정 스타일 가이드에 맞게 코드를 자동으로 정리하여 개발자가 일관된 코드 스타일을 유지할 수 있도록 도와줍니다.

• CSS 코드의 예시

// 사용 전
body{background-color:  #f0f0f0;color: #333;}

// 사용 후
body {
  background-color: #f0f0f0;
  color: #333;
}

• JavaScript 코드의 예시

// 사용 전
function add(a, b) {return a+b;}
console.log(add(1,2));

// 사용 후
function add(a, b) {
  return a + b;
}
console.log(add(1, 2));

• JavaScript + JSX 코드의 예시

// 사용 전
import React from 'react';

function Rendering({ isLoggedIn }) {
if (isLoggedIn) {
return <p>Welcome back!</p>;
} else {
return <p>Please log in.</p>;
}
}

export default \Rendering;

// 사용 후
import React from 'react';

function Rendering({ isLoggedIn }) {
  if (isLoggedIn) {
    return <p>Welcome back!</p>;
  } else {
    return <p>Please log in.</p>;
  }
}

export default Rendering;

2. Prettier 적용 방법

2-1. VS Code의 Extension

• 설치하기
  Prettier를 설정하는 첫 번째 방법은 VS Code의 기능중 하나인 Extension에서 Prettier 확장 프로그램을 설치하는 것 입니다.
  
  VS Code를 실행한 뒤 맨 왼쪽에 보이는 메뉴에서 제일 아래 메뉴가 Extension입니다. 눌러보면 Extension 검색창, 내가 설치한 확장 프로그램과 추천 확장 프로그램을 볼 수 있습니다.
  검색창에 Prettier를 검색하고 제일 맨 위에 보이는 Prettier - Code formatter를 설치합니다.
  

• 설정하기
  맥의 경우 Command + , / 윈도우의 경우 Ctrl + , 를 동시에 눌러 VS Code 설정창을 띄웁니다.
  화면에 윗부분에 있는 검색창에 Editor: Default Formatter를 입력한 후 None을 Prettier - Code formatter로 바꾸어 줍니다.
  이는 기본적인 Formatter로 Prettier를 사용하는 설정입니다.
  다음으로 다시 검색창에 Editor: Format on Save를 입력한 후 빈 박스를 클릭하여 체크합니다.
  이는 파일을 저장할 때마다 자동으로 Prettier를 사용하는 설정입니다.
  마지막으로 Prettier를 검색하여 나오는 설정들을 자신의 취향에 따라 설정합니다.
  

만약 모든 프로젝트에 동일한 Prettier 설정을 할 것이라면 위 방법을 따라 설정하면 됩니다. 하지만 프로젝트에 각각 다른 설정이 필요하거나 협업을 진행하게 된다면 Prettier 설정을 다르게하거나 통일할 필요가 있습니다.

이를 해결하기 위해 .prettierrc라는 설정 파일을 프로젝트 내에 생성하여 해당 파일에 원하는 포맷팅 형식을 저장합니다.

2-2. .prettierrc 파일

• 설치하기
  Prettier를 설정하는 두 번째 방법은 prettier를 설치하여 .prettierrc 파일을 생성하는 것 입니다.
  
  prettier는 개발 의존성으로 설치하기 때문에 --save-dev로 설치합니다. 현재 프로젝트 내에서 터미널을 열어 아래 명령어를 입력하여 설치합니다.
  
  npm install --save-dev prettier

  왜 개발 의존성으로 설치하나요?
  개발 도구를 분리하고, 애플리케이션의 크기를 줄이고, 의존성 관리를 명확하게 하기 위해서 입니다.
  Prettier는 애플리케이션의 실제 동작에는 영향을 미치지 않기 때문에 오로지 개발 도구로서 분리하여 애플리케이션의 크기를 줄일 수 있습니다. 또한 --save-dev 플래그를 사용하면 package.json 파일의 devDependencies에 프리티어가 추가되어 개발 환경에서만 사용된다는 것을 명확히 알 수 있습니다.

• 파일 생성하기
  가장 상위 폴더에 .prettierrc 파일을 생성합니다. 그리고 원하는 Prettier 옵션의 코드를 { }안에 키와 값의 형태로 작성합니다. 작성시에는 CSS파일에서 작성하는 것 처럼 자동완성이 지원됩니다.
  여기서 주의할 점이 하나 있는데 CSS 작성 시에 적용의 우선 순위가 있듯이 Prettier 적용 시에도 우선 순위가 있습니다. 바로 VS Code 세팅에서 설정한 값보다 .prettierrc 파일의 적용이 우선적으로 적용됩니다. 따라서 보통 협업시에는 .prettierrc 파일을 생성하게 됩니다.

• 파일 작성 예시
  { } 안에 필요한 속성과 해당 값을 작성합니다. 일부 옵션을 예시를 통해 알아봅시다.
  현재 입력한 옵션은 탭키를 입력하였을 때의 들여쓰기 간격을 2칸으로 설정하고, 코드의 끝부분에 세미콜론(;)을 항상 붙이는 옵션을 true로 설정한 것 입니다.

2-3. .prettierignore 파일

• 파일 생성하기
  파일명을 보니 떠오르는 파일이 있나요? 바로 .gitignore 파일입니다. 이름처럼 .prettierignore 파일도 .gitignore와 같은 역할을 합니다. .prettierignore 파일에는 Prettier의 설정을 적용하지 않을 파일명을 작성합니다.
  

  예를 들어, node_modules/ 디렉터리의 경우, 외부 라이브러리의 소스 코드가 위치하고 있기 때문에 포맷팅을 할 필요가 없습니다. 또한 package-lock.json 파일도 npm으로 패키지를 설치할 때 자동으로 업데이트는 되는 파일이므로 굳이 포맷팅을 할 이유가 없겠죠??

3. Prettier 옵션

3-1. 개발자들이 자주 사용하는 옵션

• printWidth
  한 줄의 최대 길이를 설정합니다. 이 값을 초과하면 프리티어는 코드 줄을 적절한 위치에서 자동으로 줄바꿈합니다.
  기본값: 80
  예시: "printWidth": 100

• tabWidth
  탭 하나에 해당하는 공백의 수를 설정합니다.
  기본값: 2
  예시: "tabWidth": 4

• useTabs
  들여쓰기에 탭을 사용할지 여부를 설정합니다. true로 설정하면 탭을 사용하고, false로 설정하면 공백을 사용합니다.
  기본값: false
  예시: "useTabs": false

• semi
  각 코드 라인의 끝에 세미콜론을 추가할지 여부를 설정합니다.
  기본값: true
  예시: "semi": true

• singleQuote
  문자열을 작은따옴표로 감쌀지 여부를 설정합니다. true로 설정하면 작은따옴표를 사용하고, false로 설정하면 큰따옴표를 사용합니다.
  기본값: false
  예시: "singleQuote": true

• trailingComma
  객체, 배열, 함수 매개변수 등에 후행 쉼표를 추가할지 여부를 설정합니다. 가능한 값은 "none", "es5", "all" 입니다.
  기본값: "es5"
  예시: "trailingComma": "all"

• bracketSpacing
  객체 리터럴에서 중괄호 사이의 공백을 설정합니다.
  기본값: true
  예시: "bracketSpacing": true

• jsxBracketSameLine
  JSX의 마지막 >를 다음 줄로 내릴지 여부를 설정합니다. true로 설정하면 같은 줄에 유지합니다.
  기본값: false
  예시: "jsxBracketSameLine": false

• arrowParens
  화살표 함수의 매개변수가 하나일 때 괄호를 포함할지 여부를 설정합니다. 가능한 값은 "avoid" (매개변수가 하나일 때 괄호 생략)와 "always" (항상 괄호 사용)입니다.
  기본값: "always"
  예시: "arrowParens": "avoid"