HTML 태그에서 css 선택기를 생성하는 VScode 확장 기능

성과물

※ 가능하다면 사용해 보세요~
https://marketplace.visualstudio.com/items?itemName=gonishiduka1985.extractioncssselector
https://github.com/underground0930/extractionCssSelector

무엇

갑작스럽지만.
css로 html의class를 선택하는 일은 너무 힘들지 않습니까?
페이지 수, 요소 수가 많으면'같은 일을 몇 번 해야 한다'는 생각이 든다.
아침에 일어나서 "나는 선택기를 뽑아서 준비했어!"누가 했으면 좋겠는 수준이다.

<div class="l-wrapper">
  <div class="p-hoge p-hoge--up js-hoge">aaa</div>
  <div id="test" class="p-huga js-huga">bbb</div>
</div>

↓↓↓↓↓

.l-wrapper{
  ...
}
.p-hoge{
  ...
}
.p-huga{
  ...
}

사실 이미 누군가가 웹 서비스로 했지.
붙이면 css 선택기 해드릴게요.
https://css.miugle.info/
이것은 매우 편리하고scss,less,플러그인 구조도 지원합니다.
정말 고기능이에요.
그렇지만
브라우저에 ""를 붙일 때마다 똑똑하지 않은데, 어떻게 편집기에서 완성할 수 있겠어요?
"그럼 자주 사용하는 vscode의 확장 기능으로 하세요!"
이런 느낌으로 만들기로 했어요.

규격.

scss파이지만'가독성','검색하기 쉽다'등의 이유로 끼워넣기를 고려하지 않고 소박한 스타일시트를 생성했다.

뽑은 것은'class'와'className(react 고려)'만 있고 나머지는 무시합니다.

전체 문서 또는 선택 영역에서 추출할 범위를 선택합니다.

생성된 css가 클립보드에 복사됨

중복된class 제거, 공간 제거

생성된 선택기에 임의의 문자열을 삽입할 수 있음(scss를 미리 넣어야 하는mixin 등에 사용)

감상

설치 자체가 어렵지 않지만 저도 사용할 수 있는 확장 기능이라고 생각합니다!정기적인 작업은 역시 끊임없이 자동화하는 것이 비교적 좋다!
문서가 다 영어라서 그런 부분은 좀 힘들지만 기회가 되면 다시 해보고 싶어요.
https://code.visualstudio.com/api/references/vscode-api