Flutter 시작 시 기본 설정

flutter를 vscode에서 코드 작업을 하다보면 dart indent가 2로 설정이 되어서 은근 가독성이 좋지 않다...(저는 4에 익숙해서...)

이걸 4로 변경 하려고 하니 search를 잘 못 한거인지 모르겠지만... dart에서 2로 사용 하는게 기본 문법으로 되어 있는걸로 보이고... 4로 변경하면 오류가 발생하는걸로 보인다...

 

그러다가 youtube에서 flutter 개발 하는 영상을 봤는데, 아래 이미지처럼 Child component의 Tree 구조를 대쉬'-'로 잘 볼 수 있었다.

이게 VScode 별도의 extension 인 줄 알고 찾아 봤는데... 그건 아니였고...

기본 flutter & dart Extension에서 옵션으로 있는거라 활성화만 시켜주면 되는거였다...

 

우선 vscode setting 에서 Preview Bazel Workspace Custom Scripts를 활성화 시켜준다.

 

 

다음으로는 Preview Flutter Ui Guides를 검색 후 Preview Flutter Ui Guides와 Preview Flutter Ui Guides Custom Tracking를 활성화 시켜준다.

 

그럼 아래처럼 tree 구조로 볼 수 있다!