【Flutter】Freezed用VS Codeスニペット作ってみた

面倒なFreezedの記述を楽にしたくありませんか？
このスニペットを使えばdartファイル名に対応するFreezed用クラスを一瞬で作れます。

State用

StateNotifierのStateなどに使う想定です。

スニペット

dart.jsonに以下のJsonを追記します。

dart.json

{
    "Freezed State": {
        "prefix": "freezedstate",
        "body": [
            "// ignore: unused_import",
            "import 'package:flutter/foundation.dart';",
            "import 'package:freezed_annotation/freezed_annotation.dart';",
            "",
            "part '$TM_FILENAME_BASE.freezed.dart';",
            "",
            "@freezed",
            "abstract class ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}} with _$${1} {",
            "  const factory ${1}({",
            "    required ${2:String id},",
            "  }) = _${1};",
            "}",
        ],
        "description": "Freezed State"
    },
}

一部解説

1. // ignore: unused_importは保存時のimport修正でfoundationのimportが消えないようにしてます。
2. TM_FILENAME_BASEでファイル名からpartを埋めます
3. ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}}でファイル名をパスカルケースに変換してクラス名を自動で決めてます。

使用例

hoge_state.dartというファイルでfreezedstateと入力すると以下のようになります。

hoge_state.dart

// ignore: unused_import
import 'package:flutter/foundation.dart';
import 'package:freezed_annotation/freezed_annotation.dart';

part 'hoge_state.freezed.dart';

@freezed
abstract class HogeState with _$HogeState {
  const factory HogeState({
    required String id,
  }) = _HogeState;
}

Json変換用

APIから受け取るJsonのパースなどに使う想定です。

スニペット

dart.jsonに以下のJsonを追記します。

dart.json

{
    "Freezed Json": {
        "prefix": "freezedjson",
        "body": [
            "// ignore: unused_import",
            "import 'package:flutter/foundation.dart';",
            "import 'package:freezed_annotation/freezed_annotation.dart';",
            "",
            "part '$TM_FILENAME_BASE.freezed.dart';",
            "part '$TM_FILENAME_BASE.g.dart';",
            "",
            "@freezed",
            "abstract class ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}} with _$${1} {",
            "  const factory ${1}({",
            "    required ${2:String id},",
            "  }) = _${1};",
            "  ",
            "  factory ${1}.fromJson(Map<String, dynamic> json) => _$${1}FromJson(json);",
            "}",
        ],
        "description": "Freezed Json"
    },
}

使用例

hoge_entity.dartというファイルでfreezedjsonと入力すると以下のようになります。

hoge_entity.dart

// ignore: unused_import
import 'package:flutter/foundation.dart';
import 'package:freezed_annotation/freezed_annotation.dart';

part 'hoge_entity.freezed.dart';
part 'hoge_entity.g.dart';

@freezed
abstract class HogeEntity with _$HogeEntity {
  const factory HogeEntity({
    required String id,
  }) = _HogeEntity;
  
  factory HogeEntity.fromJson(Map<String, dynamic> json) => _$HogeEntityFromJson(json);
}

最後に

同じ要領でファイル名からすぐに対応するクラス名のStatelessWidgetを作るスニペットなども作れるので、Flutter開発を効率化しましょう👍