2025년 12월 31일 (수) 05:24 기준 최신판

개요

VSCode로 플러터를 사용하는 이들을 위한 팁과 지식.

설치에 대한 것은 플러터:개요 - 학교의 모든 지식. SMwiki을 참고하자.


VSCode	프로젝트 시작. ctrl+shift+p에서 flutter를 기입해 적절한 것을 선택해 시작한다. 유의: 프로젝트명은 알파벳 소문자로만 구성한다. 애뮬레이터. 우측 하단에 자신이 사용하고 있는 OS 이름이 있을 텐데, 이곳에서 에뮬레이터를 고를 수 있다.(아래 참고. 크롬 및 안드로이드 스튜디오에서 설치한 에뮬레이터 사용 가능.) 앱 실행. 에뮬레이터 실행 후 크게 3가지 방법이 있다. Run and Debug, main 함수 위에 뜬 Run 클릭, F5 이후 vscode 상단에 앱의 실행과 관련된 버튼들이 나타난다. vscode ctrl+shift+p에서 Emulator 선택하면 쓸 수 있다.(세팅에서 항상 top에 있게 하면 보기 편하다.)	에뮬 켜는 데 시간 좀 걸린다.
터미널	터미널은 powershell로 열게 하면 좋다.

setting.json 옵션

보통은 다 True로 되어 있어 사용하고 있을 것이다.

extention	설명	비고
editor.formatOnSav	내부의 editor.formatOnSave 값을 True로 해주면 저장할 때 자동으로 줄맞춤을 해주어 가독성을 높여준다.
source.fixAll	True로 해주면 저장할 때 자잘한 오류들을 고쳐준다.

팁

Refector

편집을 하다 보면 Column을 가운데 정렬해야 한다든가, 다른 요소 안에 집어넣어야 할 때가 있다. 그러면 감싸는 위젯을 위에서 작성하고 아래에선 괄호를 닫아주어야 하는데.. Refector 메뉴(ctrl + . ) 을 사용하면 간단하게 할 수 있다.

@@ 15번째 줄: / 15번째 줄: @@
 : ctrl+shift+p에서 flutter를 기입해 적절한 것을 선택해 시작한다.
+: 유의: 프로젝트명은 알파벳 소문자로만 구성한다.
 * 애뮬레이터.
-: 우측 하단에 자신이 사용하고 있는 OS 이름이 있을 텐데, 이곳에서 에뮬레이터를 고를 수 있다.(안드로이드 스튜디오에서 설치한 에뮬레이터 사용 가능.)
+: 우측 하단에 자신이 사용하고 있는 OS 이름이 있을 텐데, 이곳에서 에뮬레이터를 고를 수 있다.(아래 참고. 크롬 및 안드로이드 스튜디오에서 설치한 에뮬레이터 사용 가능.)
 * 앱 실행. 에뮬레이터 실행 후 크게 3가지 방법이 있다. Run and Debug, main 함수 위에 뜬 Run 클릭, F5 이후 vscode 상단에 앱의 실행과 관련된 버튼들이 나타난다.
+vscode ctrl+shift+p에서 Emulator 선택하면 쓸 수 있다.(세팅에서 항상 top에 있게 하면 보기 편하다.)
 |에뮬 켜는 데 시간 좀 걸린다.
+|-
+|터미널
+|터미널은 powershell로 열게 하면 좋다.
+|
 |}
+=== 추천 익스텐션 ===
 {| class="wikitable"
 |+
@@ 41번째 줄: / 49번째 줄: @@
 |
 |-
-|
+|Bracket Pair Colorizer 2
-|
+|괄호가 많이 생기면 헷갈리는데, 색으로 짝이 되는 괄호를 표시해준다.
 |
 |}
@@ 61번째 줄: / 69번째 줄: @@
 |
 |}
+= 팁 =
+=== Refector ===
+편집을 하다 보면 Column을 가운데 정렬해야 한다든가, 다른 요소 안에 집어넣어야 할 때가 있다. 그러면 감싸는 위젯을 위에서 작성하고 아래에선 괄호를 닫아주어야 하는데.. Refector 메뉴(ctrl + . ) 을 사용하면 간단하게 할 수 있다.

extention	설명	비고
Flutter Riverpos Snippets	상태관리, 관련 코드를 불러와준다.
Dart Data Class Generator	데이터클래스 생성 시 ctrl+. 을 통해 중복코딩 피하게 도움.
Error Lens	에러나 실수를 라인별로 알려준다.
Bracket Pair Colorizer 2	괄호가 많이 생기면 헷갈리는데, 색으로 짝이 되는 괄호를 표시해준다.