Урок 2. Использование VSCode для разработки Dart

В предыдущем уроке курса Dart Developer (2022) создали и запустили проект из командной строки, но также можно сделать то же самое из VS Code. Этот раздел проведет вас через этот процесс.

Установка расширения Dart

Откройте Visual Studio Code, и в левой части вы увидите вертикальную панель инструментов под названием Activity Bar. Нажмите на значок Расширения, который выглядит как четыре поля. Затем введите dart в области поиска. Когда появится расширение Dart, нажмите кнопку Установить, чтобы установить его.

Теперь ваша версия VS Code поддерживает Dart. Далее вы узнаете, как создать проект Dart в VS Code.

Создание нового проекта Dart

Расширение Dart в VS Code позволяет легко создать новый проект Dart. Чтобы увидеть, как это работает, вы воссоздадите тот же простой консольный проект, который ранее создали из командной строки.

Для начала удалите папку hello_dart_application и ее содержимое.

Вы можете создать новый проект из Command Palette. Чтобы получить доступ к Command Palette, перейдите в меню View ▸ Command Palette… или нажмите сочетание клавиш Command+Shift+P на Mac или Control+Shift+P на ПК.

Начните вводить dart, чтобы открыть список соответствующих команд. Затем выберите Dart: New Project (Dart: Новый проект).

Если вы получили сообщение о Stagehand, выберите Активировать Stagehand.

Далее выберите Simple Console Application (простое консольное приложение) из списка.

Как и прежде, выберите место для сохранения папки проекта, которую создаст VS Code, и назовите проект hello_dart_application.

Просмотр сгенерированного кода

Откройте файл hello_dart_application.dart в каталог bin, и вы увидите, что он содержит следующий код:

void main(List<String> arguments) {
  print('Hello world!');
}

В List<String> arguments часть необходима только при создании приложений командной строки, которые принимают аргументы. Например, взгляните на следующую воображаемую команду терминала, которая печатает информацию о стране:

lookup -n spain

Имя приложения командной строки lookup и аргументы таковы -n spain.

Поскольку в этом курсе вы не будете создавать приложения командной строки, вы можете удалить часть аргументов, чтобы упростить задачу. Таким образом, замените содержимое hello_dart_application.dart со следующим кодом:

void main() {
  print('Hello, Dart project!');
}

Запуск Dart в VS Code

Чтобы запустить код, щелкните слово Run, оно появляется прямо над main функция.

Вы увидите Hello, Dart project! появится в консоли отладки.

Изучение пользовательского интерфейса VS Code

Это хорошая возможность изучить различные части пользовательского интерфейса Visual Studio Code.

Приведенные ниже цифры соответствуют различным областям пользовательского интерфейса:

1. Панель действий (Activity Bar): Выберите содержимое, которое будет отображаться на боковой панели.
2. Боковая планка (Side Bar): Проводник отображает текущий проект и файл.
3. Редактор (Editor): Напишите свой код Dart здесь.
4. Панели (Panels): Показать вывод программы, выполнить команды терминала и многое другое.
5. Строка состояния (Status Bar): Отображение информации о текущем проекте.

Больше способов запуска вашего проекта

Вы запустили свой проект ранее, нажав кнопку Run ярлык над main функция. Вот еще три способа, которыми вы можете запустить свой проект:

1. Выберите Выполнить ▸ Начать отладку (Run ▸ Start Debugging).
2. Пресса F5.
3. Нажмите на треугольную кнопку запуска в правом верхнем углу.

Все они делают одно и то же. На этот раз используйте F5 запустите программу, и вы увидите Hello, Dart project! снова появится в консоли отладки.

Файл конфигурации проекта

Иногда при нажатии F5 чтобы запустить ваш проект, VS Code не знает, где искать main функцию, и вы увидите такое сообщение:

Рекомендуется создать launch.json файл, который поможет VS Code узнать, какой файл использовать для запуска вашего приложения.

Поскольку вы изначально запустили свою программу, нажав Run, вы, возможно, не получили эту рекомендацию от VS Code. Тем не менее, это все еще хорошая идея, чтобы создать launch.json файл, так что вы будете делать это дальше.

Создание launch.json

Создайте launch.json файл, нажав на Debug icon (значок отладки) в Панель действий а затем нажмите на ссылку, чтобы создайте файл launch.json (create a launch.json file) как показано на рисунке ниже.

Это создаст новый launch.json файл в .vscode.

Обновление содержимого

Теперь замените содержимое launch.json со следующим:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Dart",
            "type": "dart",
            "request": "launch",
            "program": "bin/hello_dart_application.dart"
        }
    ]
}

Это то, что означают элементы конфигурации:

• name (Имя): Это имя конфигурации вашего проекта. Вы можете называть её как угодно.
• type (Тип): type позволяет VS Code знать, что это проект Dart.
• request (запрос): А requestlaunch of сообщает VS Code, что вы хотите запустить проект.
• program (программа): Это место, где ваша программа начнет свое выполнение. VS Code будет искать main функцию здесь, чтобы он мог запустить ваше приложение.

Запуск вашего проекта снова

Сохраните изменения и запустите файл снова, нажав F5. VS Code должен быть удовлетворен теперь, когда он знает, где искать main функцию.

Отлично! Вы все готовы исследовать Dart дальше.

Выводы и рекомендации

• Visual Studio Code является полноценной Integrated Development Environment (IDE) (Интегрированная среда разработки) которую вы можете использовать для написания кода Dart, когда у вас установлено расширение Dart.
• Dart SDK предоставляет базовые инструменты, необходимые для компиляции и запуска приложений Dart.
• Dart-код, выполняемый из командной строки или в VS Code, использует Виртуальная машина Dart (the Dart Virtual Machine).
• Окно VS Code разделено на Activity Bar, Side Bar, Editor, Panel, и Status Bar.
• Pub – это менеджер пакетов, который Dart использует для добавления стороннего исходного кода в ваши проекты.

Больше информации

Если вы новичок в Visual Studio Code, вам еще многое предстоит узнать об этом. Вы можете найти много учебных ресурсов, перейдя в меню – Справка.

Большую часть времени вы будете писать код Dart, используя VS Code на компьютере, но если вы окажетесь в длинной очереди в “Теремок”, вы можете скоротать время, написав код Dart в dartpad.dev, который будет работать на вашем мобильном устройстве. Попробуйте образцы проектов Dart и Flutter.

Теперь, когда ваша среда программирования полностью настроена, вы перейдете к написанию реального кода Dart в следующем уроке.

Следующий урок >>

Для углубленного изучения кроссплатформенной разработки мобильных приложений под iOS и Android предлагаем дополнительно ознакомиться с нашими бесплатными курсами и уроками на русском языке по современным технологиям и языкам программирования: Swift, UIKit, SwiftUI, Kotlin, Kotlin Multiplatform (KMP), Dart, Flutter.