Разработка Flutter с помощью VSCode

Visual Studio Code Flutter
Разработка Flutter с помощью VSCode

предисловие

Зачем использовать VSCode?

Flutter официально рекомендует редакторы IDEA/Android Studio и VSCode. Раньше для разработки Flutter использовалась IDEA, но IDEA всегда тяжелая, поэтому я переключился на VSCode и обнаружил, что опыт разработки также очень хорош.

Установить среду разработки

Установить флаттер

Те, у кого не установлен флаттер, могут сначала посмотретьFlutter InstallИли гугл, здесь не выложено.

Установить VSCode

онтология

плагин языкового пакета

VSCode также является редактором, официально рекомендованным флаттером, друзья могут прочитать его первым.Официальный учебник

Установите плагин флаттера

Найдите и установите плагины Dart и Flutter

Проверить конфигурацию

  • запустить в терминалеflutter doctor, чтобы увидеть, есть ли проблемы с выводом
  • Или откройте палитру команд в VSCode, чтобы найтиFlutter: Run Flutter Doctorвоплощать в жизнь

Командная панель VSCode (cmd+shift+p) поддерживает поиск, поэтому обычно введитеflutterМы можем легко найти нужную нам команду

Разработка с VSCode

Создайте новый проект Flutter

  • доступно в терминалеflutter create
  • Его также можно найти, открыв палитру команд в VSCode.Flutter: New Projectвоплощать в жизнь

Assists & Quick Fixes

  • Палитра командQuick fixили快速修复(Да, китайский ввод поддерживается =. =)
  • Или используйте сочетание клавиш cmd+.

Sort Members

  • Палитра командSort Members
  • Или щелкните правой кнопкой мыши->Операция с исходным кодом->Сортировка членов
  • также можно настроитьSort Membersбыстрая клавиша

Organize Imports

  • Палитра командOrganize Imports
  • Или щелкните правой кнопкой мыши -> Операция с исходным кодом -> Организовать импорт
  • или сочетание клавиш shift + option + o

Форматирование (формат документа)

  • Палитра командFotmat Document
  • Или щелкните правой кнопкой мыши -> форматировать документ
  • Или сочетание клавиш shift + option + f

Go to Definition

  • щелкните правой кнопкой мыши转到定义
  • Горячая клавиша f12 или cmd+левая клавиша

Find All References

  • щелкните правой кнопкой мышиFind All References

сегмент кода

Расширение Flutter содержит некоторые часто используемые фрагменты кода.

  • stless StatelessWidget
  • stfull StatefulWidget
  • stanim StatefulWidget with AnimationController

Мы также можем добавить собственные фрагменты кода.

  1. Введите в консолиConfigure User Snippets/Preferences:Настроить пользовательские фрагменты
  2. выберите dart.json
  3. Напишите свои собственные фрагменты кода

Это фрагмент кода, который мы написали для справки

Отладка с VSCode

Запустите проект Flutter

  • Отладка -> Включить отладку (F5)

можно найти в командной панелиDebug:Select and Start DebuggingВыполнить -> Выбрать Добавить конфигурацию -> ВыбратьDart&Flutter, чтобы вам не приходилось каждый раз выбирать среду отладки. Вы также можете выбрать шестерню в интерфейсе отладки.Dart&Flutter

hot reload

  • save(cmd+s)
  • Или нажмите кнопку с зеленой круглой стрелкой

Выберите устройство отладки

  • В правом нижнем углу интерфейса вы можете выбрать устройство

-w259

  • Или найдите командную панельFlutter: Select Devices

Просмотр отладки

Откройте командную панель и введите при запуске флаттераFlutter:ToggleВы можете увидеть знакомые команды

  • Toggle Baseline Painting
  • Toggle Repaint Rainbow
  • Toggle Slow Animations
  • Toggle Slow-Mode Banner

-w518

Observatory

Палитра командDart: Open Observatory

консоль отладки

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

  • Поиск фрезерный журнал RUN Установка в пользовательских настройках

-w499

  • Откройте этот файл с другим программным обеспечением, таким как встроенная консольopen -a Console .vscode/run.log

Советы по использованию VSCode

Мощные cmd+p и cmd+shift+p

cmd+p может перейти к файлу, но может ввести? получить больше действий

-w539

cmd+shift+p это командная панель, там есть все виды команд, а так же подсказывает сочетания клавиш команд Например, если я забыл горячую клавишу Quick Fix, я легко могу ее найти.

-w546

горячая клавиша

Некоторые друзья, которым сами не нравятся сочетания клавиш VSCode, могут скачать расширение.

-w389

Или перейдите в настройки, чтобы изменить сочетания клавиш

плагин

  • Bracket Pair Colorizer 2В коде Flutter много скобок, этот плагин легко отличить.
  • GitLensАртефакт полностью неразборный после использования =. знак равно

VSCode и ИДЕЯ

Преимущества VSCode — лучший опыт разработки

  • Легкий, без необходимости открывать несколько проектов
  • Заменить тему удобно
  • Плагин GitLens очень прост в использовании.

Преимущество IDEA — лучшая отладка

  • Отладка Flutter включает все более и более удобные виджеты, дерево рендеринга, производительность во Flutter Inspector.
  • Более мощная отладкаGrep ConsoleПлагины удобны

Авторские права на эту статью принадлежат другой команде R & D, добро пожаловать на перепечатку, пожалуйста, сохраните источник.@balmes

Категории