[Dseok의 코딩스터디] prettier 사용법: html과 css는 제외

코드를 예쁘게 정리해주는 Prettier, 여러분도 쓰고 계시죠? 그런데, 모든 파일에 적용되면 HTML과 CSS도 자동으로 포맷팅되어서 오히려 불편한 경우가 생기기도 해요. 그렇다면 어떻게 하면 Prettier의 힘을 유지하면서도 HTML과 CSS는 예외로 둘 수 있을까요? 오늘은 그 방법을 쉽고 재미있게 알려드릴게요!

1. 프로젝트 설정하기

먼저, Prettier를 프로젝트에 설치해요. 아래 명령어를 터미널에 입력하세요:

npm install --save-dev prettier

2. Prettier 설정 파일 만들기

프로젝트 루트에 .prettierrc 파일을 만들고, 기본 설정을 추가해요. 이 설정은 여러분의 코드를 깔끔하게 정리해주는 기본 규칙을 정의해요:

{
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5"
}

 

3. HTML과 CSS 예외 처리하기

이제 VS Code 설정에서 HTML과 CSS 파일에는 Prettier가 작동하지 않도록 설정해봐요. settings.json 파일을 열고 다음 코드를 추가하세요: 

 

• VS Code에서 Command Palette를 열기 위해 윈도우 : Ctrl + Shift + P / 맥 : Cmd + Shift + P을 누릅니다.
• Preferences: Open Settings (JSON)을 검색하고 선택합니다.
• 설정을 건드릴 수 없는 json파일과 설정을 변경 할 수 있는 json 파일이 있어요!!! 구분을 잘 하셔서 작업하세요!!!

 

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[html]": {
    "editor.defaultFormatter": null
  },
  "[css]": {
    "editor.defaultFormatter": null
  },
  "[scss]": {
    "editor.defaultFormatter": null
  }
}

이렇게 하면 Prettier는 이제 JavaScript 파일에는 예쁘게 작동하지만, HTML과 CSS는 그대로 두죠!

4. 줄바꿈도 내 맘대로!

한 줄에 너무 많은 코드를 넣고 싶지 않다면, 줄바꿈 설정도 바꿀 수 있어요. .prettierrc 파일에 printWidth를 추가해 한 줄에 몇 글자까지 허용할지 정해보세요:

{
  "printWidth": 80
}

이렇게 하면 한 줄에 100자 이상 쓰지 않도록 줄바꿈을 자동으로 넣어준답니다!

 

이렇게 하면 VS Code에서 Prettier를 더 똑똑하게 사용할 수 있겠죠?

이제 HTML과 CSS는 손대지 않고, 여러분의 JavaScript 코드를 깔끔하게 관리해 보세요!

여러분도 자신만의 코드 스타일을 만들어보세요!

prettierrc.txt

0.00MB

 

위 파일의 확장자를 지우고 .prettierrc로 바꿔서 사용하세요.