[TIL.21] 비쥬얼스튜디오코드vsCode extension 확장 추천 git comit 추적 및 버그, 오류 등 작업 리스트 관리 Todo Tree

최근에 노마드코더 강의를 들으면서 비쥬얼 스튜디오코드로 작업을 하는데 니꼴라스가 커서를 놓는 페이지에 바로 옆에 주석처럼 옅은 글씨로 누가 언제 어떤 커밋을 했는지 뜨는걸 보고 나도 찾아서 설정해야 겠다 싶었다.

이거닷!!!

이런식으로 내가 편집중이면 마지막으로 언제 편집을 했는지 커밋했으면 어떤 메시지로 커밋을 했는지가 소스트리를 뒤지지 않아도 해당 페이지에 커서만 갖다 놓아도 알수있어서 협업할때 유용해보였다.

 

이건 누가했지??? 역추적 가능ㅋㅋㅋㅋㅋ

과거의 나일 수 있음 주의ㅋㅋㅋㅋ

과거의 나래기 무슨 짓을 한거냐 흑역사 들추기(뚀륵ㅠ)

 

GitLens

비쥬얼스튜디오코드 vsCode에서 깃 추적을 바로바로 가능하게 해주는 확장extension 프로그램이다. 

 

GitLens Release Notes - GitLens

단순히 히스토리 체크의 개념으로만 봐도 좋긴한데 GitLens에는 알고 사용하면 더욱 유용한 기능들이 많다.

 

728x90

왼쪽 선택메뉴에서 깃메뉴를 선택하면 아래 깃과 연동된 다양한 옵션들과 편집창 오른쪽 상단에서도 해당 페이지의 깃 옵션들을 확인할 수 있다.

 

 

커밋내역을 볼 수 있는 옵션중에 Show Commit Graph를 보면 위와같이 커밋 트리도 볼 수 있다.

나 혼자 작업중인 프로젝트라 심심한데 협업 프로젝트면 user별로 알록달록(?)하게 볼 수 있다ㅋㅋㅋㅋ

 

 

---

 

GitLens 다음으로 추천하는 vscode 확장 프로그램 extension

Todo Tree

이건 전 회사에서도 쓰긴 썼는데 얼마전에야 제대로 사용하게 된 Todo Tree

 

기본적으로 아래와같이 TODO, FIXME, BUG 세개의 태그가 하이라이트가 되서 주석을 달면 편하게 볼 수 있다. 

그냥 하이라이트 기능만 있는 줄 알았는데 이것도 한번에 리스트업된 화면을 볼 수 있다는걸 얼마전에 알게됐다...! 

 

원래 기본설정으로도 하이라이트가 되기는 하는데 내가 확장을 하도 많이 받아서 충돌이 있는건지 제대로 안돼서 settings.json에서 태그별 컬러도 커스텀해줬다.

 

참고로 extension확장 settings.json 편집은 아래 설정 메뉴에서 바로가기할 수 있다

 

 {
 "todo-tree.highlights.customHighlight": {
        "BUG": {
            "icon": "bug",
            "background": "#43BCCD",
            "foreground": "#fff"
        },
        "HACK": {
            "icon": "tools"
        },
        "FIXME": {
            "icon": "flame",
            "background": "#EA3546",
            "foreground": "#fff"
        },
        "XXX": {
            "icon": "$(close)",
            "background": "#F9C80E",
            "foreground": "#fff"
        },
        "TODO": {
            "background": "#F9C80E",
            "foreground": "#fff"
        }
    }
}

위와같이 설정하면 아래처럼 하이라이트 컬러가 반영된다

프로젝트 내에서 여기 저기 남발했을(ㅠㅋㅋㅋ) TODO와 BUG들은 왼쪽 메뉴중 Todo Tree 메뉴에서 한눈에 확인할 수 있다

 

어쩐지 자꾸 이렇게 잔 스킬들만 늘어가는 느낌......

그치만.... 알록달록한 화면으로 코딩하면 기분이 죠습니다!!!