Styled-Components에서 갑자기 자동 완성이 안되는 경우

styled-components에서 css 자동 완성을 위해 vscode-styled-components라는 extension을 사용하고 있었다.
 

https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components

그런데 어느 날 갑자기 뭔가 불편하다 싶더니 css 자동완성이 되고 있지 않았다.
 

아무것도 뜨지 않는다.

 
처음에는 익스텐션끼리 충돌이 발생했을 거라 생각했고
 
익스텐션을 하나씩 비활성화 시켜가면서 확인했다.
 
하지만 여전히 문제가 해결되지 않았고,
 
vscode의 setting까지 만져봤지만 변화는 없었다.
 
 
도저히 모르겠다 싶어 등록된 이슈가 있는지 확인해 보기 위해  vscode-styled-components의 repository에 들어가 봤다.
 
https://github.com/styled-components/vscode-styled-components
 
read.me를 천천히 읽어보는데, Troubleshooting의 Intellisense is not working이라는 항목이 눈에 띄었다.
 

This is due to a clash between TypeScript 5.0.0 and this extension. When VSCode released March 2023 that had TypeScript 5.X set by default which 1.7.8 supports but lower versions don't. So, if you're not getting intellisense its most likely because you've updated the extension but haven't updated your version of TypeScript yet. The quick option is to downgrade to v1.7.5, the long term option is to migrate to TypeScript 5.X See:  #387

요약하자면, vscode-styled-components의 최신 버전에서 타입스크립트 5.x.x 이하 버전을 사용할 경우 익스텐션과 충돌이 발생하여 작동하지 않을 수 있다는 말이었다.
 
따라서 다음과 같은 해결 방법이 있다.
1. 타입스크립트 5.x.x 버전으로 마이그레이션
2. vscode-styled-components v1.7.5로 다운그레이드 
 
나는 아직 모든 프로젝트에서 5.x.x 버전의 타입스크립트를 사용하고 있지 않아서  2. vscode-styled-components v1.7.5로 다운그레이드를 하기로 하였다.
 
다운그레이드 방법은 다음과 같다.
 
1. vscode-styled-components의 마켓 플레이스에 접속한다.
https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components 
 
2. 1.7.5 버전을 다운로드한다.

 
3. vscode에서 명령 팔레트를 켜준다. ( 맥의 경우 cmd + p )

 
4. install from vsix을 눌러준다.

 
5. 다운로드 받은 .vsix파일을 찾아준다. 
 
6. 자동완성의 소중함을 느낀다.

 
 
예전에 vscode 최신 버전으로 업그레이드 후 비슷한 증상을 겪었던 기억이 얼핏 있다.
 
위 방법으로 해결이 안 될 경우 vscode와 익스텐션의 충돌이 원인이 아닌지 생각 해보자.