본문 바로가기

React Study

React Tip. styled-components 구문 강조 플러그인 [ vscode-styled-components ]

반응형

VS Code에서 스타일드 컴포넌트 구문을 보기 쉽게 하기 위해서는 [ VSCode-styled-components ] 플러그인을 설치합시다.

 

 

 

 

책에서 styled-components 라이브러리를 이용하여 웹에서 사용하던 CSS 문법 그대로 RN의 스타일시트를 작성하게 하는 부분을 공부하던 도중, 갑자기 VS Code에서 해당 문법에 대해 구문강조가 죄다 사라져서 상당한 불편함을 느꼈다.

 

 

 

 

스타일시트가 정의되는 부분은 속성명, 속성값 구분없이 그냥 문자열처럼 처리가 되어 상당히 보기가 불편하다.


위와 같이 VS Code에서 styled-componnets 구문을 상당히 보기 불편한 부분을 다소 해소 시켜주는 플러그인이 있다. VS CODE 확장 플러그인 설치탭에서 vscode-styled-components를 검색하게 되면 가장 첫줄에 있는 플러그인을 설치하게 되면 아래와 같이 구문 강조가 처리되어 보이게 된다.

 

 

 

 

 

 

 

이 쪽이 훨씬 보기 편하다. 굳굳.

 

반응형