Популярность Visual Studio Code продолжает расти с каждый годом. Это не удивительно, ведь данный редактор отлично подходит для разработки различных приложений, при этом являясь бесплатным, а его функциональность может быть расширена с помощью различных плагинов. В данной же подборке находятся расширения, которые способны значительно упростить/ускорить разработку приложений на Flutter.
В подборку не включены 2 основных плагина для разработки под Flutter:
- Расширение Flutter - данное расширение добавляет полноценную поддержку для разработки и запуска мобильных приложений Flutter.
- Расширение Dart - основное расширение для поддержки языка программирования Dart.
Оба этих расширения обязательны для установки, если вы планируете разрабатывать на Flutter, и о них говорят во всевозможных руководствах по Flutter для начинающих, поэтому рассмотрим другие плагины, которые также могут быть полезны в ходе работы.
Awesome Flutter Snippets
Плагин способен существенно увеличить скорость разработки приложений на Flutter. Awesome Flutter Snippets предоставляет набор сокращений, с помощью которых, на лету, можно создавать такие громоздкие конструкции, как Stateless Widget, Stateful Widget, Inherited Widget, StreamBuilder и другие. Для их создания необходимо ввести statelessW, statefulW, inheritedW, streamBldr.
С полным списком сокращений можно ознакомиться, кликнув по названию плагина.
Рассмотрим работу плагина на примере Inherited Widget. В данном случае была введена фраза inheritedW, которая трансформировалась вот в такую конструкцию:
Pubspec Assist
Отличное расширение для Visual Studio Code, которое позволяет легко добавлять зависимости к Flutter проекту в pubspec.yaml, не покидая рабочий файл. Для этого необходимо воспользоваться сочетанием клавиш Ctrl + Shift + P и найти pubspec assist. Далее, выбрать, добавить или обновить пакет в секции dependency или в секции dev dependency.
После этого нажать Enter и ввести название пакета.
Пакет будет добавлен в соответствующую секцию файла pubspec.yaml.
Flutter Tree
Еще одно превосходное расширение, позволяющие по сокращенному синтексу строить большие конструкции из вложенных друг в друга виджетов.
Например, с помощью такой записи можно создать структуру, в которой в Container будет помещен виджет Column, в котором будут находится еще 3 виджета Container, в каждом из которых находится виджет Stack:
Результат применения такой команды:
Bracket Pair Colorizer 2
Минутка истории.
Bracket pair Colorizer 2 - это замечательное расширение, которое раскрашивало парные скобки в коде, что не позволяло запутаться в передаче аргументов, форматировании и так далее.
В 2022 году, cпустя 5 лет с тех пор, как расширение было разработано, оно стало встроенной функцией Visual Studio Code. Это расширение, добившееся большего успеха с более, чем 10 миллионами загрузок, теперь помечено как deprecated.
Better Comments
Расширение Better Comments занимается тем, что стилизует комментарии, которые становятся более понятными за счет их классифицирования. Поддерживаются Alert, Queries, TODOs, Highlights и другие. Также могут быть указаны любые другие стили комментариев в настройках.
Todo Tree
Расширение позволяет искать TODO и FIXME комментарии и отображает их в структуре папок. Так уменьшается вероятность попросту забыть про реализацию необходимой фичи или накатывание фикса. Щелкнув по TODO в дереве, откроется нужный файл, и курсор поместится на строку, содержащую TODO.
Image preview
Очередное максимально полезное расширение, которое показывает предварительный просмотр изображения при наведении. Отлично подходит для тех, кто имеет большое количество различных картинок в папке assets.
Error Lens
Данный плагин подсвечивает строчки кода, в которых находятся ошибки или ворнинги, делая их более заметными, упрощая тем самым поиск неполадок. Более того, расширение сразу генерирует соответствующее сообщение, и явно указывает где и какая ошибка произошла.
Advanced New File
Одно из самых замечательных расширений, которое значительно упрощает часть создания новых файлов. Оно позволяет не отрывать руки от клавиатуры и, используя сочетание клавиш, быстро ввести путь к файлу и его название. После этого в указанной директории будет создан новый файл. Если путь, который был указан, не существует, то вся структура папок будет создана вместе с файлом.
Расширения, связанные со Стейт Менеджментом:
Десятым расширением должно было стать то самое расширение, которое помогает вам использовать пакеты для управления состоянием вашего приложения. Вот только таких пакетов для Flutter у нас несколько, а соответственно и плагинов VS Code для них тоже несколько. Поэтому вы можете выбрать одно соответствующее расширение для себя или установить все сразу) Все они очень похожи и подобно Awesome Flutter Snippets упрощают работу с данными пакетами:
Полезные ссылки:
Телеграм: https://t.me/the_cybermania
Видео: https://www.youtube.com/watch?v=mc3hQvTCkxc
