Ⅰ. 필수 확장 프로그램
📌 1. Dart / Flutter
📌 2. Awesome Flutter Snippets
Ⅱ. 옵션 확장 프로그램
📌 1. Git Graph
📌 2. Gitmoji
📌 3. Material Icon Theme
📌 4. Prettier - Code formatter
Ⅲ. 추가 추천 플러그인 (필수는 아니지만 편리해요)
📌 1. Error Lens / REST Client
📌 2. Bracket Pair Color DLW
📌 VS Code 플러그인 추천:
앱 개발을 위한 필수 확장 프로그램
이전 포스팅에서
앱 개발을 할 때
Flutter 기반
VS Code(Visual Studio Code)를 사용하면
편리하다는 내용을
기재하였습니다.
이와 더불어, 특히,
Flutter 및 Dart 개발을 위한
필수 플러그인을 설치하면
개발 속도를 높이고,
코드 품질을 개선할 수 있습니다.
이 포스팅에서는
앱 개발에 유용한
VS Code 확장 프로그램(플러그인)을
소개하고,
각 플러그인의 특징과 장점을
정리하겠습니다.
또한, VS Code
플러그인 설치 방법과
설정 가이드는
아래 포스팅을 참고하세요.
[앱 개발 기초] Windows 개발 환경 설정: VS Code 플러그인 설치 및 설정, 테마 및 폰트 설정(Fira Code 다
목차 Ⅰ. 서론: 왜 VS Code를 사용할까? 📌 1. VS Code가 Flutter 개발에 적합한 이유 📌 2. VS Code와 Android Studio 비교 Ⅱ. Windows에서 VS Code 설정하기 📌 1. Step 1: VS Code 다운로드 및 설
grmeems.tistory.com
1. 필수 확장 프로그램 🛠️
Dart / Flutter
1️⃣ Dart 🟦
🔹 설명
Dart는 Flutter 앱 개발의 기본 언어이므로, 이 확장 프로그램을 통해 Dart 코드 분석, 디버깅, 자동 완성 기능을 지원할 수 있습니다.
🔹 주요 기능
✅ 코드 자동 완성 → 빠르고 정확한 코드 작성 가능
✅ 에러 감지 및 코드 분석 → 실시간으로 코드 오류 확인
✅ 디버깅 지원 → Flutter 앱 개발 시 편리한 디버깅 가능
💡 Flutter 개발을 한다면 필수적으로 설치해야 하는 플러그인!
2️⃣ Flutter 🏗️
🔹 설명
Flutter 플러그인은 Flutter 프로젝트 관리 및 실행을 지원하는 필수 확장 프로그램입니다.
VS Code에서 Flutter 명령어 실행, 위젯 트리 확인, 디버깅 등을 편리하게 수행할 수 있습니다.
🔹 주요 기능
✅ Flutter 프로젝트 실행 및 Hot Reload 지원 → 코드 변경 후 즉시 반영
✅ Flutter 위젯 트리 탐색 → UI 디버깅이 편리함
✅ 디버깅 및 코드 리팩토링 기능 제공
💡 Flutter 개발에 반드시 필요한 필수 플러그인!
Awesome Flutter Snippets
3️⃣ Awesome Flutter Snippets ✨
🔹 설명
Flutter에서 UI를 만들 때 자주 사용하는 위젯들의 보일러플레이트(반복되는 코드)를 자동으로 생성해주는 플러그인입니다.
이를 활용하면 개발 속도를 대폭 향상할 수 있습니다.
🔹 주요 기능
✅ 자주 사용하는 Flutter 코드 자동 완성
✅ 반복되는 보일러플레이트 코드 제거
✅ 생산성 향상을 위한 다양한 코드 스니펫 제공
💡 Flutter UI 개발을 빠르게 하고 싶다면 필수!
2. 옵션 확장 프로그램 🎨
Git Graph
4️⃣ Git Graph 🟣
🔹 설명
Git 브랜치 및 커밋 히스토리를 가시적으로 볼 수 있는 플러그인으로,
버전 관리를 효과적으로 할 수 있도록 도와줍니다.
🔹 주요 기능
✅ Git 브랜치 흐름을 한눈에 확인 가능
✅ 커밋 내용 관리 및 비교 기능 제공
✅ 직관적인 UI로 Git 상태를 쉽게 파악 가능
💡 Git을 활용한 협업이 많다면 강력 추천!
Gitmoji
5️⃣ Gitmoji 😆
🔹 설명
Git 커밋 메시지에 이모지를 자동으로 추가해주는 플러그인입니다.
이모지를 활용하면 커밋 로그를 더욱 가독성 있게 만들 수 있습니다.
🔹 주요 기능
✅ 커밋 메시지에 적절한 이모지 자동 추천
✅ 프로젝트 변경 사항을 시각적으로 표현 가능
✅ 협업 시 커밋 로그를 더욱 직관적으로 관리 가능
💡 팀 프로젝트에서 커밋 로그를 깔끔하게 정리하고 싶다면 추천!
Material Icon Theme
6️⃣ Material Icon Theme 🎨
🔹 설명
VS Code의 파일 및 폴더 아이콘을 더 직관적으로 정리된 형태로 표시해주는 플러그인입니다.
아이콘 디자인이 깔끔해서, 여러 개의 폴더를 한눈에 파악하기 쉬워집니다.
🔹 주요 기능
✅ 지원하는 아이콘 종류가 많아, 모든 파일 유형에 아이콘 적용 가능
✅ 폴더 및 파일을 한눈에 구분할 수 있도록 정리됨
✅ 코드를 시각적으로 정돈하여 관리 효율성 향상
💡 VS Code 환경을 깔끔하고 체계적으로 정리하고 싶다면 추천!
Prettier - Code formatter
7️⃣ Prettier - Code formatter 🎨
🔹 설명
Prettier는 코드 자동 정렬 및 포맷팅을 도와주는 플러그인으로,
Flutter뿐만 아니라 다양한 프로그래밍 언어의 코드 스타일을 맞춰서 일관성 있는 코드 작성이 가능합니다.
🔹 주요 기능
✅ 코드 스타일 자동 정렬 및 포맷팅
✅ 불필요한 공백 및 들여쓰기 오류 자동 수정
✅ 다양한 프로그래밍 언어 지원 (Dart, JavaScript, TypeScript 등)
💡 코드를 깔끔하게 유지하고 싶다면 필수!
추가 추천 플러그인 (필수는 아니지만 편리해요)
Error Lens / REST Client
8️⃣ Error Lens ⚠️
🔹 설명
코딩을 하다 보면 에러 메시지가 작은 경고창으로만 표시되어 쉽게 놓칠 때가 많죠?
Error Lens 플러그인은 코드 라인에서 바로 오류 메시지를 강조 표시해주므로,
실시간으로 오류를 확인하고 빠르게 수정할 수 있도록 도와줍니다.
🔹 주요 기능
✅ 오류 및 경고 메시지를 코드 라인에 직접 표시
✅ 코드를 읽을 때 빠르게 오류를 파악 가능
✅ Flutter/Dart뿐만 아니라 다양한 언어에서도 지원
💡 코딩하면서 빠르게 오류를 찾고 싶다면 필수
9️⃣ REST Client 🌐
🔹 설명
앱 개발에서 백엔드 API를 호출하여 데이터를 가져오는 작업은 필수입니다.
VS Code에서 Postman 없이 API 테스트를 직접 수행할 수 있도록 도와주는 플러그인이 바로 REST Client입니다.
🔹 주요 기능
✅ VS Code 내부에서 HTTP 요청을 테스트 가능
✅ Flutter의 http 패키지를 사용하기 전에 API 응답 확인 가능
✅ JSON 응답을 바로 확인할 수 있어, 디버깅에 유용함
💡 Flutter에서 API를 활용하는 앱을 만든다면 필수!
Bracket Pair Color DLW
🔟 Bracket Pair Color DLW 🌈
🔹 설명
Flutter UI를 개발하다 보면 중첩된 괄호 {}가 많아서 괄호 짝을 찾기 어려운 경우가 있습니다.
Bracket Pair Colorizer 2 플러그인은 각 괄호 쌍을 색상으로 구분하여 가독성을 높여줍니다.
[Deprecated] Bracket Pair Colorizer 2의 다른 버전이에요
🔹 주요 기능
✅ 중첩된 {} 괄호를 컬러로 표시하여 가독성 향상
✅ 괄호의 시작과 끝을 한눈에 확인 가능
✅ Dart, JavaScript, Python 등 여러 언어 지원
💡 Flutter UI 코드 작성할 때 구조를 쉽게 이해하고 싶다면 강력 추천!