GlobalStyle.ts 에서 Prettier가 적용되지 않는 문제

문제

다른 컴포넌트에서는 Prettier가 정상 작동하는데, 이상하게도 styled-components에서 GlobalStyle을 적용할 수 있는 GlobalStyle.ts 를 생성 후 createGlobalStyle 적용하는 부분에서 Prettier가 작동되지 않았다.

Prettier가 적용되지 않은 코드 화면

원인

1. Babel-plugin-style 를 설치하고 사용할 때 Next.js에서 발생하는 버그라고 한다.

2. Prettier에서 많은 태그를 지원했지만 현재는 줄인 상태라고 한다.

Prettier cannot format styled-components createGlobalStyle tag · Issue #5386 · prettier/prettierGitHub

fix: detect more styled template literals by SimenB · Pull Request #5264 · prettier/prettierGitHub

해결 방법

createGlobalStyle 을 import 할 때 { } 객체로 바로 불러오지 않고,

styled를 직접 명시하며 코드에 작성했다. styled가 있어서 Prettier가 지원 되는 것이라고 한다.

Prettier 적용된 코드

createGlobalStyle not being auto formatted · Issue #175 · styled-components/vscode-styled-componentsGitHub