Запуск кода json Visual Studio, как настроить

Обновлено: 21.11.2024

Следуйте инструкциям по настройке редактора, чтобы установить расширения Dart и Flutter (также называемые подключаемыми модулями).

Обновление расширения

Обновления расширений выпускаются регулярно. По умолчанию VS Code автоматически обновляет расширения при наличии обновлений.

Чтобы установить обновления вручную:

  1. Нажмите кнопку "Расширения" на боковой панели.
  2. Если расширение Flutter отображается с доступным обновлением, нажмите кнопку обновления, а затем кнопку перезагрузки.
  3. Перезапустите VS Code.

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

Есть несколько способов создать новый проект.

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

Чтобы создать новый проект Flutter из шаблона начального приложения Flutter:

  1. Откройте палитру команд ( Ctrl + Shift + P ( Cmd + Shift + P в macOS)).
  2. Выберите команду Flutter: New Project и нажмите Enter .
  3. Выберите Приложение и нажмите Enter .
  4. Выберите местоположение проекта.
  5. Введите желаемое название проекта.

Открытие проекта из существующего исходного кода

Чтобы открыть существующий проект Flutter:

  1. Нажмите «Файл» > «Открыть» в главном окне IDE.
  2. Перейдите в каталог, содержащий существующие файлы исходного кода Flutter.
  3. Нажмите "Открыть".

Редактирование кода и просмотр ошибок

Расширение Flutter выполняет анализ кода, что позволяет:

  • Подсветка синтаксиса
  • Автозавершение кода на основе расширенного анализа типов
  • Переход к объявлениям типов (Перейти к определению или F12) и поиску использования типов (Найти все ссылки или Shift + F12)
  • Просмотр всех текущих проблем с исходным кодом (Просмотр > Проблемы или Ctrl + Shift + M (Cmd + Shift + M в macOS)) Любые проблемы анализа отображаются на панели "Проблемы":

Запуск и отладка

Примечание. Отлаживать приложение можно двумя способами.

  • Использование DevTools – набора инструментов для отладки и профилирования, которые запускаются в браузере. DevTools заменяет предыдущий инструмент профилирования на основе браузера, Observatory, и включает функции, ранее доступные только для Android Studio и IntelliJ, такие как инспектор Flutter.
  • Использование встроенных функций отладки VS Code, таких как установка точек останова.

Приведенные ниже инструкции описывают функции, доступные в VS Code. Сведения об использовании запуска DevTools см. в разделе Запуск DevTools из VS Code в документации DevTools.

Запустите отладку, щелкнув Run > Start Debugging в главном окне IDE или нажав F5 .

Выбор целевого устройства

Когда проект Flutter открыт в VS Code, в строке состояния должен отображаться набор конкретных записей Flutter, включая версию Flutter SDK и имя устройства (или сообщение «Нет устройств»):

Примечание:

  • Если вы не видите номер версии Flutter или информацию об устройстве, возможно, ваш проект не был обнаружен как проект Flutter. Убедитесь, что папка, содержащая файл pubspec.yaml, находится внутри папки рабочей области VS Code.
  • Если в строке состояния указано «Нет устройств», Flutter не удалось обнаружить какие-либо подключенные устройства iOS или Android или симуляторы. Чтобы продолжить, вам нужно подключить устройство или запустить симулятор или эмулятор.

Расширение Flutter автоматически выбирает последнее подключенное устройство. Однако, если у вас подключено несколько устройств/симуляторов, щелкните устройство в строке состояния, чтобы увидеть список выбора в верхней части экрана. Выберите устройство, которое хотите использовать для запуска или отладки.

Вы разрабатываете для macOS или iOS удаленно с помощью Visual Studio Code Remote? Если это так, вам может потребоваться вручную разблокировать связку ключей. Для получения дополнительной информации см. этот вопрос на StackExchange.

