Mong dev blog

1. colorvariabletracker 이번 포스팅은 “[vscode] 컬러 변수 뷰어 만들기” 시리즈의 마지막인 “extension 구현하기”이다. 구현한 extension은 colorvariabletracker 로, 현재 확장을 릴리즈한 상태이다. (링크) 컬러 변수 뷰어(colorvariabletracker)는 특정 파일에 선언된 컬러 변수를 추적하는 확장이다. 컬러 변수 뷰어에서 구현한 기능은 6가지이다. 이번 시간에는 이 6가지를 구현한 방법은 간단하게 설명하고자 한다 🙂 기능 방식 추적하고 싶은 파일을 설정할 수 있다. .vscode/settings.json에 파일 경로 지정 선언된 컬러변수를 vscode 사이드바에서 표 형식으로 볼 수 있어야 한다. webview로 구현 검색창에서 컬러 ..

0. 들어가기 전에… 팀에 컬러 시스템이 정착되기 전, 프로젝트에서 전역 컬러 변수를 바꾸거나 추가 및 제거하는 과정이 있었다. 그 당시에는 scss 파일에서 탐색하고 수정하는 게 번거롭다고 느끼지 않았다. 그러다 어느 날 문득, “컴포넌트는 Storybook으로 관리하는데 컬러 변수는 어떻게 관리하지?”라는 생각이 들었다. 컬러 변수도 Storybook 형태로 한 눈에 파악하고 관리할 수는 없을까? 이렇게 이어지다 보니, vscode 사이드바(하단 핑크영역)에서 컬러 변수를 확인하고 검색할 수 있는 extension이 있으면 좋겠다는 생각이 들었다. 그래서 전역 컬러 변수를 보여주고, 복사는 물론 검색까지 되는 extension을 만들어보기로 했다. 이번 포스팅은 시리즈로 작성했는데, 첫 번째는 “[v..