[VSC][VisualStudioCode] code tree ui view 추가 설정 방법

 

 [ 목표 ]

 

 - 수정 전 예시

 

 - 수정 후 예시

 

Tree 형태로 depth를 더 쉽게 볼 수 있도록 해줍니다.

 

 

 

 

 

1. settings.json 파일 수정하기위해 open하기

 

https://growingsaja.tistory.com/1030

[VSC][VisualStudioCode] settings.json 수정하는 방법

 

 

 

 

 

2. 아래 코드 추가

 

// vim settings.json

{

    // ...

    "dart.previewFlutterUiGuides": true,    // code line에서 Tree구조로 depth가 잘 보이도록 해주는 UI 활성화
    
    // ...
    
}

 

 

 

 

 

3. 최종본 예시

 

// vim settings.json

{
    "workbench.colorTheme": "Default Dark+",
    "[dart]": {
        "editor.formatOnSave": true,
        "editor.formatOnType": true,
        "editor.rulers": [
            80
        ],
        "editor.selectionHighlight": false,
        "editor.suggest.snippetsPreventQuickSuggestions": false,
        "editor.suggestSelection": "first",
        "editor.tabCompletion": "onlySnippets",
        "editor.wordBasedSuggestions": false
    },
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "dart.previewFlutterUiGuides": true,    // code line에서 Tree구조로 depth가 잘 보이도록 해주는 UI 활성화
    "dart.openDevTools": "flutter"
}