[VSCODE 사용자 팁] UI Guide, Custom Snippets, Widget wrapping 환경설정

VSCODE를 사용하시는 분들은

선생님 화면과 같이 Widget tree를 보이게 설정하는 방법과

Custom Snippets 환경 설정하는 방법 및

Widget wrapping 밥법을 알려드리려고 합니다.

android studio를 쓰는게 아니라

1. UI Guide

1. vscode preference 진입

2. 검색창에 "ui guide" 검색

3. "Dart: Preview Flutter Ui Guides" 체크

4. "Dart: Preview Flutter Ui Guides Custom Tracking" 체크

   위와같이 설정하면 아래 사진처럼 바뀜

   

Widget Wrapping

padding을 상단에 Widget에 추가하고자 한다면 Wrapping을 써야함.

하지만 선생님과 다른 ide 환경에선 단축키를 모를 가능성이 큼.

단축키 :

그럼 아래와 같은 창이 나오게됨.

Custom Snippets

이건 여기서 설명하는것보단

잘설명된 블로그 링크로 타고 들어가 보는게 낫습니다.

https://kamang-it.tistory.com/entry/VisualStudioCode%EC%BB%A4%EC%8A%A4%ED%85%80-%EC%9E%90%EB%8F%99%EC%99%84%EC%84%B1-%EB%A7%8C%EB%93%A4%EA%B8%B0Snippet-ex-LiveTemplate

{
"JsonSerialize.FromJson": {
		"prefix": "factory JsonSerializable FromJson",
		"body": [
			"factory $1.fromJson(Map<String, dynamic> json)\n=> _$$1FromJson(json);",
			"$0"
		],
		"description": "JsonSerializableFromJson snippets"
		},
"@JsonSerialize": {
		"prefix": "JsonSerializable",
		"body": [
			"import 'package:json_annotation/json_annotation.dart';",
			"",
			"part '${TM_FILENAME_BASE}.g.dart';",
			"",
			"@JsonSerializable()",
			"class $1 {",
			" final $2",
			"",
			"  $1({",
			"   required this$3",
			"   });",
			"",
			"  factory $1.fromJson(Map<String, dynamic> json) =>",
			"  _$$1FromJson(json);",
			"}"
		],
		"description": ""
		},
}

$1이 커서 위치이고, 동시에 같은 변수명을 입력해야한다면

$ 표시 뒤의 숫자를 동일하게 적용해도 무방합니다.

"part '${TM_FILENAME_BASE}.g.dart';",

"TM_FILENAME_BASE" 이 부분이 snippet을 사용할때 가장 편한 부분이다.

현재 파일 이름을 사용하지만 확장자는 제거한 이름을 자동으로 넣어주는 명령어이다.

자세한 사항은 아래 링크에서 찾아보시고 본인이 필요한 것을 쓰시면 됩니다.

https://code.visualstudio.com/docs/editor/userdefinedsnippets