Как мы ускоряем работу во Flutter в VSCode: расширения и горячие клавиши

Привет, Хабр! На связи Анна, лидер Flutter-команды Friflex, и Роза, Flutter-разработчица Friflex. Эта статья о том, как мы убираем лишнюю рутину в VSCode. Расскажем про полезные расширения и поделимся списком шорткатов, которые помогают быстрее искать, править и перемещаться по коду.

Расширения VSCode, которые помогают убрать рутину

Flutter Widget Snippets

Сниппеты в VSCode — очень удобный инструмент для быстрого создания шаблонных и часто повторяющихся участков кода. Это расширение позволяет быстро создать большинство самых популярных виджетов во Flutter (например, Stateless/StatefulWidget, Layout).

Еще расширение дает доступ к Dart-сниппетам, с помощью которых можно быстро создавать классы, методы и переменные. Со сниппетами писать код можно гораздо быстрее. Начинающим разработчикам рекомендую для начала изучить сам синтаксис, привыкнуть к разработке без сторонних подсказок, чтобы потом не стать заложником дополнительных инструментов.

bloc

Если в своих Flutter-проектах вы используете библиотеку bloc, это расширение может стать незаменимым помощником. В нем есть набор сниппетов, с которыми в коде проще и быстрее добавлять виджеты в UI, создавать сами блоки и кубиты, а еще управлять их методами. 

Расширение добавляет возможность быстро оборачивать виджеты в другие виджеты библиотеки через контекстное меню. А также создавать целые директории с первично настроенными связями между классами Bloc, State и Event. Находка для тех, кто не любит тратить время на организацию файлов и классов в них!

Flutter Tree

Еще одно полезное расширение для продвинутых Flutter-разработчиков. С ним удобно добавлять вложенность виджетов: не теряешь время на написание параметров, расстановку скобок. 

Например, если вам нужно создать контейнер со строкой виджетов внутри, это можно сделать простой записью Container>Row[Expanded>Text,ElevatedButton>Text]. В конце нажимаете Enter, и Flutter Tree все делает за вас. На выходе получаете сформированное дерево по вашему запросу. 

Code Spell Checker

Это расширение пригодится вообще всем, кто пользуется VSCode (не только Flutter-разработчикам). Оно помогает проверять написание слов в вашем коде — в документации или названии объектов. Расширение подчеркнет слова, которые написаны некорректно и предложит, как их заменить. Если слово написано верно, его можно вынести в исключения — для конкретного проекта или пользователя. Поддерживает огромное количество языков, в том числе русский. 

Commit Message Editor

Почти все серьезные проекты требуют вести историю изменений в репозитории в соответствии с соглашением о коммитах. Каждый коммит должен осмысленно отражать суть изменений, фиксировать их тип, измененные файлы и их критичность. 

Чтобы легче было оформлять коммиты по этим правилам, рекомендую Commit Message Editor. Расширение позволяет оформить коммит с помощью формы. Когда вы ее заполните, текст сам отформатируется и подставится в строку сообщения коммита.

Как создать свои сниппеты

Бывает, что созданных другими авторами сниппетов в работе не хватает. Например, вы хотите оптимизировать рутинный код, специфичный для вашего проекта или компании. Здесь на помощь придут самописные сниппеты. 

В VSCode ищем Preferences и вкладку Configure Snippets. Вам на выбор будет предложена возможность создать сниппеты глобальные или локальные, под конкретный проект. 

После выбора удобного варианта вам откроется json-файл, в котором вы можете добавлять собственные спиппеты. При добавлении всегда важно придерживаться структуры.

"Example Snippet": {  "prefix": [   "sw",  ],  "description": "Текстовое описание сниппета",  "body": [] }

Здесь ключ — название самого сниппета, а значение — его содержимое. Внутри содержимого есть несколько дополнительных полей:

• prefix — триггер сниппета. Может быть как строкой, так и списком строк;

• description — текстовое описание самого сниппета;

• body — содержимое, которое будет сформировано сниппетом. 

