VScode 에서 파일구조를 그려보자! (file-tree-generator)

 

여태껏 README.md 파일에 파일 구조를 옮겨 적을 때

tree 명령어를 쳐서 나온 결과물을 그대로 복붙해왔었다.

 

이번에 서버팀 내에서 typescript template 제작을 맡게 되었는데,

내 템플릿의 구조를 설명할 때, 좀 더 편리하고 예쁘게 파일 구조를 알릴 수 있는 방법이 없을까 찾아보다가

발견한 vscode extension 이다.

 

 

 

file-tree-generator

 

 

vscode 의 extenstions 탭에서 file-tree-generator 를 검색하자.

 

 

 

바로 저 확장프로그램이다. 설치해주도록 하자!

 

 

 

이제 내가 구조를 표현하고 싶은 폴더에서 우클릭을 하고, Generate to Tree 를 선택해주자.

 

 

 

그럼 아래와 같은 결과물을 얻을 수 있다.

 

 

 

icon 을 on/off 할 수 있는 기능이 있는데,

나는 개인적으로 아이콘이 있는게 훨씬 좋아보였다.

 

해당 내용을 복사/붙여넣기 하여 자유롭게 쓰면된다.

 

 

추가로, 노션에다 붙여넣으면 아래와 같이 예쁘게 표현된다.

 

 

 

 

 

여러 문서를 작성할 때, 큰 도움이 될 것 같다!