🐙
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"
},
}
一部解説
- // ignore: unused_import, directives_orderingは保存時のimport修正でfoundationのimportが消えないようにしてます。
- TM_FILENAME_BASEでファイル名からpartを埋めます
-
{TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}}でファイル名をパスカルケースに変換してクラス名を自動で決めてます。{1:
使用例
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';
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';
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開発を効率化しましょう👍
Discussion