VS Codeで自分だけのスニペットを作る

 ・ 2 min

A view of the sky and clouds from a plane

FlutterでEntityやModelに該当するオブジェクトを作る際は、FreezedとCode generatorを使って作ることが多いです。FreezedはJavaのLombokに似ています。

Freezedは開発者が実装すべき定型コードをコード生成方式で代わりに書いてくれる便利なパッケージです。とても便利なのでデータオブジェクトを作る際は必須で使っています。

しかしFreezedを使う際にいくつかやるべきことがあります。クラス名の上に@freezedと書き、必要なパッケージをimportし、生成されるファイル名をpartキーワードで記述する必要があります。以下のような形式で主に作っています(json_serializableパッケージも併用しています)。

import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:my_awesome_project/src/features/events/domain/time_slot.dart';
 
part 'event.freezed.dart';
part 'event.g.dart';
 
@freezed
class Event with _$Event {
  const factory Event({
    required String title,
    required String description,
    required DateTime dateTime,
    required DateTime duration,
    required String? location,
    required String creator,
    required List<String> invitees,
    required List<TimeSlot> availableTimes,
  }) = _Event;
 
  factory Event.fromJson(Map<String, dynamic> json) => _$EventFromJson(json);
}
 

これを毎回書くのは本当に面倒です。そこでVS Codeのスニペットを使って作ってみようと思います。

コマンドパレット(⇧ + ⌘ + p)を開いてsnippetsと入力すると、いくつかのオプションが表示されます。
ここではConfigure Snippetsを選択します。

image

次にどの言語のスニペットを作るか選択する必要があります。Dart言語で作るのでdart.jsonを選択します。

image

するとdart.jsonというファイルが開きます。最初は空のjsonとコメントだけで構成されているはずです。
ここにFreezed用のスニペットをjsonに追加すればOKです。変更を保存してください。

{
  "Freezed Data Class": {
    "prefix": "domain",
    "body": [
      "import 'package:freezed_annotation/freezed_annotation.dart';",
      "\n",
      "part '${TM_FILENAME_BASE}.g.dart';",
      "part '${TM_FILENAME_BASE}.freezed.dart';",
      "\n",
      "@freezed",
      "class ${1:DataClass} with _$${1:DataClass} {",
      "  const factory ${1:DataClass}({${2}}) = _${1:DataClass};",
      "\n",
      "  factory ${1:DataClass}.fromJson(Map<String, dynamic> json) => _${1:DataClass}.fromJson(json);",
      "}"
    ],
    "description": "Freezed Data Class"
  }
}

domainと入力した時にこのスニペットを実行するようにしました。Trigger Suggestのショートカット(option + esc)でも以下のように表示させることができます。

image

作成したスニペットを見つけてEnterキーを押すと、以下のように適用されます。

image

このようにRiverpodやFreezedのように一定のフォーマットが必要な場合、誰かが作ったスニペットをVS Code Extensionsでインストールするか、自分で作ればいいと思います。


Kindness in words creates confidence. Kindness in thinking creates profoundness. Kindness in giving creates love.

— Laozi


他の投稿
VS Codeでtasksを使う 커버 이미지
 ・ 2 min

VS Codeでtasksを使う

混公コンピュータ運用 - 5週目 混公学習団の宿題 커버 이미지
 ・ 1 min

混公コンピュータ運用 - 5週目 混公学習団の宿題

世界貿易戦争 커버 이미지
 ・ 3 min

世界貿易戦争