prettier-config

이 패키지는 공용 Prettier 설정을 제공하여 프로젝트에서 일관된 코드 포맷팅 스타일을 유지할 수 있도록 돕습니다.
JavaScript, TypeScript, JSON 등의 파일에서 적용할 수 있는 포맷팅 규칙을 포함하고 있습니다.

설치

이 패키지는 pnpm workspace 환경에서 사용하도록 설계되었습니다.

프로젝트 루트에서 다음 명령어를 실행하여 설치하세요.

pnpm --filter <your-package-name> add -D @blastlabs/prettier-config --workspace

또는 개별 패키지 내에서 설치하려면 다음과 같이 실행합니다

pnpm add -D @blastlabs/prettier-config --workspace

참고 : 이 패키지는 prettier >= 3 버전이 필요합니다.
프로젝트에서 해당 버전이 설치되어 있는지 확인하세요.

사용법

Prettier 설정 파일에서 prettier-config 패키지를 확장하여 사용할 수 있습니다.
프로젝트의 package.json 파일에 prettier 필드를 추가하고, 설정 패키지를 적용하세요.

// package.json
{
  "prettier": "@blastlabs/prettier-config"
}

또는 .prettierrc.js 파일을 사용하여 prettier-config 를 가져와서 사용할 수도 있습니다.

// .prettierrc.js
module.exports = require('@blastlabs/prettier-config');

주요 설정

prettier-config에는 다음과 같은 주요 설정이 포함되어 있습니다.

• trailingComma: 'all' : 객체나 배열의 마지막 요소 뒤에 항상 쉼표를 추가하여 깔끔한 코드 스타일을 유지합니다.
• tabWidth: 2 : 들여쓰기에 사용할 스페이스 수를 2로 설정합니다.
• semi: true : 코드 라인 끝에 세미콜론을 추가합니다.
• printWidth: 100 : 한 줄의 최대 길이를 100자로 제한하여 가독성을 높입니다.
• singleQuote: true : 문자열을 홑따옴표로 통일하여 일관된 스타일을 유지합니다.
• bracketSpacing: true : 객체 리터럴에서 중괄호 {} 안에 스페이스를 추가하여 가독성을 높입니다.
• useTabs: false : 들여쓰기에 탭 대신 스페이스를 사용합니다.
• endOfLine: 'lf' : 모든 줄 끝에 LF(Line Feed)를 추가하여 운영 체제에 따른 줄바꿈 문제를 방지합니다.
• overrides: [{ files: ['*.json', '.eslintrc'], options: { tabWidth: 2, trailingComma: 'none' } }] : JSON 파일과 ESLint 설정 파일에 대해 탭 너비를 2로 설정하고, 마지막 쉼표를 추가하지 않도록 설정합니다.
• plugins: ["prettier-plugin-tailwindcss"] : Tailwind CSS 클래스명을 자동으로 알파벳 순서로 정렬합니다.
  • tailwindFunctions: ["clsx"] : clsx 함수에 전달된 Tailwind CSS 클래스명도 알파벳 순서로 자동 정렬합니다.

타입 선언

prettier-config 패키지에 대한 타입 정보를 제공합니다.
index.d.ts 파일에 타입 정의를 포함하여 TypeScript 프로젝트에서 오류 없이 사용할 수 있습니다.

참고 링크
Prettier 공식 문서