Visual Studio Code - TODO 리스트 표현하기 (VS Code TODO Tree)

Visual Studio Code Logo

 

안녕하세요.

즐거운 우리집(https://joyfulhome.tistory.com/) 입니다.

 

오늘은 파이썬(Python) 등으로 인해서 요즘 많이 사용하시는 

비쥬얼 스튜디오 코드 (Visual Studio Code) 에 대해서 말씀 드리려고 해요. ^^

 

코드를 작업하시다보면 지금 작성을 하긴 하는데,

이후에 다시 수정을 해야 할 곳이라던가 (지금은 우선 빨리 처리해야 하니 수정은 다음에~ ㅋ)

클린 코드를 만들기 위해서 책갈피를 끼워 넣는 부분이 생기기 마련이죠.

 

주석을 사용하여 남기곤 하지만,

수천 수만라인의 코드 속에서...

또 수십, 수백, 수천의 파일 속에서 

찾고 싶을 때 이런 주석을 찾기란 쉽지 않죠.

 

많은 프로그램들에서 주석에 TODO 등을 남겼을때 찾기 쉽게 제공을 해 주고 있는데요.

비쥬얼 스튜디오 코드 (Visual Studio Code) 에서도 TODO를 남겼을때

찾기 쉽게, 그리고 한 눈에 들어올 수 있도록 해 줍니다.

단, 기본 기능에는 들어있지 않아서 추가기능 (Extension) 을 설치해 주셔야 합니다.

 

그럼 어떻게 하는지 한 번 같이 알아보실까요?

 

 

반응형

 

 

비쥬얼 스튜디오 코드 (Visual Studio Code) 에서 TODO, FIXME 기능 이용하기

 

01. 비쥬얼 스튜디오 코드 (Visual Studio Code) 실행 > Extenstions > TODO 검색

    비쥬얼 스튜디오 코드 (Visual Studio Code) 를 실행 하여 준 뒤,

    왼쪽 메뉴에 추가 기능들을 설치 할 수 있는 마켓인 EXTENSION 를 선택해 줍니다.

    그리고 검색창에 TODO 라고 입력 후 검색을 하여 줍니다.

    기능들이 비슷한 것들이 많이 있는데 검색된 내용 중 'Todo Tree' 를 선택해 주세요.

 

 

02. Todo Tree 설치

    Todo Tree, Gruntfuggly 를 선택하시고 설치 (Install) 을 해주세요. 

    설치는 금방 끝납니다. ㅎ

    사용 방법 등 자세한 사항은 아래 내용 들을 읽어서 참고해주시며 좋아요 ^^

 

 

03. 코드에 TODO, FIXME 사용하여 주석처리

     코드 주석 으로 TODO 또는 FIXME 를 사용하시면 해당 단어에 하이라이트가 됩니다.

     이렇게 보이는 방식은 따로 변경할 수 있는데 이건 따로 포스팅하여 알려드릴께요.

     기본적으로는 위 처럼 보이는데 이렇게도 눈에 쉽게 띄어 좋습니다. ^^

     그런데 이렇게 파일을 찾고 해당 위치까지 스크롤해야지만 찾아진다면... 추가 기능을 이용할 일이 없겠죠?

     우리는 이런 주석해 놓은 곳을 바로 찾고 싶습니다... 그럼 어떻게??? 

 

    

04. Todo Tree > 위치 확인

     왼쪽에 보시면 Todo Tree 후 나무 모양이 추가된 것을 확인 하실 수 있습니다.

     이 나무 모양을 누르시면 file tree 위치에 TODO 와 FIXME로 쓰여진 주석을 보실 수 있습니다.

     파일 단위로 보실 수 있으며, 이 주석을 클릭하시면 오른쪽에 해당 위치로 바로 가서 보여준답니다.

 

 

이렇게 다음에 해야할 부분에 TODO 주석을 남기고

수정해야할 부분에 FIXME 주석을 남기고,

기타 코멘트 등을 (comment view) 다음에 빠르게 찾아보실 수 있을꺼에요.

시간은 소중하니까요 ^^

 

 

그럼 오늘도 즐거운 하루 되세요~ ^^