Полезные Snippets для Flutter-разработчика / Хабр

Всем привет! На связи Глеб Гусаров, flutter-разработчик в команде aim digital. Мы занимаемся разработкой цифровых продуктов и сервисов и автоматизацией процессов для бизнеса. В статье рассказываю, как создать файл конфигурации сниппетов и делюсь своей подборкой полезных сниппетов.

Snippet — это шаблон (подсказка в коде), по вызову которого можно быстро вставить готовый код.

В файле конфигурации сниппет представляет собой сущность в JSON имеющую ключ состоящую из двух полей:

поле prefix — тип данных String — ключевое слово, при написании которого будет предложено использовать snippet
поле body — массив String — код, который будет вставлен после применения snippet'a

Пример snippet'a :

"localizationImport": {    
"prefix": "localizationImport",    
"body": [        
"import 'package:perfluence_app/generated/l10n.dart';",     
],
}

Специальные возможности и регулярные выражения в snippet'ах

"\t" — табуляция.

"$1" — место куда будет поставлен курсор после применения snippet'a, можно использовать $2, $3 и т.д. Цифра — это очередность позиции, куда встанет курсор после нажатия на Tab.

"$TM_FILENAME_BASE" — обращение к названию файла без расширения.

"${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}" — вернет название файла в CamelCase.

Как создать файл конфигурации Snippet'ов

В Visual Studio code нажать комбинацию клавиш cmnd(ctrl) + shift + p
В появившемся поле ввести — Snippets
Выбрать в выпадающем меню пункт Preferences: Configure User Snippets и нажать Enter
Выбрать расширение файла, для которого будут использованы Snippet'ы (В нашем случае файлы с расширением .dart). После чего создастся json-файл конфигурации Snippet'ов.

Примеры полезных сниппетов

Шаблон для дата классов (десериализация json_annotation + equatable)

"dataClassFrom": {
    "prefix": "dataClassFrom",
     "body": [
         "import 'package:equatable/equatable.dart';",
        "import 'package:json_annotation/json_annotation.dart';",
        "",
        "part '$TM_FILENAME_BASE.g.dart';",
        "",
        "@JsonSerializable(",
        "\tfieldRename: FieldRename.snake,",
        "\tcreateToJson: false,",
        ")",
        "",
        "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g} extends Equatable{",
        "\tconst ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}();",
        "",
        "\tfactory ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}.fromJson(Map<String, dynamic> json) => _$${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}FromJson(json);",
        "",
        "\t$1",
        "",
        "\t@override",
        "\tList<Object?> get props => [];",
        "}",
     ]
},

Шаблон для дата классов (десериализация, сериализация json_annotation + equatable)

"dataClassToFrom": {
    "prefix": "dataClassToFrom",
    "body": [
         "import 'package:equatable/equatable.dart';",
        "import 'package:json_annotation/json_annotation.dart';",
        "",
        "part '$TM_FILENAME_BASE.g.dart';",
        "",
        "@JsonSerializable(",
        "\tfieldRename: FieldRename.snake,",
        ")",
        "",
        "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g} extends Equatable{",
        "\tconst ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}();",
        "",
        "\tfactory ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}.fromJson(Map<String, dynamic> json) => _$${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}FromJson(json);",
        "",
        "\tMap<String, dynamic> toJson() => _$${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}ToJson(this);",
        "",
        "\t$1",
        "",
        "\t@override",
        "\tList<Object?> get props => [];",
        "}",
     ]
},

Шаблон Stateless widget

"stateless": {
"prefix": "stless",
"body": [
"import 'package:flutter/material.dart';",
"",
"class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends StatelessWidget {",
"\t@override",
"\tWidget build(BuildContext context) {",
"\t\treturn $1;",
"\t}",
"}", 
]  
},

Шаблон Statefull widget

"statefull": {
"prefix": "stfull",
"body": [
"import 'package:flutter/material.dart';",
"",
"class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends StatefulWidget {",
"\t@override",
"\tState<${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}> createState() => _${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State();",
"}",
"",
"class _${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State extends State<${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}> {",
"\t@override",
"\tWidget build(BuildContext context) {",
"\t\treturn $2;",
"\t}",
"}",
]
},

Шаблон для быстрого создания цвета из HEX

"color": {
      "prefix": "color",
      "body": "const Color(0xFF$1)",
},

Шаблон для быстрого создания BoxShadow

"boxShadow": {
      "prefix": "bsh",
      "body": [
             "BoxShadow(",
             "\tcolor: Colors.black.withOpacity(.5),",
             "\toffset: const Offset(0, 0),",
             "\tblurRadius: 0,",
             "),"
       ]
},

Шаблон для написания тестов arrange, act, assert

"aaaTest": {
    "prefix": "aaaTest",
    "body": [
        "test(",
         "\t'should $1',",
        "\t() async {",
        "\t//arrange",
        "\t$2",
        "\t//act",
        "\t",
        "\t//assert",
        "\t},",
        ");",
    ],
},

Шаблон для создания интерфейса репозитория

"repo": {
   "prefix": "repo",
   "body": [
      "import '/core/error/failures.dart';",
      "import 'package:dartz/dartz.dart';",
      "",
      "abstract class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g} {",
      "\t$2",
      "}",
    ],
},

Шаблон для написания имплементации репозитория

"repoImpl": {
    "prefix": "repoImpl",
   "body": [
      "import 'package:dartz/dartz.dart';",
      "import '/core/error/failures.dart';",
      "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g} implements $1 {",
      "\t@override",
      "\tFuture<Either<Failure, $2>> getConcreteNumberTrivia() async {",
      "\t\treturn const Left(DefaultFailure());",
      "\t}",
      "}",
    ],
},

Шаблон для создания дата-класса параметров usecase

"usecaseParams": {
   "prefix": "usecaseParams",
   "body": [
      "import 'package:dartz/dartz.dart';",
      "import 'package:equatable/equatable.dart';",
      "import '/core/error/failures.dart';",
      "import '/core/usecases/usecase.dart';",
      "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}UC implements UseCase<$1, ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}Params> {",
      "\tconst ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}UC(this.repo);",
      "",
      "\tfinal $2 repo;",
      "",
      "\t@override",
      "\tFuture<Either<Failure, $1>> call(${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}Params params) async {",
      "\t\treturn await repo.$3();",
      "\t}",
      "}",
      "",
      "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}Params extends Equatable {",
      "\tconst ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}Params();",
      "\t@override",
       "\tList<Object?> get props => [];",
      "}",
    ]
},