Запуск приложения без точек останова

  1. Нажмите «Выполнить» > «Запустить без отладки» в главном окне IDE или нажмите Ctrl + F5. Строка состояния становится оранжевой, показывая, что вы находитесь в сеансе отладки.

    2. Запуск приложения с точками останова

    Нажмите «Выполнить» > «Начать отладку» в главном окне IDE или нажмите клавишу F5 .

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

    Запуск приложения в режиме отладки, профиля или выпуска

    Flutter предлагает множество различных режимов сборки для запуска вашего приложения. Подробнее о них можно прочитать в режимах сборки Flutter.

    Откройте файл launch.json в VS Code.

    Если у вас нет файла launch.json, перейдите в представление «Выполнить» в VS Code и нажмите «Создать файл launch.json».

      Например, если вы хотите запустить в режиме отладки, ваш файл launch.json может выглядеть так:

    Быстрое редактирование и обновление цикла разработки

    Flutter предлагает лучший в своем классе цикл разработки, позволяющий почти мгновенно увидеть эффект ваших изменений с помощью функции Stateful Hot Reload. Дополнительные сведения см. в разделе Использование горячей перезагрузки.

    Расширенная отладка

    Вам могут пригодиться следующие расширенные советы по отладке:

    Отладка визуального макета

    Во время сеанса отладки несколько дополнительных команд отладки добавляются в палитру команд и в инспектор Flutter. Когда место ограничено, значок используется как визуальная версия ярлыка.

    Переключить отрисовку базовой линии Заставляет каждый RenderBox рисовать линию на каждой из своих базовых линий. Переключить перерисовку радуги Показывает вращающиеся цвета на слоях при перерисовке. Переключить медленную анимацию Замедляет анимацию, чтобы обеспечить визуальный контроль. Переключить баннер режима отладки Скрывает баннер режима отладки даже при запуске отладочной сборки.

    Отладка внешних библиотек

    По умолчанию отладка внешней библиотеки отключена в расширении Flutter. Чтобы включить:

    1. Выберите «Настройки» > «Расширения» > «Конфигурация Dart».
    2. Отметьте параметр "Отладка внешних библиотек".

    Советы по редактированию кода Flutter

    Если у вас есть дополнительные советы, которыми мы хотели бы поделиться, дайте нам знать!

    Подсказки и быстрые исправления

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

    Обтекание с помощью нового виджета Это можно использовать, если у вас есть виджет, который вы хотите обернуть окружающим виджетом, например, если вы хотите обернуть виджет в строке или столбце. Обернуть список виджетов с помощью нового помощника по виджетам Аналогично описанному выше помощнику, но для переноса существующего списка виджетов, а не отдельного виджета. Помощь преобразования дочерних элементов в дочерние Заменяет дочерний аргумент на дочерний аргумент и заключает значение аргумента в список. Преобразование StatelessWidget в StatefulWidget help Изменяет реализацию StatelessWidget на реализацию StatefulWidget путем создания класса State и перемещения туда кода.

    Фрагменты

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

    Расширение Flutter включает следующие фрагменты:

    • Префикс stless : создайте новый подкласс StatelessWidget .
    • Префикс stful: создайте новый подкласс StatefulWidget и связанный с ним подкласс State.
    • Префикс stanim : создайте новый подкласс StatefulWidget и связанный с ним подкласс State, включая поле, инициализированное с помощью AnimationController .

    Вы также можете определить собственные фрагменты кода, выполнив команду «Настроить пользовательские фрагменты» в палитре команд.

    Сочетания клавиш

    Горячая перезагрузка Во время сеанса отладки нажатие кнопки Горячая перезагрузка на панели инструментов отладки или нажатие клавиш Ctrl + F5 (Cmd + F5 в macOS) выполняет горячую перезагрузку.

    Назначения клавиатуры можно изменить, выполнив команду «Открыть сочетания клавиш» в палитре команд.

    Горячая перезагрузка и горячий перезапуск

    Горячая перезагрузка работает путем внедрения обновленных файлов исходного кода в работающую виртуальную машину Dart. Сюда входит не только добавление новых классов, но и добавление методов и полей к существующим классам, а также изменение существующих функций. Однако некоторые типы изменений кода не могут быть загружены в горячем режиме:

    • Инициализаторы глобальных переменных
    • Инициализаторы статических полей
    • Метод main() приложения

    Чтобы внести эти изменения, полностью перезапустите приложение, не завершая сеанс отладки. Чтобы выполнить горячий перезапуск, запустите команду Flutter: Hot Restart из палитры команд или нажмите Ctrl + Shift + F5 (Cmd + Shift + F5 в macOS).

    Устранение неполадок

    Известные проблемы и отзывы

    Все известные ошибки отслеживаются в системе отслеживания ошибок: Dart и Flutter extensions GitHub.

    Мы приветствуем отзывы как об ошибках/проблемах, так и о пожеланиях. Перед подачей новых вопросов:

    • Выполните быстрый поиск в средствах отслеживания проблем, чтобы убедиться, что проблема уже отслежена.
    • Убедитесь, что у вас установлена ​​самая последняя версия подключаемого модуля.

    При подаче заявок на новые вопросы включайте вывод флаттер-доктора.

    Если не указано иное, эта работа распространяется под лицензией Creative Commons Attribution 4.0 International License, а образцы кода распространяются под лицензией BSD.

    Открыть папку в Visual Studio Code и написать программу на C++

    1. Закройте Visual Studio Code, если он в данный момент открыт. Затем запустите код Visual Studio. Выберите «Файл» -> «Открыть папку…».
    2. Создайте новую папку в любом месте по вашему выбору. В этом примере новая папка будет называться coding.
    3. В главном редакторе VS Code нажмите «Файл» -> «Новый файл», а затем нажмите Ctrl+S, чтобы сохранить его как «code.cpp».
    4. Установите расширение C++ для VS Code.

      5. Установить путь к компилятору

      1. Нажмите Ctrl+Shift+P, начните вводить «C/C++», а затем выберите «Редактировать конфигурации (JSON)» из списка предложений. VS Code создает файл с именем c_cpp_properties.json и заполняет его настройками по умолчанию.
      2. Найдите параметрcompilePath и вставьте полный путь к файлу g++.exe в папку bin Mingw-w64, которую вы только что добавили к переменной Path. ( C:\\Mingw-w64\\mingw32\\bin\\g++.exe , обратите внимание, что вам нужно делать двойной « \ » из-за соглашения json)
      3. Задайте для параметра IntelliSenseMode значение gcc-x64 .
      4. Ваш файл c_cpp_properties.json должен выглядеть следующим образом:

        5. Создать задачу сборки

        1. Затем снова нажмите Ctrl+Shift+P, начните вводить «задача» и выберите «Задачи: настроить задачу сборки по умолчанию» из списка предложений, затем выберите «Создать файл tasks.json из шаблона». Затем выберите MSBuild. VS Code создает в редакторе файл tasks.json по умолчанию.
        2. Найдите параметр команды и измените его на g++ .
        3. Измените параметр args на [ "-g", "-o", "a.exe", "code.cpp"]
        4. Ваш файл tasks.json должен выглядеть следующим образом:

          5. Настроить параметры отладки

          1. Нажмите «Отладка» -> «Открыть конфигурации», а затем выберите C++ (GDB/LLDB) из списка предложений. VS Code создает в редакторе файл launch.json по умолчанию.
          2. Найдите настройку программы и удалите все, кроме последней части $/a.exe .
          3. Найдите miDebuggerPath и укажите его на файл gdb в папке bin Mingw-w64, т. е. C:\\Mingw-w64\\mingw32\\bin\gdb.exe
          4. Ваш полный файл launch.json должен выглядеть следующим образом:

            5. Профили запуска определяют способ запуска и отладки проекта в Visual Studio Code.

            запуск.json

            Visual Studio Code хранит конфигурации запуска в файле launch.json, расположенном во вложенной папке .vscode рабочей области (корневая папка проекта). Чтобы выбрать, добавить или изменить конфигурации, перейдите на боковую панель «Выполнение и отладка».

            Прослушивание Xdebug (локальная или удаленная отладка)

            Следующий профиль инициирует отладку уже работающего приложения PHP. Отладчик будет ожидать соединения Xdebug на указанном порту. Инструменты PHP не запускают веб-сервер. Это наиболее распространенный сценарий отладки, требующий от пользователя правильной настройки своего php с расширением xdebug.

            Нажмите F5 или "Выполнить и отладить", чтобы начать прослушивание подключений Xdebug.

            • port — номер входящего порта Xdebug. Это может быть одно число (например, 9003) или массив чисел (например, [9003, 9000]), или его можно удалить, чтобы отладчик использовал порт, указанный в настройке "php.debug.port".
            • pathMappings используется для удаленной отладки. Этот параметр сопоставляет пути сервера с локальными путями, поэтому отладчик будет сопоставлять точки останова на локальном компьютере с путями сервера.
            • hostname позволяет указать, следует ли прослушивать IPv4 ( 0.0.0.0 ) или IPv6 ( :: ). По умолчанию отладчик прослушивает IPv4 ( 0.0.0.0 ) и также пытается прослушивать IPv6 ( :: ). В системах Linux прослушивание в обеих сетях может быть запрещено, поэтому имя хоста следует указывать явно.

            Прослушивание IPv6 в Linux

            В Windows отладчик одновременно прослушивает IPv4 и IPv6. В Linux протокол должен быть указан явно. Следующий профиль запуска прослушивает IPv6, порты по умолчанию ( 9003 , 9000 ):

            Если "имя хоста" не указано, отладчик по умолчанию прослушивает IPv4.

            Настройки прокси-сервера DBGp

            Многопользовательская отладка более подробно описана в руководстве для версии Visual Studio. В VS Code конфигурация помещается прямо в файл launch.json.

            Конфигурация запуска Listen for Xdebug вместе с конфигурацией dbgpProxy указана ниже:

            • enable включает или выключает соединение с сервером DBGp Proxy.
            • host и port определяют адрес прокси-сервера DBGp
            • ideKey используется для регистрации сеанса отладки в DBGpProxy. Если не задано, вместо этого используется текущее имя пользователя.

            При запуске проекта (команда F5 или Run and Debug) в консоли отладки записывается следующий текст:

            Прокси-ключ DBGp IDE

            Игнорируемые пути

            Чтобы игнорирование настраиваемых путей (например, **/vendor/** ) от включения и прерывания в исключениях, укажите «exclude» : ["**/vendor/**"] параметр запуска.

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

            Пример с конфигурацией "исключить":

            Исключая все, кроме

            Чтобы игнорировать все, кроме указанного пути, используйте префикс отрицания ! , например:

            Встроенный сервер PHP

            Следующий профиль запускает встроенный веб-сервер PHP. Сервер запускается, только если runtimeArgs содержит параметр -S, определяющий местоположение и порт сервера.

            Пример конфигурации:

            Дополнительно имеются следующие настройки:

            Консольное приложение

            Этот профиль запускает проект PHP как консольное приложение внутри консоли отладки VS Code. По умолчанию он запускает файл, открытый в данный момент в редакторе.

            Полезные параметры, которые можно изменить:

            • program : Указывает абсолютный или относительный файл относительно каталога рабочей области. Значение $ означает, что файл в данный момент открыт в редакторе.
            • externalConsole: значение true для запуска программы в отдельном окне командной строки. Значение по умолчанию — false, чтобы вывести программу в консоль отладки VS Code.
            • port : номер порта Xdebug. Это значение должно соответствовать настройке в php.ini. По умолчанию 9003 .

            Версия PHP

            Опция конфигурации запуска "phpVersion" позволяет выбрать, какой PHP будет использоваться для запуска и отладки проекта.

            Можно определить больше конфигураций запуска, каждая с другой версией PHP. В то время как рабочая область предполагает наличие одной версии PHP за раз (см. параметр php.version), конфигурация запуска может использовать конкретный PHP для встроенного веб-сервера или консольного приложения.

            Пример:

            Примечание. В этом примере предполагается, что PHP 8.0 установлен на локальном компьютере.

            Когда я начинаю новый проект в эти дни, я создаю следующий файл launch.json и помещаю его в папку .vscode в корне моего проекта.

            Это превращает Visual Studio Code в среду, которая дает мне все необходимое для создания веб-продукта, не выходя из нее. Если вы хотите попробовать это, вы можете использовать мое простое ванильное приложение JS ToDo в качестве примера, в котором уже есть правильный файл launch.json.

            Шаг 1. Использование встроенного терминала

            Visual Studio Code имеет встроенный терминал, который позволяет запускать сервер. Вы также можете запускать сценарии сборки или контролировать версии здесь. Хотя встроенный контроль версий, наверное, удобнее.

            Шаг 2. Запуск сеанса отладки браузера

            Активация Run and Debug и запуск сеанса отладки открывает специальный экземпляр браузера для этого проекта. Это означает, что вы каждый раз получаете нетронутый, чистый браузер. Конечно, вы также можете перейти на localhost:8080 в любом другом браузере, если вам нужно полагаться на расширения или данные для входа. Вы можете видеть, что сеанс отладки запущен, когда появляется панель инструментов отладки, а нижняя граница редактора меняет цвет. В моем случае от синего до оранжевого.

            Шаг 3. Открытие инструментов разработчика

            При активации значка "Инструменты разработчика" в Visual Studio Code открываются инструменты разработчика браузера.

            Теперь вы можете делать все, что вы можете делать в браузере, не выходя из контекста редактора. Это позволяет вам вносить изменения в DOM и CSS с помощью инструментов разработчика рядом с исходным кодом.

            Шаг 4. Открытие скринкаста

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

            Шаг 5. Использование функций

            После того, как все это будет запущено, у вас будут все функции, необходимые мне для создания и отладки моего веб-проекта. вы получаете:

            Полное двустороннее взаимодействие между инструментами разработчика и исходным кодом.

            Если вы измените CSS элемента, VS Code перейдет к нужному файлу в вашем проекте и воспроизведет там изменения. Он не будет автоматически сохранять файл. Это сделано для предотвращения автоматического запуска сценариев сборки, и вы, вероятно, захотите попробовать много изменений, прежде чем достигнете желаемого результата. Однако изменения отображаются в прямом эфире в скринкасте.

            Встроенный линтинг вашего кода.

            Если с вашим кодом возникла проблема, код Visual Studio добавит к нему волнистую подчеркивание. Затем вы можете прокрутить этот код и получить информацию, почему это проблема и как ее исправить. Если вы пишете код, он автоматически проверяется, и вы получаете сообщение о том, что что-то не так и как это исправить. Вы также можете использовать панель «Проблемы», чтобы увидеть все проблемы в проекте.

            Консоль браузера в Visual Studio Code

            Консоль отладки в Visual Studio Code теперь является консолью инструментов разработчика вашего браузера. Там вы можете увидеть свои сообщения console.log(). У вас есть полный доступ к объекту окна, и вы можете использовать удобные методы и ярлыки DOM.

            Отладка точки останова

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

            Закрытие сеанса отладки закрывает браузер

            После того, как вы закончите, вы можете нажать кнопку остановки на панели отладки, и все вернется на круги своя. Нет необходимости закрывать окна браузера или сеансы инструментов разработчика.

            Что-нибудь пропало?

            Мы работаем над еще несколькими улучшениями, которые появятся в нескольких следующих версиях. В частности, мы работаем над:

            • Поддержка Sourcemap для отладки файлов Sass/Less
            • Параметры фильтрации отчетов о проблемах
            • Автоматические предложения по исправлению
            • Интеграция в Visual Studio

            Если у вас есть хорошие идеи, свяжитесь со мной или сообщите о проблеме в официальном репозитории GitHub.

            Мои другие работы:

            Тема Криса Хейлманна. Иконки SVG от Дэна Кламмера. Хостинг MediaTemple. При поддержке Coffee и Spotify Radio.

            Читайте также: