1 분 소요

VSCode(Visual Studio Code)로 플러터(Flutter)를 개발할 때, 생산성을 향상시켜줄 수 있는 유용한 Extention을 소개합니다.

VSCode extension for Flutter Development

1. Flutter

플러터 개발을 위한 기본 확장 프로그램. 플러터 개발환경을 셋팅하면서 가장 먼저 설치하는 Extension입니다.

img1

2. Material-Icon-Theme

VSCode의 아이콘을 Material Style로 설정해줍니다. Material Style의 디자인을 좋아한다면 추천합니다.

img3

3. Bracket Pair Colorizer 2

괄호별로 다른 컬러를 입혀 변수, 함수, 클래스의 구분을 도와줍니다. 코드가 길어질 경우 괄호 때문에 에러가 나는 일이 다분합니다. 경험상 이러한 사고를 확실히 줄여줍니다.

img4

4. Awesome Flutter Snippets

이름 그대로 Awesome한 기능을 가진 스니펫입니다. 플러터 개발의 생산성을 확실히 높여줍니다.

예를 들어 StatefullWidget을 만들어야 할 때, StatefullWidget을 만들고 State도 만드는 과정이 상당히 번거롭습니다. 이 스니펫은 StatefulW만 입력하면 한번에 다 만들어줍니다. 🤩

img5

5. Flutter Tree

플러터로 UI를 개발할 때 Widget Tree를 한방에 만들어주는 도구입니다. 예를 들어서 Column 위젯 안에 Text 위젯 2개를 만들때 아래 코드 단 한줄이면 코드가 자동완성됩니다.

img6

6. Error Lens

에러를 찾기 쉽게 하이라이팅 해주는 도구입니다. 에러를 시각화하여 보여주기 때문에 디버깅 시간을 줄이는 것에 도움이 됩니다.

img6

7. Tabnine AI Autocomplete

코드 자동완성(Ctrl + Space)에 AI가 추천하는 코드가 나옵니다. 내가 자주 쓰는 코드나 사람들이 자주 쓰는 코드를 추천해줍니다.

img7

8. GitHub Copilot

Tabnine 상위호환으로 MicroSoft에서 인수한 Github의 야심작입니다. 사람들이 Github에 public으로 업로드한 소스코드들을 분석해서 AI가 코드를 추천해줍니다. 한줄단위 뿐만 아니라 함수 단위까지 가능한 어메이징한 Extension입니다.

img8