![[Flutter] 플러터 개발을 위한 VS code 필수 확장 프로그램 및 설정 정리](https://image.inblog.dev?url=https%3A%2F%2Finblog.ai%2Fapi%2Fog-custom%3Ftitle%3D%255BFlutter%255D%2B%25ED%2594%258C%25EB%259F%25AC%25ED%2584%25B0%2B%25EA%25B0%259C%25EB%25B0%259C%25EC%259D%2584%2B%25EC%259C%2584%25ED%2595%259C%2BVS%2Bcode%2B%25ED%2595%2584%25EC%2588%2598%2B%25ED%2599%2595%25EC%259E%25A5%2B%25ED%2594%2584%25EB%25A1%259C%25EA%25B7%25B8%25EB%259E%25A8%2B%25EB%25B0%258F%2B%25EC%2584%25A4%25EC%25A0%2595%2B%25EC%25A0%2595%25EB%25A6%25AC%26tag%3DTemplate%2B1%26description%3D%26template%3D3%26backgroundImage%3Dhttps%253A%252F%252Fsource.inblog.dev%252Fog_image%252Fdefault.png%26bgStartColor%3D%25232b8fe2%26bgEndColor%3D%25232b8fe2%26textColor%3D%2523000000%26tagColor%3D%2523000000%26descriptionColor%3D%2523000000%26logoUrl%3D%26blogTitle%3DGyeongwon%2527s%2Bblog&w=2048&q=75)
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