많은 웹 개발자들이 코드 포맷팅을 일일이 수작업으로 처리하는 것을 싫어합니다. 코드를 일관된 형식으로 포맷팅하는 것은 직관성과 유지보수성에 큰 도움이 됩니다. 여기서 Prettier가 도움이 됩니다.

Prettier는 JavaScript, TypeScript, CSS, JSON, HTML 및 Markdown과 같은 다양한 언어에 대한 코드 포맷팅을 지원하는 도구입니다. 이것은 코드를 쓸 때마다 일관된 형식으로 자동으로 포맷팅해주며 개발자들이 태스크에 집중할 수 있도록 해줍니다.

Prettier 설치

우선, 프로젝트의 루트 디렉토리에서 다음 명령어로 Prettier를 설치합니다.

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

설정

Prettier를 HTML에 사용하기 위해서는 먼저 프로젝트 루트에 .prettierrc 파일을 생성하고 아래와 같이 설정합니다.

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "htmlWhitespaceSensitivity": "css",
  "endOfLine": "auto"
}

이제 Prettier를 통해 HTML 파일을 자동으로 포맷팅할 준비가 되었습니다. 필요하다면 여러분이 사용하는 편집기에 Prettier 플러그인을 설치하여 저장할 때마다 자동으로 코드를 포맷팅하도록 설정할 수도 있습니다.

코드 포맷팅

Prettier를 사용하여 HTML 파일을 포맷팅하려면 다음 명령어를 실행합니다.

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

위 명령어는 src 디렉토리의 모든 HTML 파일을 포맷팅하여 원본 파일에 덮어씁니다.

이제 코드 작성할 때마다 HTML 파일을 일일이 정리할 필요가 없게 됐습니다. Prettier를 사용하여 코드를 일관된 형식으로 자동으로 포맷팅하여 작업 효율성을 향상시켜보세요.

자세한 설정 및 옵션에 대한 내용은 Prettier 공식 문서를 참고하시기 바랍니다.