Prettier와 기본 Fomatter 충돌 오류

오류

Prettier를 적용해 코드를 정리하려고 했는데, CSS 파일의 주석이 자동으로 줄바뀜이 되었음

 

• 자동 저장 전

.root {
    display: flex;
    flex-direction: column;
    align-items: center; /*fff*/
    width: 100%;
}

 

• 자동 저장 후

.root {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*fff*/
    width: 100%;
}

 

문제 원인

프리티어의 html과 css의 기본 포매터가 vscode 기본 포매터로 설정되어 있어 문제가 발생

 

해결 방법

1. Extension > Prettier > 설정 톱니바퀴 > Extension Settings

2. 우측 상단 페이지 아이콘 > vscode settings.json 파일 설정

3. settings.json에서 하단 코드 삭제

 "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[css]": {
    "editor.defaultFormatter": "vscode.css-language-features"
  },