Для удобной конфигурации в body сниппета можно добавить не только текст, но и специальные элементы. Например:

• $1, $2 и так далее — позиции заполнения. Между ними переключаемся табом для быстрого заполнения. Одна позиция может дублироваться в body, тогда при вводе значение будет подставляться сразу во всех указанных местах; 

• ${1:PlaceholderText} — позиция с указанием текста по умолчанию; 

• ${2|Container,Column,...|} — позиция с выбором текста из списка;

• $0 — конечная позиция курсора.

Кроме символов позиционирования ввода есть еще дополнительные элементы, которые позволяют вставлять текст по контексту. Например:

• $CLIPBOARD — вставляет текст из буфера обмена;

• $LINE_COMMENT — добавляет комментарий в строку;

• $BLOCK_COMMENT_START/END — обозначают границы вставки блочного комментария;

• $TM_FILENAME, $TM_FILEPATH — подставляют данные файла, название и путь.

"Example Widget Snippet": {  "prefix": [   "wid",   "example"  ],  "description": "Простой StatelessWidget",  "body": [   "$LINE_COMMENT $TM_FILENAME — $CURRENT_DATE.$CURRENT_MONTH.$CURRENT_YEAR",   "",   "class ${1:MyWidget} extends StatelessWidget {",   "  const ${1:MyWidget}({super.key});",   "",   "  @override",   "  Widget build(BuildContext context) {",   "    return ${2|Container,Column,Row,Scaffold|}(",   "      child: Text('${3:Привет}'),",   "    );",   "  }",   "  $0",   "}"  ] }

Когда расширений мало: горячие клавиши

Часто в начале работы горячие клавиши почти не используют. Особенно, если есть мышка 🙂 Но с их помощью можно сильно ускорить процесс разработки. Вот шорткаты, которые мы используем чаще всего. 

Навигация и поиск:

• ⌘ + P — открыть файл по имени;

• ⌘ + Shift + F — поиск по всему проекту;

• ⌘ + G — перейти к строке;

• ⌘ + Shift + O — перейти к функции или символу в файле.

Редактирование кода:

• Control + Space — автодополнение;

• ⌘ + / — закомментировать или раскомментировать строку;

• Option + ↑/↓ — переместить строку вверх или вниз;

• Shift + Option + ↑/↓ — скопировать строку вверх или вниз;

• ⌘ + Shift + K — удалить строку;

• Shift + Option + F — отформатировать документ;

• Option + Click — добавить множественный курсор;

• ⌘ + Shift + L — выделить все вхождения слова;

• ⌘ + F, затем ⌘ + Option + Enter — быстрая замена.

Мультикурсор и выделения:

• Option + Click — добавить курсор в точку клика;

• ⌥⌘ + ↑/↓ — вставить курсор выше или ниже;

• ⌘ + U — отменить последнее действие с курсором;

• ⇧⌥ + I — вставить курсор в конец каждой выбранной строки;

• ⌘ + L — выделить текущую строку;

• ⇧⌘ + L — выделить все вхождения текущего выделения;

• ⌘ + F2 — выделить все вхождения текущего слова;

• Control + ⇧⌘ + →/← — расширить или уменьшить выделение.

Блочное выделение:

• ⇧⌥ + drag — выделение прямоугольником (box selection);

• ⇧⌥⌘ + ↑/↓/←/→ — выделение вверх, вниз, влево, вправо;

• ⇧⌥⌘ + PgUp/PgDn — постраничное вертикальное выделение.

Конечно, вы можете настроить сочетания клавиш под себя и увидеть весь их список:  Code → Settings → Keyboard Shortcuts или нажмите ⌘ + K, затем ⌘ + S. Полный список комбинаций есть тут: PDF от VSCode.

И напоследок — как еще разбавить рутину. Если вы хотите, чтобы за вашей работой всегда наблюдал милый питомец, то в VSCode можете установить вот такое расширение. 

А какие у вас лайфхаки для борьбы с рутиной и ускорения разработки? Делитесь в комментах!