[flutter] vscode에서 flutter로 개발할 때 유용한 환경 설정하기

1. vscode에서 setting.json 열기

우선 vscode에서 환경 설정을 하려면 setting.json 파일을 열어야 한다. vscode 상단의 search 영역을 누른 뒤 아래 내용을 입력해 setting.json 파일을 연다.

> Open User Settings(JSON)

vscode search 영역을 클릭한 후 > 을 입력했을 때

 

2. 유용한 setting 설정

(1) editor.formatOnSave: 코드 자동 정렬

formatOnSave를 사용하면 저장 시 코드가 자동으로 정렬된다. 이때 쉼표를 기준으로 줄바꿈해서 format하니까 줄을 바꾸고 싶으면 쉼표를 코드 뒤에 붙이면 된다. 그리고 ruler를 사용하면 format을 할 때 한 줄에 넣을 글자의 개수를 제한해줄 수 있다.

"[dart]": {
    "editor.formatOnSave": true,
    "editor.rulers": [80],
  },

 

(2) dart.previewFlutterUiGuides: 위젯의 부모 자식 관계 시각화

위젯의 부모, 자식 관계를 tree 형태로 나타낸다.

"dart.previewFlutterUiGuides": true

 

(3) editor.codeActionsOnSave: const 자동으로 붙이기

flutter로 개발하면 const를 붙이라는 warning이 많이 발생하는데, 이 codeActionsOnSave는 const를 자동으로 붙여 warning을 해결해준다.

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

 

참고

Flutter 로 웹툰 앱 만들기 – 노마드 코더 Nomad Coders

Recommended Settings - Dart Code - Dart & Flutter support for Visual Studio Code