Accelerating Flutter Development with VSCode Snippets

Writing Freezed code, which is frequently used in Flutter development, can be quite a chore, right?
Using VSCode's snippet feature, you can instantly create a Freezed class that corresponds to the dart filename. Why not take this opportunity to create original snippets to accelerate your Flutter development?

Personal Snippets

First, let's look at how to write personal snippets that are only applied to your own environment.

Opening the Snippet File

• Select the Settings icon (gear), then choose User Snippets.

• Selecting dart.json will open the personal snippet file.

Snippets for State

This is intended for use with things like StateNotifier's State.

Snippet

Add the following JSON to dart.json.

dart.json

{
    "State用Freezed": {
        "body": [
            "// Suppressing warnings so foundation import isn't removed by auto-formatting on save",
            "// 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"
    }
}

Brief Explanation

1. `// ignore: unused_import, directives_ordering` prevents the `foundation` import from being removed during save-time import fixes. It makes the display in devtools cleaner, but it's not strictly necessary (I personally include it because there's no harm in it).
2. `TM_FILENAME_BASE` fills in the `part` directive based on the filename.
3. `${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}}` automatically determines the class name by converting the filename to PascalCase.

### Usage Example

If you type `freezedstate` in a file named `hoge_state.dart`, it will look like this:

```dart:hoge_state.dart
// Suppressing warnings so foundation import isn't removed by auto-formatting on save
// 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;
}
```text

## Snippet for JSON Conversion

This is intended for use when parsing JSON received from an API, etc.

### Snippet

Add the following JSON to `dart.json`.

```json:dart.json
{
    "Json用Freezed": {
        "body": [
            "// Suppressing warnings so foundation import isn't removed by auto-formatting on save",
            "// 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"
    }
}

### Usage Example

In a file named `hoge_entity.dart`, typing `freezedjson` will result in the following:

```dart:hoge_entity.dart
// Suppressing warnings so foundation import isn't removed by auto-formatting on save
// 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);
}
```text

# Project-specific Snippets

Up until now, these were personal snippets, but you can also share snippets with your team members by creating a snippet file in the `.vscode` directory.
The basic syntax is the same, but the file where you write the snippets is different.

## Snippet

Create a file with a name like `[any-name].code-snippets` in the `.vscode` directory at the project root, and add the following JSON.

```json:.vscode/freezed.code-snippets
{
    "State用Freezed": {
        "body": [
            "// Suppressing warnings so foundation import isn't removed by auto-formatting on save",
            "// 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"
    }
}

The difference in the snippet itself is that the scope has been added.

Wrap Up

Using the same method, you can create snippets to instantly generate a StatelessWidget with a class name that matches the filename. Let's make your Flutter development more efficient! 👍

Recommendations

If you need larger templates, such as generating multiple files simultaneously or creating directories, mason is also recommended. 🧱
https://zenn.dev/toridori/articles/859aa1999ece9a

Extensions

In addition to writing your own, snippets can also be used by installing extensions.
There are extensions available that provide snippets for things like Riverpod.

https://marketplace.visualstudio.com/items?itemName=robert-brunhage.flutter-riverpod-snippets