Flutter vsCode 완소 세팅방법

안녕하세요. 오늘은 vsCode를 이용서 Flutter 프로그래밍을 할 때 정말 유용한 세팅 방법을 공유하고자 합니다. 

 

 

vsCode의 화면 왼쪽 하단에 톱니바퀴 모양의 'Manage' 버튼을 클릭한 뒤 [Command Palette...]를 클릭합니다. 

 

화면의 상단에 입력창이 뜨게 되는데 여기에서 'open user settings'를 입력한 뒤 나오는 드롭박스 메뉴 중 아래쪽에 [Open User Settings(JSON)]를 찾아서 클릭합니다. 

 

화면과 같이 'settings.json'파일이 열립니다. 

 

화면의 왼쪽이 원본입니다. 화면의 오른쪽과 같이 중간에 다음의 코드를 추가로 입력해 줍니다. 

 

"editor.codeActionsOnSave": {
        "source.fixAll": true
},
"dart.previewFlutterUiGuides": true,

 

위의 코드를 적용시켜주면 저장시에 프로그램에서 추천하는 수정사항을 자동으로 반영하게 됩니다. 예를 들면 flutter 프로그래밍을 하다보면 변수 앞에 const를 붙이라고 제안하는 경우가 많은데 이것들이 일일이 적지 않아도 저장 시 자동으로 반영됩니다.  

 

제일 마지막 줄의 내용은 부모 자식간의 관계를 보조선으로 표시해주어 프로그래밍을 할 때 굉장히 편리합니다. 

 

vsCode를 닫고 재실행을 시켜주면 우리가 작성한 코드에서 전에 보지 못한 흰색 점선을 발견할 수 있습니다. 이것이 상하 트리구조를 나타내주는 보조선으로 프로그래밍 시 정말 유용하게 사용할 수 있습니다.