Flutter Freezed Snippet 코드 - Freezed 자동 생성

VSCode(비주얼 스튜디오 코드)에서 "fileName.code-snippets" 형식으로 코드 Snippet(스니펫)을 정의하는 것이 가능하다.

여기서 Snippet(스니펫)이란?

: 재사용이 가능한 코드로 반복 입력을 피할 수 있도록 도와주는 것을 말한다. 템플릿으로 만들었다고 보면 된다.

이 스니펫을 활용하여 Freezed를 사용한 모델을 자동 생성할 수 있도록 만들어주려고 한다.

순서

---

1. vscode 폴더 안에 freezed.code-snippets 파일을 생성한다.

2. 아래 코드를 사용한다.

{
    "Generate freezed class": {
        "prefix": "freezed",
        "body": [
            "import 'package:freezed_annotation/freezed_annotation.dart';",
            "import 'package:flutter/foundation.dart';",
            "",
            "part '${TM_FILENAME_BASE}.freezed.dart';",
            "part '${TM_FILENAME_BASE}.g.dart';",
            "",
            "@freezed",
            "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}${2}/} with _$${TM_FILENAME_BASE/(.*)/${1:/pascalcase}${2}/} {",
            "  const factory ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}${2}/}({",
            "    required String userId,",
            "  }) = _${TM_FILENAME_BASE/(.*)/${1:/pascalcase}${2}/};",
            "",
            "  factory ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}${2}/}.fromJson(Map<String, Object?> json) => ",
            "      _$${TM_FILENAME_BASE/(.*)/${1:/pascalcase}${2}/}FromJson(json);",
            "}",
            ""
        ]
    }
}

+) 스닛펫을 사용했을 때 "import 'package:flutter/foundation.dart';", 부분에서 경고 메세지가 출력될 수 있지만 flutter pub run build_runner를 실행하고 나면 사라진다. "// ignore: unused_import",를 추가할 필요가 없다.

+) 파일명이나 파일의 경로 등의 변수가 미리 준비되어 있다.

· Snippets in Visual Studio Code

• TM_FILENAME: 파일 이름
• TM_FILENAME_BASE: 확장자가없는 파일 이름

3. 사용하려고 하는 모델 클래스에서 freez...를 입력한 후 위 코드의 prefix에서 지정한 freezed를 클릭한다.

4. freezed 패키지를 적용하여 모델이 자동 생성된다.

5. 해당 모델에 사용되는 변수들을 입력해 준다.

6. freezed랑 g 파일을 생성해 주기 위해 커맨드에 아래 명령문을 입력한다.

dart run build_runner build

flutter pub run build_runner build

7. 패키지가 적용된 모델이 작성되었다.

---

만약 한 클래스에서 하나의 freezed 클래스를 생성하는 것이 아니라 여러 freezed 클래스를 생성하고 싶은 경우는 다른 스닛펫을 하나 더 추가해주면 된다.

예를 들어, .vscode에 새로운 파일을 생성해주고

아래 코드를 작성해서 prefix에 지정된 단축키(예를 들어 freezed_class_only)를 불러 사용하면 된다.

{
    "Generate freezed class (not including import)": {
        "prefix": "freezed_class_only",
        "body": [
            "@freezed",
            "class ${name} with _$${name} {",
            "  const factory ${name}({",
            "    required String userId,",
            "  }) = _${name};",
            "",
            "  factory ${name}.fromJson(Map<String, Object?> json) => ",
            "      _$${name}FromJson(json);",
            "}",
            ""
        ]
    }
}