[Flutter] 플러터 비주얼스튜디오코드 익스텐션 추천 / VSCode 플러터 익스텐션 모음

목차

 

---

이번에는 비주얼스튜디오 코드(Visual Studio Code)에서 

플러터를 개발할 때 유용한 익스텐션과 작업환경 설정을 다루어보도록 하겠다.

---

플러터 개발에 유용한 익스텐션 이외에도 

아래의 글에는 vscode로 개발할 때 유용한 익스텐션을 20개나 추천하고 있으니 참고하도록 하자.

 

비주얼 스튜디오 코드 익스텐션 20개 추천 / 확장 프로그램 설치

비주얼 스튜디오 코드 익스텐션 20개 추천 / 확장 프로그램 설치 및 웹 개발 환경 설정 (Visual Studio

---

플러터 비주얼스튜디오코드 필수 익스텐션

Flutter & Dart

 

 

 

플러터 비주얼스튜디오코드 익스텐션 추천

Awesome Flutter Snippets

현재 많은 사람들이 사용하고 있는 플러터 스니펫 익스텐션으로,

직접 작성하기에는 번거로운 클래스를 자동으로 생성해주는 기능을 한다.

 

예를 들어 Statefull 클래스를 작성해야 하는 부분에서 필요한 statefulW를 클릭만 하면 자동으로 코드가 완성이 된다. 

또한 클래스 이름이 들어가는 name 부분을 수정하면 모든 곳에 name이 변경되는 매우 좋은 익스텐션이다.

 

 

 

---

 

 

Dart Data Class Generator

이름에서 알 수 있듯이 데이터 클래스를 만들어주는 익스텐션으로, 중복되는 클래스를 코딩할 필요 없이 다트의 데이터 클래스를 쉽고 빠르게 만들어준다.

 

 

해당 익스텐션을 사용하기 위해서는

클래스에 마우스를 클릭하고 ctrl + .  단축키를 사용해 Generate data class를 클릭해서 사용할 수 있다.

 

 

 

 

---

 

 

Error Lens

Error Lens는 작성한 코드에 문제가 있을 때 즉시 하이라이팅으로 에러를 알려주는 익스텐션이다.

나도 모르게 잘못 작성한 코드를 시각화하여 보여주기 때문에 에러를 쉽게 잡을 수 있다

하이라이팅으로 ')'가 빠졌음을 알려준다.

 

 

---

 

advanced-new-file

생성하고자 하는 디렉터리를 하나하나 찾을 필요없이, 원하는 곳에 새로운 파일을 검색형태로 쉽게 생성할 수 있는 익스텐션이다.

 

 

단축키 cmd+alt+n (Mac), ctrl+alt+n (Win, Linux)

 

advanced-new-file 익스텐션 사용 방법

1. Ctrl + Alt + N 단축키를 누르면 검색창이 뜬다.

 

2. 검색창에 새로운 파일을 생성하고자 하는 폴더를 작성하고 엔터를 누른다. 

 

3. 생성하고자 하는 파일을 입력하고 엔터를 클릭한다.

 

4. 아래와 같이, 지정한 위치에 입력한 파일이 생성된다.

 

 

 

---

 

Version Lens

pubspec.yaml 파일에서 한번의 클릭으로 사용중인 패키지의 최신 버전을 확인할 수 있는 익스텐션이다.

 

 

 

 

Version Lens 익스텐션 사용 방법

1. pubspec.yaml 파일을 클릭한다.

 

2. 우측 상단에 V 모양을 클릭하면 파란색으로 활성화가 된다.

 

3. 사용중인 패키지의 '최신 버전'을 한번에 확인할 수 있다.

 

 

---

 

 

Pubspec Assist

pubspec.yaml 파일에서 패키지를 설치 후 별다른 작성없이, 패키지명만 입력하면 패키지를 설치할 수 있게 하는 익스텐션이다.

 

 

Pubspec Assist 익스텐션 사용 방법

1.  Ctrl + Shift + P 단축키로 커멘트 팔레트창을 연 후에 'pubs'를 입력 후 선택한다.

 

 

2.  설치를 원하는 패키지명을 입력 후 엔터를 클릭하면 최신 버전으로 설치가 된다.

 

 

---

 

 

Flutter Tree

한줄의 코드로 child 위젯들을 Tree 형태로 자동 생성해주는 익스텐션이다. UI를 짤 때 위젯들을 child나 children을 써서 내려가야 하는데, 그러한 번거로움 없이 자동으로 만들어준다.

 

---

Flutter Tree 익스텐션 사용 방법

1. '>' 기호로 구분해 child 위젯을 생성할 수 있다.

 

하나의 child 위젯을 생성하는 코드:

SingleChildWidget>Child

결과: 

SingleChildWidget(
    child: Child(),
),

---

다수의 child 위젯을 생성하는 코드:

MultipleChildWidget[ChildOne,ChildTwo]

결과: 

MultipleChildWidget(
    children: <Widget>[
        ChildOne(),
        ChildTwo(),
    ],
),

---

이웃된 child 위젯을 생성하는 코드( 쉼표[,]로 구분 ):

MultipleChild[ChildOne,ChildTwo>NestedChild>Child]

결과: 

MultipleChild(
    children: <Widget>[
        ChildOne(),
        ChildTwo(
            child: NestedChild(
                child: Child(),
            ),
        ),
    ],
),

 

 

---

 

 

Tabnine AI Autocomplete for

다른 개발자들의 코드들과 자신이 자주 쓰는 코드를 AI로 분석해 자주 쓰이는 코드 구문을 추천하고 자동 완성 기능을 제공하는 익스텐션이다. 

 

ctrl + space 단축키로 사용한다. 다만 하루의 무료 사용량이 제한되어 있고, pro 라이센스를 구입해야 무한으로 사용이 가능하다.

 

---

 

 

플러터 개발에 매우 유용한 vscode setting.json 설치

[Flutter] 플러터 vscode 유용한 환경 설정 / 플러터 vscode 개발환경 세팅 설정 / setting json

[Flutter] 플러터 vscode 유용한 환경 설정 / 플러터 vscode 개발환경 세팅 설정 / setting json