VS code TODO 리스트를 효율적으로 관리하자!(Todo Tree 익스텐션 사용기)

개발하다보면 솔직히 할게 넘 많아가지구 뭘하고있었는지, 뭘해야하는지, 뭘 나중에 해야할지를 관리하는게 어려운점이 있었다. VSCode를 IDE로 사용하는 사람들(나같은 JavaScript 개발자)에게는 VSCode가 이미 한트럭정도 필요한 Extension을 제공중이다. 그중에 Todo Tree 를 사용해보려고 한다.

 

TODO Tree

marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree

Todo Tree - Visual Studio Marketplace

이 익스텐션은 아래의 두가지 기능을 제공한다. 

 

// TODO - 다음에 이거이거 하자

// FIXME - 이거 고쳐야함

 

 

이렇게 써놓으면 Todo Tree 가 얘를 찾아서 보여준다. 

 

이렇게 하면 사이드바에 아래와 같은 아이콘이 생긴다. 

Todo Tree Icon

 

이제 얘를 눌러보면 TODO, FIXME 주석을 단곳의 위치를 보여준다 .

 

TODO TREE

코드에서는 주석을 달면 아래처럼 스타일이 입혀져서 보여서 눈에 확띈다. 

 

주석을 달았을때의 화면

 

이제 위의 주석의 스타일도 변경할 수 있는데, 이건 settings에 가서 설정을 바꿀수있다. (File > Preferences > Settings)

 

이렇게!!

 

스타일이 바뀌었다!

 

{
    "todo-tree.highlights.defaultHighlight": {
        "icon": "alert",
        "type": "text",
        "foreground": "red",
        "background": "white",
        "opacity": 50,
        "iconColour": "blue"
    },
    "todo-tree.highlights.customHighlight": {
        "TODO": {
            "icon": "check",
            "type": "line"
        },
        "FIXME": {
            "foreground": "black",
            "iconColour": "yellow",
            "gutterIcon": true
        }
    }
}

 

위의 값을 settings.json에 붙여넣으면 스타일을 설정할 수 있다!

 

 

참고한 글

medium.com/@EclecticCoder/manage-todo-list-in-vscode-beb53774d776

Manage TODO List in VSCode