[Flutter] VSCode Settings : 플러터 개발을 편하게 하기위한 VSCode 환경설정

 

📎 Save(Ctrl+S) 저장 시 코드 자동 수정 기능

 

VSCode Settings > Command Palette (Ctrl+Shift+P) > open user settings (JSON) 입력

JSON 파일을 열어서 아래와 같이 추가해 준다.

 

"editor.codeActionsOnSave": {

     "source.fixAll": true,

}

위 코드를 추가해 주면 저장할 때 constant여야 하는 변수들은 알아서 const를 붙여준다.

 

"[dart]": {

     "editor.formatOnSave": true,

},

위 코드도 추가하면 저장할 때 알아서 코드 라인을 정리해 준다.

마지막에 ,(콤마)를 붙여주면 라인 정리를 해 줌.

 

 

📎  위젯 트리 한눈에 보기 위한 설정

 

"dart.previewFlutterUiGuides": true, 

위와 같이 코드를 추가하고

VSCode를 ⭐재실행 ⭐ 하면,

 

위와 같이 Widget Tree를 보기 쉽게 정리해 주는 라인이 표시된다.

 

 

📎 코드 에러 한눈에 보기

 

VSCode Extension에서 Error Lens를 검색해서 설치하면,

 

위와 같이 에러나 수정이 필요한 사항들을 한눈에 볼 수 있다.