웹 개발자를 위한 필수 VsCode 확장 Hover Preview

웹 개발자를 위한 필수 VsCode 확장 Hover Preview
Cozy CodingPosted On Jul 24, 20242 min read

우리 모두가 그렇게 되어본 적이 있습니다. 다른 사람의 코드를 이렇게 보고 처음 봤을 때 무서워하기도 했죠.

이미지

하지만 이제 hover preview를 사용하면 스니펫이나 HTML 요소 위로 마우스를 올렸을 때 어떻게 보일지 빠르게 미리 볼 수 있습니다.

이미지

Hover 미리보기 다운로드

VsCode marketplace에서 Hover 미리보기를 받으실 수 있어요.

아직 개발 중이며 베타 릴리스로 공개되었다는 점을 유념해 주세요.

Hover 미리보기를 사용해야 하는 이유?

이 표를 만든 이유가 몇 가지 있습니다.

  • 다른 사람의 코드를 읽는 것은 재미있지 않습니다. 각 섹션이 무엇을 하는지 빠르게 미리보기하면 이해하기 훨씬 쉬워집니다.
  • 초보자이거나 새로운 CSS 라이브러리나 프레임워크를 배우는 경우 어떻게 동작하는지 이해하기 어려울 수 있습니다. 따라서 시각적 단서가 매우 도움이 될 것입니다.
  • 브라우저와 vscode 간의 토글을 줄일 수 있습니다.

제약 사항

  • 현재 HTML 파일에서만 작동하며, 구성 요소 기반 라이브러리나 프레임워크에는 작동하지 않습니다.
  • 애니메이션 미리보기할 수 없음(예: CSS 애니메이션).
  • 상호 작용 불가: 미리보기와 상호 작용할 수 없습니다.

로드맵

호버 미리보기는 아직 진행 중입니다. 더 많은 구성 및 지원이 제공될 예정입니다. 호버 미리보기 로드맵을 확인하실 수 있습니다.

소스 코드 및 링크

  • VsCode marketplace