본문 바로가기
기타 개발 관련/IDE 및 개발 툴

Webstorm : React의 styled components 플러그인 설치

by 번데기 개발자 2021. 1. 14.
반응형

React에서 Css를 스타일링할때 쓰이는 라이브러리중 Styled Component라이브러리가 유용합니다.

 

이때 Styled Components를 사용하여 React 컴포넌트에 CSS를 쉽게 디자인 할수 있습니다.

 

그런데 기본적으로 Styled Component를 사용할때 아래와 같이 WebStrom에서 가독성이 좋지 않습니다.

 

Styled Component Plugin 적용 전

이때 Webstorm에서 Plugin으로 Styled Components 플러그인을 설치하면 좀 더 쉽게 Styled Components를 사용하실 수 있습니다. 

 

설치방법은 다음과 같습니다.

 

1. Preference => Plugins => Browse repositories 로 이동

 

2. Styled Components & Styled JSX 플러그인 설치

Styled Components & Styled JSX 플러그인 검색

 

3. 설치후 Plugins에서 Styled Components & Styled JSX 플러그인 사용 적용

Styled Components & Styled JSX 플러그인 적용

 

적용한뒤 WebStrom을 재실행하면 다음과 같이 Styled Component를 적용한 컴포넌트가 가독성있게 바뀐 것을 확인할 수 있습니다.

 

Styled Commponents 적용 후

반응형