CSS는 가독성이 높고 일관된 형식을 유지하는 것이 중요합니다. Prettier는 코드를 자동으로 포맷팅하여 일관된 스타일을 유지할 수 있는 훌륭한 도구입니다. 이번 글에서는 Prettier를 사용하여 CSS 코드를 자동으로 포맷팅하는 방법에 대해 알아보겠습니다.

Prettier란 무엇인가요?

Prettier는 주로 자바스크립트 코드를 포맷팅하는데 사용되지만, CSS, HTML, JSON 등 다양한 종류의 코드를 지원하는 코드 포맷터입니다. 설정을 통해 원하는 포맷 스타일을 적용할 수 있으며, 코드를 저장할 때마다 자동으로 포맷팅되어 일관된 형식을 유지할 수 있습니다.

Prettier 설치하기

먼저, 프로젝트에 Prettier를 설치합니다. 타입스크립트 프로젝트라면 다음 명령어를 사용하여 설치할 수 있습니다.

npm install --save-dev --save-exact prettier

Prettier 설정 파일 생성하기

프로젝트 루트 경로에 .prettierrc 또는 prettier.config.js 파일을 생성하여 Prettier의 설정을 정의할 수 있습니다. 예를 들어, 다음과 같이 prettier.config.js 파일을 생성하고 설정을 정의할 수 있습니다.

module.exports = {
  // CSS 코드를 포맷팅하는 옵션을 설정합니다.
  tabWidth: 2, // 탭 간격을 2로 설정
  semi: true, // 세미콜론을 항상 추가
  singleQuote: true, // 작은따옴표 사용
  trailingComma: 'all', // 후행 콤마를 항상 추가
};

Prettier 실행하기

설치와 설정이 완료되었다면, Prettier를 실행하여 CSS 코드를 자동으로 포맷팅할 수 있습니다. 타입스크립트 파일이나 CSS 파일이 포함된 디렉토리에서 다음 명령어를 사용하여 실행할 수 있습니다.

npx prettier --write "src/**/*.css"

이제 Prettier를 사용하여 CSS 코드를 일관되게 포맷팅할 수 있습니다. 코드 포맷팅에 따른 개발 생산성 향상과 가독성 향상을 경험해보세요.

결론

Prettier를 사용하여 CSS 코드를 포맷팅하는 방법을 살펴보았습니다. Prettier를 사용하면 일관된 코드 스타일을 유지하고 개발 생산성을 향상시킬 수 있습니다. 코드 포맷팅을 위한 Prettier의 다양한 설정 옵션을 알아보고 프로젝트에 효과적으로 적용해보세요.