Flutter 개발자를 위한 필수 VSCode 확장 프로그램 추천!

Flutter로 앱을 개발할 때 VSCode(Visual Studio Code) 를 사용하면 가볍고 강력한 기능을 활용할 수 있어요. 하지만, 기본적인 기능만으로는 개발이 불편할 수 있기 때문에 꼭 설치해야 할 확장 프로그램(Extensions)이 있는데요. 이 글에서는 Flutter 앱을 개발할 때 반드시 설치해야 할 VSCode 필수 확장 프로그램을 소개하고, 각각의 기능과 사용법을 쉽게 설명해 드릴게요!

---

1. Flutter & Dart Extension

Flutter 개발한다면 이건 그냥 무조건 필수입니다! 이 확장 프로그램만 있으면 프로젝트 생성부터 실행, 디버깅까지 한 방에 해결돼요.

Extensions 마켓플레이스에서 Flutter를 검색한 모습 (설치 전)

🔹 주요 기능

• Flutter Doctor 실행으로 환경 체크
• 코드 자동 완성(Auto-completion) 지원
• UI 미리 보기(Widget Preview) 가능
• 디버깅(Debugging) 지원

👉 설치 방법

• VSCode에서 Extensions(Command + Shift + X)로 이동한 후 Flutter와 Dart를 검색 후 설치하세요!

💡 설치 팁

• Flutter Extension만 설치해도 자동으로 Dart Extension도 설치돼요.

 

Flutter/Dart 실제 사용 예시

설치를 완료한 이후에는 Command + Shift + P 를 눌렀을 때 Flutter를 검색하면 Flutter 관련 메뉴가 생성되어 있음. (설치 후)

 

 

첫 New Project 생성시 SDK 위치 미설정 에러 - 해결 방법

Flutter: New Project를 클릭했을 때, 오른쪽 아래에 다음과 같은 에러 메세지가 보일 수 있어요. Flutter 설치 글을 참고하여 SDK를 설치하셨다면, Locate SDK를 클릭해서 Flutter SDK를 설치한 위치를 골라주시고 아직 Flutter SDK를 설치안하셨다면 Download SDK를 통해서 Flutter SDK를 설치해주세요.

Flutter SDK Path가 미설정된 에러 메세지

설치했던 development/flutter 폴더를 선택해주는 모습

---

2. Flutter Widget Snippets Extension

Flutter 개발할 때 같은 코드 패턴을 반복해서 입력하는 일이 많죠? 이때 유용한 게 바로 Snippet(스니펫) 입니다! ✨ 스니펫은 미리 정의된 코드 조각을 입력하면 자동으로 완성해 주는 기능이에요. 예를 들어, StatelessWidget을 만들고 싶다면? 그냥 fstless 라고 입력하고 Enter 키만 누르면 완성된 코드가 자동으로 생성됩니다! 😎

Flutter Widget Snippets를 검색한 모습.

🔹 주요 기능

• fstless → StatelessWidget 자동 생성
• fstful → StatefulWidget 자동 생성
• finitlf → initState() 자동 생성
• fimpmat → Material 패키지 import 자동 생성
• 자주 쓰는 Flutter 위젯 및 함수들을 단축어로 빠르게 입력 가능

👉 설치 방법

• Flutter Widget Snippets 검색 후 설치

💡 설치 팁

• 다양한 Flutter Snippet extension이 있어요. 하나씩 눌러보면서 가장 이해하기 쉬운 단축어로 되어있는 스니펫으로 설치해보면 더 좋아요.

 

Flutter Widget Snippets 실제 사용 예시

각각의 명령어를 입력했을 때 만들어지는 snippets

---

3. Error Lens Extension

코드 짜다가 에러 났는데 어디서 난 건지 한참 찾고 있다면? 이거 꼭 설치하세요! 에러랑 경고 메시지를 코드 위에 바로 띄워줘서 시간 절약 가능합니다. ⏳

Error Lens를 검색한 모습.

 

🔹 주요 기능

• 오류 및 경고 메시지를 코드 위에 바로 표시
• 빌드 에러를 빠르게 수정 가능

👉 설치 방법

• Error Lens 검색 후 설치

 

Error Lens 실제 사용 예시

Error Lens를 설치하면 대괄호, 중괄호, 세미콜론을 지웠을 때 바로 해당 라인에 에러가 바로바로 보이게 돼요.

---

4. Flutter Tree Extension

복잡한 계층의 위젯을 만들 때 아주 쉬운 문법을 사용해서 만들 수 있기 때문에 개발 생산성이 확 올라갑니다!

Flutter Tree를 검색한 모습. Center 안에 Column이 있고, 2개의 자식 Widget이 있는 구조를 아주 간단하게 만들 수 있다.

🔹 주요 기능

• Flutter 프로젝트의 디렉토리 구조를 시각적으로 개선
• 위젯 계층을 더 쉽게 파악 가능

👉 설치 방법

• Flutter Tree 검색 후 설치

 

Flutter Tree 실제 사용 예시

실제로 설치 후, Scaffold 내에 Column을 추가해본 모습

위에서 의도한 대로 자동으로 잘 생성되는걸 확인했어요.

---

5. Better Comments Extension

코드에 주석 달 때 그냥 // 만 쓰지 마세요! 이 확장 프로그램을 쓰면 주석을 색깔별로 정리해서 한눈에 보기 쉽게 만들어 줍니다. 🎨

Better Comments를 검색한 모습. 띄어쓰기를 안하면 안나와요.

🔹 주요 기능

• 중요 주석에 색상을 적용하여 가독성 향상
• TODO, NOTE, FIXME 등의 키워드 강조

👉 설치 방법

• Better Comments 검색 후 설치

 

Better Comments 실제 사용 예시

사용 가능한 코멘트 기호들을 모두 사용해본 모습

 

설치하고 나면 *, !, ?, todo를 태그를 사용해서 코멘트 색깔과 의미를 더 분명히할 수 있어요! 더 많은 태글르 사용하고 싶다면 설치하고 나서 better-comments.tag 에 다른 기호나 태그를 정의해서 사용할 수도 있어요.

---

마무리하며

제가 실제로 설치해서 사용하고 있는 Extension들에 대해서 추천해봤어요. 여기까지 읽으셨다면, 이제 VSCode 확장 프로그램으로 개발 환경을 빡! 업그레이드할 준비가 완료됐어요! Flutter 개발이 훨씬 더 편해질 거예요. 💪🔥

 

📌 당장 필요한 확장 프로그램부터 하나씩 설치해 보세요!

💡 Flutter 개발을 한다면 1, 2번은 필수로 설치해주세요!

 

다음 포스트에서는 VSCode 커스텀 폰트 설정에 대해서 알아볼게요.