[VS Code] 익스텐션 이용하여 코드 캡쳐 쉽게 하기, Easy CodeSnap

이번에 소개할 익스텐션은 Easy Code snap이다.

🎈 들어가며

일반적으로 사용하는 캡쳐도구 크기를 맞추기 어렵거나, 코드가 이쁘게 나오지 않을 때가 많다.

라인정리가 제대로 안되어 있는 상태면 보기가 힘들고, 코드가  화면의 위 아래가 넘을 경우 캡쳐하기가 힘들다. 그럴 땐 포토샵이나 그림판 등 그림도구를 이용하여 이어 붙이기 같은 걸로 해야한다.

 

그래서 이전에는 좀 더 쉽게 전달하고자 CodeSnap이라는 익스텐션을 사용했었다.

CodeSnap - Visual Studio Marketplace

 

CodeSnap 샘플 갈무리

 

그러나 얼마전 다른 익스텐션으로 변경하였다.

변경한 이유:

• 하이트라이트(강조하는) 라인을 표시하고 싶었다.
• OS별로 표시되는걸 변경하고 싶었다.
• 추가 및 삭제 표시(형상관리처럼) 가능 여부
• 기존에는 저장만 가능했다. 이미지 복사도 하고 싶었다.
• 더이상 최신 버전이 업데이트 되지 않는다.
• 등등

🎈 1) Easy CodeSnap 설치하기

Easy CodeSnap - Visual Studio Marketplace

 

① 왼쪽 사이드 익스텐션 클릭 → ② easy codesnap 검색 → ③ 설치 클릭

🎈 2) Easy CodeSnap 사용하기

① 캡쳐할 코드 드래하기 → ② 마우스 우측 버튼 클릭 → ③ 맨 아래 Easy Code Snap 클릭 → 설정 확인 후 →  ④ codecap 아이콘 클릭 후 캡쳐 이미지 저장

일부만 할꺼면 코드 드래그하면 되지만 전체를 할 경우 (Ctrl + A) or (CMD + A) 단축키를 하면 편하다.

easy code snap 갈무리

각 라인을 강조할 수 있을 뿐만 아니라 형상관리 처럼 표시도 가능하다.

easy code snap

또 다른 장점은

• PNG or SVG파일로 저장할 수 있다.
• 캡쳐를 저장뿐만 아니라 클립보드로 복사할 수 있다.
• 한번 설정을 해놓으면 계속 사용이 가능하다.
• 사용자 워터마크를 할 수 있다.  (only TEXT)
• 사용하고 있는 줄 번호가 표기되게 할 수 있다.

 

 

🎈 3) Easy CodeSnap 설정하기

오른쪽 톱니바퀴를 누르면 설정할 수 있는 사이드 바가 나온다.

Easy CodeSnap 코드 캡쳐한 화면 + 설정버튼 표시 화면 갈무리

 

1. Line Number Hightlight 체크 값의 차이점은 '5'라는 숫자가 하얗게 나오는지 다른 숫자처럼 똑같이 명암처리 되는지다..
2. WindowStyle은 눌러보면 알겠지만 MacOS는 왼쪽 상단에 아이콘 표시이다.
3. save Action은 기본은 클리보드지만 저장하는 것으로 변경할 수 있다.

Easy CodeSnap 코드 캡쳐 설정화면 갈무리

(왼) 표시한대로 적용한 화면(MacOS), (우) 표시한대로 적용한 화면 (WindowsOS)

🎈마치며...

디테일 한 것은 직접 설정해보면서 취향에 맞게 설정하면된다.  전달할 때 가독성이 좋아 보는 사람도 편하고 확실히 구분할 수 있어 좋았다. VS Code를 사용하고 코드 스크린샷을 전달해야할 때 한번 사용해보는 것을 추천한다.