Prettier란? [ESLint와의 차이점]

Prettier란?

전체 코드베이스에 걸쳐 일관된 코드 스타일을 적용할 수 있도록 도와주는 툴이다.

만든 이유

모든 스타일 관련 논쟁을 중단하는 것입니다. 프로젝트와. 팀에 일관된 스타일 가이드가 있는 것은 가치 있는 것으로 받아들여지지만, 거기에 이르는 과정은 매우 고통스럽고 보상이 없는 과정이라고 한다.

“이것은 스티브 잡스가 매일 같은 옷을 입었던 것처럼 보입니다. 그는 수백만 개의 결정을 내려야 했고, 의복을 고르는 등의 사소한 결정을 내릴 여유가 없었습니다. 저는 Prettier가 그와 같다고 생각합니다.”

멋지다..

옵션

• 탭 너비: 들여쓰기 수준당 공백 수
• 텝 : 공백 대신 탭을 사용하여 줄을 들여쓴다
• 세미콜론 : 명령문 끝에 세미콜론을 인쇄합니다
• 인용 부호 : 큰따옴표 대신 작은따옴표를 사용한다
  …. 되게 많음

이곳을 참고하시면 더 많은 옵션을 볼 수 있습니다.

예시

{
  "endOfLine": "auto",
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "singleAttributePerLine": true,
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "plugins": ["prettier-plugin-tailwindcss"]
}

ESLint와의 차이점

1. 목적

   • ESLint: 코드 품질을 개선하고 버그를 찾아내는 데 중점을 둔다.

   코드 스타일에 관한 규칙을 적용하고 코드의 일관성을 유지하는 데 도움이 된다.

   • Prettier: 코드를 자동으로 서식을 지정하여 일관된 스타일을 적용하는 데 초점을 둔다. 주요 목표는 스타일 논쟁을 중단하고 개발자가 코드 서식을 신경 쓰지 않고 개발에 집중할 수 있도록 하는 것

2. 기능

   • ESLint: 사용자가 정의한 규칙을 통해 코드를 분석하고 경고나 오류를 발생시킨다. 코드 스타일을 확인하고 일관성을 유지하는 데 도움을 준다.

   • Prettier: 코드를 분석하여 자동으로 서식을 지정하고 일관된 스타일을 적용한다. 주로 들여쓰기, 공백, 따옴표 사용 등의 스타일을 자동으로 조정한다.

3. 구성

   • ESLint: 사용자가 규칙을 직접 정의하거나 미리 정의된 설정을 사용하여 설정합니다. 규칙은 주로 코드 품질과 스타일에 관한 것이다.

   • Prettier: 사용자가 별도의 규칙을 정의하지 않습니다. 대신 Prettier는 고유한 스타일 가이드를 따르며, 사용자는 주로 기본 구성을 변경할 수 있는 몇 가지 옵션을 제공한다.

4. 적용 방식:

   • ESLint: 사용자가 코드에 대해 수행할 작업을 정의하는 규칙을 사용하여 코드를 분석하고 이를 바탕으로 경고나 오류를 발생시킨다.

   • Prettier: 코드를 분석하고 자동으로 서식을 지정하여 코드에 일관된 스타일을 적용한다. 사용자가 코드에 대한 추가적인 규칙을 정의할 필요가 없다.

ESLint : 코드 품질을 개선하고 스타일을 유지하는 데 중점
Prettier : 코드를 자동으로 서식을 지정하여 일관된 스타일을 적용하는 데 초점

참고

https://prettier.io/docs/en/