Flutter를 위해 추천하는 VS Code 확장들#

이 확장들은 제가 Flutter와 Dart 기반의 프로젝트에서 자주 사용하는 것들이에요.
그리고 VS Code도 좋지만 Cursor라는 도구도 한번 써보세요. 확장과 설정을 그대로 가져가서 쓸 수 있어요.

ARB Editor#

• 설명: ARB Editor는 Flutter의 다국어 지원(Localization)을 위해 사용하는 .arb(Application Resource Bundle) 파일을 쉽게 편집할 수 있게 도와주는 확장이에요.
• 장점: JSON 기반의 .arb 파일을 직관적으로 편집할 수 있어, 다국어 지원 작업이 편리해요. 키 값에 대한 자동 완성과 언어별 값 비교 기능도 제공해요.

Awesome Flutter Snippets#

• 설명: Flutter 개발을 가속화하는 코드 스니펫 모음이에요. 자주 사용하는 코드 패턴을 빠르게 입력할 수 있도록 도와줘요.
• 장점: 복잡한 코드도 빠르게 작성할 수 있으며, 생산성을 높여줘요. 특히 위젯 생성, 상태 관리, API 호출 등을 위한 스니펫이 있어 개발 효율이 극대화돼요.

Build Runner#

• 설명: build_runner는 코드를 생성하는 다양한 도구를 관리하고 실행할 수 있는 확장이에요. 특히 코드 생성기 패키지에서 자주 사용돼요.
• 장점: JSON 직렬화, freezed 같은 코드를 자동으로 생성할 때 편리하며, 터미널에서 명령어를 일일이 입력할 필요 없이 코드 생성 및 빌드를 간편하게 수행할 수 있어요.

Colonize#

• 설명: 명령어를 통해 코드 라인 끝에 ; 세미콜론을 추가해주는 확장이에요.
• 장점: 코드를 작성할 때 클래스 생성자에서 세미콜론(;)을 반복적으로 입력하는 수고를 덜어주어 생산성을 높여줘요.

Dart#

• 설명: Dart 프로그래밍 언어를 지원하는 공식 확장이에요. Flutter 확장을 설치하면 자동으로 같이 설치되어서 직접 설치하지 않아도 돼요.
• 장점: Dart 언어에 대한 코드 완성, 디버깅, 문법 강조 등 기본적인 언어 지원 기능을 제공해요. Flutter 개발에 필수적이에요.

Error Lens#

• 설명: 코드에서 발생하는 오류와 경고를 코드 라인에 표시해주는 확장이에요.
• 장점: 오류 메시지를 인라인으로 보여주어 문제를 빠르게 인식하고 해결할 수 있게 도와줘요. 특히 빠른 오류 수정이 중요한 프로젝트에서 유용해요.

Figma for VS Code#

• 설명: Figma 디자인을 직접 VS Code에서 열고, 관련된 코드나 에셋을 쉽게 추출할 수 있게 도와줘요.
• 장점: 디자인 파일과 코드를 쉽게 연동할 수 있어, 개발자와 디자이너 간의 협업을 원활하게 해줘요.

Flutter#

• 설명: Flutter 개발을 위한 공식 VS Code 확장이에요.
• 장점: Flutter 위젯에 대한 자동 완성, 디버깅, Hot Reload, Flutter Doctor 등의 기능을 통해 Flutter 개발 경험을 크게 향상시켜요. 가장 기본적이고 필수적인 도구예요.

Flutter Intl#

• 설명: Flutter 애플리케이션에 다국어 지원을 추가할 수 있도록 도와주는 확장이에요.
• 장점: intl 패키지를 사용하여 다국어 지원을 자동화하고, 번역 파일을 쉽게 관리할 수 있어요. 다국어 앱을 개발할 때 매우 유용해요.

Flutter Riverpod Snippets & Riverpod Snippets#

• 설명: Riverpod 상태 관리 패키지를 사용하는 Flutter 개발자를 위한 코드 스니펫 모음이에요.
• 장점: Riverpod의 Provider, Consumer 등 자주 사용되는 구조를 빠르게 작성할 수 있어 상태 관리 로직 구현 속도를 높여요.

GitHub Copilot#

• 설명: GitHub에서 제공하는 AI 기반 코드 자동 완성 확장이에요.
• 장점: AI가 코드를 예측하여 제안해주므로, 개발 속도를 비약적으로 향상시킬 수 있어요. 특히 복잡한 로직을 작성할 때 유용해요.

GitHub Pull Requests#

• 설명: VS Code에서 바로 GitHub Pull Requests를 관리할 수 있는 확장이에요.
• 장점: GitHub에서 코드 리뷰와 PR을 처리하기 위해 브라우저를 열 필요 없이, VS Code 내에서 바로 리뷰, 코멘트, PR 승인을 할 수 있어 협업이 편리해져요.

Image Preview#

• 설명: 코드에서 참조하는 이미지를 VS Code 내에서 바로 미리 볼 수 있는 확장이에요.
• 장점: 코드에서 이미지 경로를 작성할 때, 직접 파일을 열어보지 않고 미리보기로 확인할 수 있어 개발 속도가 빨라져요.

Project Manager#

• 설명: 여러 프로젝트를 VS Code 내에서 쉽게 관리할 수 있도록 돕는 확장이에요. 여러 프로젝트를 왔다갔다 할 때, 정말 편하게 이동하고 있어서 간단한 기능이지만 제가 좋아하는 확장이에요.
• 장점: 자주 사용하는 프로젝트를 빠르게 전환할 수 있어, 여러 프로젝트를 동시에 진행하는 경우 매우 유용해요.

Sort Lines#

• 설명: 선택된 텍스트 줄을 알파벳순으로 정렬해주는 확장이에요.
• 장점: Dart, JSON, 또는 다양한 코드에서 줄을 정렬할 때 빠르게 사용할 수 있습니다. 가독성이나 관리 측면에서 유용해요.

TabOut#

• 설명: 코드 작성 중 닫힌 괄호, 큰따옴표 등의 위치에서 탭을 누르면 그 영역 밖으로 커서를 이동시켜주는 확장이에요.
• 장점: 코드를 작성할 때 불필요한 커서 이동을 줄여 생산성을 향상시켜요.

Version Lens#

• 설명: 패키지 파일에서 사용 중인 라이브러리들의 최신 버전을 바로 보여주는 확장이에요.
• 장점: pubspec.yaml 파일에서 패키지 버전을 관리할 때 유용하며, 최신 버전으로 업데이트할 수 있는 패키지를 바로 확인할 수 있어요.

YAML#

• 설명: YAML 파일을 위한 구문 강조 및 유효성 검사를 제공하는 확장이에요.
• 장점: pubspec.yaml 등 YAML을 사용하는 설정 파일의 오류를 쉽게 감지하고, 코드 가독성을 높일 수 있어요.

또 유용하다고 생각하시는 게 있다면 공유해주세요~!

Intelligence, imagination, and knowledge are essential resources, but only effectiveness converts them into results.

— Peter Drucker