[VScode] 주석을 하이라이트 하자! "Comment Anchors"

못생긴 주석

주석은 보통 단색으로 표현되기에 눈에 띄지 않는다.

 

 

코드를 하이라이트 하고 싶을 때가 있다.

보통 주석은 잘 보이지 않는다. 

코드 속 주석을 눈에 띄게 그리고, 주석의 디자인을 아름답게 바꿔줄 수 있다면?

 

Comment Anchors

VSCode 를 사용한다면 "Comment Anchors" Extension 을 사용하여 주석을 하이라이트 할 수 있다.

또한, 주석마다 앵커라는 닻(?)을 내려, 파일 단위 혹은 워크스페이스 단위로 앵커(주석)들을 관리할 수 있는 기능도 제공한다. 

공식 레퍼런스(링크)

 

 

Comment Anchors

 

반응형

 

주석 하이라이팅, Anchor(닻) 기능

아직 다운로드 수는 많지 않지만, 무려 2018년 7월에 나온 신상이다. 

공식 레퍼런스(링크) 를 통해 활용법을 확인할 수 있다(GIF가 첨부되어 있어서 이 포스팅보다 훨씬 낫다). 

아래 사진은 "Comment Anchors" 를 적용한 모습이다. 

 

 

NOTE 라는 이름으로 주석이 하이라이트 되었다.

 

 

주석에 NOTE 라는 문구가 하이라이트 됨과 동시에, 코드 라인 왼쪽에 닻(Anchor) 모양의 아이콘이 생겼다.

 

 

다양하게 지원되는 하이라이팅 스타일

 

 이는 IntelliSense 기능을 활용하여 주석 기호(//, /* 뒤에 Anchor 를 입력하면 자동으로 자동완성 창을 띄워준다.)

 

 

Anchor 관리

이는 VS Code 의 최 좌측 메인 메뉴 중에서 닻 모양을 누르면 확인할 수 있다. 이 앵커는 File 단위로 확인하거나, Worksheet 단위로 확인할 수 있다.(이는 환경설정에서 설정을 간단히 변경하는 것으로 가능하다.)

 

File 과 Worksheet 단위별 그룹핑

하이라이팅 스타일은 커스텀이 가능하다.

위는 "Comment Anchors" 의 "CommentAnchors.tags.list" 기본 속성이다. file, workspace 단위로 앵커를 구분할 수 있다. 

 

Anchor 들은 모아보기가 가능하다.

 

앵커들은 좌측과 같이 FILE ANCHORS / WORKSPACE ANCHORS 단위로 나뉘어 표현된다. 파일 단위 앵커인 "NOTE" 는 WORKSPACE ANCHOR 에 표현되지 않는다. 

사용자 정의 앵커 추가 

설정에서 앵커 블록을 하나 복사하여 수정하는 것으로 간단히 사용자 정의 앵커를 등록할 수 있다. (환경설정 : "CommentAnchors.tags.list")

 

커스텀 앵커

 

커스텀 앵커에 대해서도 설정이 가능하다.

 

주석 커스터마이징

앵커 태그의 스타일 뿐만 아니라 주석 전체의 스타일을 태그의 스타일과 동일하게 줄 수 있다. 

"styleComment" 속성을 true 로 하는 Line 을 추가하면 가능하다. 

 

 

 

하이라이팅 스타일을 라인에 걸쳐 적용하기

 

 

하이라이팅 스타일을 라인에 걸쳐 적용하기 설정법

 

자꾸 주석을 달아보고 싶네? 

주석 없이, 자체 해석 가능한(가독성이 좋은) 코드가 Best 라고는 하지만, 어쩔 수 없이 주석을 달아야 하는 상황이라면, 

주저 말고 "Comment Anchors" 를 사용해보자!