VSCode에서 플러터 개발이 편리해지는 설정

즐겁게 플러터 개발을 하고 계신가요? 저는 이제 막 플러터 개발을 익히고 있는데요. VSCode(비주얼 스튜디오 코드)에서 플러터의 개발을 할 때 시간이 절약되는 기능과 설정을 정리해 보겠습니다.

---

트리 구조 가이드 보기

코드 구조를 파악하기 쉽게 하는 여러 확장 기능이 있지만 이 설정이 가장 보기 편한 것 같습니다.

트리 구조로 보이는 상태

 

설정 방법

1. 커맨드 팔레트(ctrl + shift +p )에서 Preferences: Open Setting()을 선택해서 setting.json파일을 열어줍니다.

2. JSON에서 다음 항목을 추가합니다.

{
    "dart.previewFlutterUiGuides": true,
    "dart.previewFlutterUiGuidesCustomTracking": true,
}

3. VSCode를 재시작해주면 트리 표시가 가능합니다.

---

파일이 저장될 때 자동으로 수정되게 하기

파일을 저장할 때 소스를 자동으로 수정하게 해 주거나 import순서를 정리하게 해 줄 수 있습니다.

 

설정 방법

1. 커맨드 팔레트(ctrl + shift +p )에서 Preferences: Open Setting()을 선택해서 setting.json파일을 열어줍니다.

2. JSON에 다음 항목을 추가합니다.

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

 

fixAll은 problems 에 나오는 문제점들을 자동으로 수행해 줍니다. 예를 들어 아래 소스에서는 4개의 문제점을 지적하고 있는데요.

fixall을 하고 나면 아래와 같이 수정될 수 있는 부분은 자동으로 수정해 줍니다.

organizeImports 설정은 Effecitve Dart의 모범 사례로 import의 순서를 바꿔줍니다.

---

클래스명 변경 시 파일명 자동으로 변경

클래스명을 변경하면 파일명도 자동적으로 변경되는 설정입니다.  다른 파일의 참조 링크 또한 변경해 줍니다.

다만 아래와 같은 조건이 있습니다.

• Dart SDK버전이 2.15 이상
• 클래스명과 파일명이 일치해야 할 것(대문자, 소문자, 밑줄 무시)

설정 방법

setting.json파일에서 아래 설정을 추가합니다.

{
    "dart.previewLsp": true,
    "dart.renameFilesWithClasses": "always",
}

---

개발을 편리하게 하는 설정은 개인의 특성마다 다르니 설정을 한번 해보고 편리하면 이용해 보세요. 개인적으로 제일 추천하는 설정은 위젯의 트리 구조로 파악하게 해주는 설정입니다.

 

여기까지 읽어주셔서 감사합니다.