[Flutter] 플러터 개발을 위한 VS code 필수 확장 프로그램 및 설정 정리

Flutter 앱 개발을 시작하기 전, 개발 효율을 높이기 위해 미리 세팅해두면 좋은 VS Code 확장 프로그램(extension)들과 유용한 설정들을 정리해봤습니다.
도경원's avatar
Aug 08, 2025
[Flutter] 플러터 개발을 위한 VS code 필수 확장 프로그램 및 설정 정리
Flutter 앱 개발을 시작하기 전, 개발 효율을 높이기 위해 미리 세팅해두면 좋은 VS Code 확장 프로그램(extension)들과 유용한 설정들을 정리해봤습니다.

1. Flutter 관련 필수 확장 프로그램

확장명
설명
Dart
Dart 언어 지원. Flutter 개발의 핵심 언어
Flutter
Flutter SDK 연동 및 UI 미리보기, 디버깅 기능 지원
Awesome Flutter Snippets
자주 쓰는 Flutter 코드 스니펫 제공 (stful, init, builder 등)
Dart Import
자동 import 정리 및 최적화 (ctrl+shift+p → organize imports)
Pubspec Assist
pubspec.yaml 편하게 관리: 의존성 자동 추가 가능
Dart Data Class Generator
Dart 클래스를 자동으로 copyWith, toJson, fromJson 등 생성
Freezed
불변 데이터 클래스 생성 지원 (freezed_annotation 사용 시 유용)
Flutter Riverpod Snippets
Riverpod 상태 관리용 스니펫 제공 (ref.watch, ConsumerWidget 등)

2. 유용한 확장 프로그램 및 VS Code 설정 (settings.json)

확장명
설명
Remove Comments
주석을 한 번에 정리할 수 있는 확장
Error Lens
에러/워닝을 더 잘 보이도록 강조 표시
Image Preview
프로젝트 내 이미지 파일을 VS Code 안에서 바로 미리보기 가능
"editor.codeActionsOnSave": { "source.fixAll": true }
저장 시 자동으로 모든 문제를 고칠 수 있는 코드 액션 실행
(불필요한 import 제거, 포매팅 등 포함)
 
Share article

Gyeongwon's blog