Flutter開発を加速するVSCodeスニペットの使い方

Flutter開発でよく使うFreezedの記述を大変ですよね？
VSCodeのスニペット機能を使えばdartファイル名に対応するFreezed用クラスを一瞬で作れます。これを気にFlutter開発を加速するオリジナルスニペットをつくてみませんか？

State用

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

スニペット

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

dart.json

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

一部解説

1. // ignore: unused_import, directives_orderingは保存時の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, directives_ordering
import 'package:flutter/foundation.dart';
import 'package:freezed_annotation/freezed_annotation.dart';

part 'hoge_state.freezed.dart';

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

Json変換用

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

スニペット

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

dart.json

{
    "Json用Freezed": {
        "body": [
            "// ignore: unused_import, directives_ordering",
            "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",
            "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);",
            "}"
        ],
        "prefix": [
            "freezedjson",
            "jsonfreezed"
        ],
        "description": "Freezed Json"
    },
}

使用例

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

hoge_entity.dart

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

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

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

プロジェクト用スニペット

先ほどまでは個人用のスニペットでしたが、.vscodeディレクトリにスニペットファイルを作ることでチームメンバーとスニペットを共有することもできます。

スニペット

.vscodeに[適当な名前].code-snippetsを作り以下のJsonを追記します。

freezed.code-snippets

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

先ほどとの違いはscopeが追加されたことです。

最後に

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