[VSCode] 드래그 한 스타일만 포맷 변환하는 확장 (style-compressor)

확장 사용 예시

프로젝트를 협업하다보면 CSS 포멧 스타일이 다를때가 있다. 

지금 하고 있는 프로젝트 CSS 스타일은 한 줄에 한클래스의 스타일을 나열하는 Compact 형식이다.

 

CSS/SCSS 포맷 종류에 대해서는 전에 게시해둔 글을 참고해도 좋다.

https://jintrue.tistory.com/entry/SCSS-CSS-Format-%EC%A2%85%EB%A5%98%EC%97%90-%EA%B4%80%ED%95%98%EC%97%AC

[SCSS, CSS] Format 종류에 관하여

 

기존 css 파일에 모바일 수정 작업을 인수를 받아 작업 중인데, CSS 작업 습관이 Expanded와 Nested 형식으로 익숙해져 있어서 자꾸 엔터를 치기일수다. 

 

그래서 내가 지금 Expanded 형식으로 추가한 css 소스만 기존 Compact 형식으로 변환하고 싶다면 아래 VSCode Extension을 추천한다.  

https://marketplace.visualstudio.com/items?itemName=edp1096.vscode-style-compressor

style-compressor - Visual Studio Marketplace

 

따로 settings.json에 옵션을 추가할 필요 없이, 단축키만 확인하면 된다. 

이 확장의 기본 단축키는,

• win Ctrl + Shift + i
• mac Cmd + Shift + i

만약, 기본 단축키와 기존에 셋팅해둔 단축키가 겹친다면,

Ctrl + Shift + p > ">keyboard shortcuts" 입력 > "style-compressor" 검색 > Keybinding 설정

나는 중복되는 키가 계속 있어서 진짜 사용 안할 것같은 단축키로 설정해 두었다.

➡ Ctrl + Shift + 9

style-compressor keybinding Setting