Как запустить код в visual studio code
Перейти к содержимому

Как запустить код в visual studio code

  • автор:

Разработка кода в Visual Studio без использования проектов и решений

Вы можете открыть код практически из любого типа проекта на основе каталога без необходимости в решении или файле проекта. Это значит, что вы можете, например, клонировать репозиторий GitHub, сразу открыть его в Visual Studio и начать разработку, не создавая решение или проект. Если потребуется, вы можете указать настраиваемые задачи сборки и параметры запуска, используя простые файлы JSON.

Когда вы открываете в Visual Studio файлы кода, в обозревателе решений отображаются все имеющиеся в папке файлы. Щелкните любой из них, чтобы приступить к изменению. В фоновом режиме Visual Studio индексирует файлы для поддержки функций навигации, рефакторинга и IntelliSense. Когда вы изменяете, создаете и удаляете файлы, Visual Studio автоматически отслеживает эти изменения и постоянно обновляет индекс IntelliSense. Код отображается с цветной маркировкой синтаксиса, и в большинстве случаев поддерживается базовое завершение операторов IntelliSense.

Если вы ищете сведения, относящиеся к VS Code, перейдите на страницу «Начало работы с Visual Studio Code «.

Открытие любого кода

Ниже представлены способы открытия кода в Visual Studio:

  • В строке меню Visual Studio выберите Файл>Открыть>Папка и перейдите в расположение кода.
  • В контекстном меню папки с кодом выберите команду Открыть в Visual Studio.
  • Выберите ссылку Открыть папку в начальном окне.

Важно! Не все разновидности кода можно открыть с помощью ссылки Открыть папку в начальном окне Visual Studio. Например, если файл кода был сохранен как часть решения( другими словами, в файле .sln) необходимо использовать один из других вариантов, перечисленных здесь, чтобы открыть код.

Открытие нескольких папок

Начиная с Visual Studio 2022 версии 17.9 ( предварительная версия 1) можно указать несколько папок, которые будут открываться в Visual Studio. Открытие нескольких папок особенно полезно в репозиториях кода с большим количеством несвязанного кода, и разработчику требуется только подмножество для выполнения некоторых действий.

  • В строке меню Visual Studio выберите команду «Открыть>рабочую область«>и перейдите к расположению .code-workspace файла.
  • Ожидается, .code-workspace что сам файл будет файлом. Схема JSON, которая выглядит следующим образом:
< "folders" : [ < "path" : "some\\child\\foo", "name" : "The Foo" >, < "path" : "..\\..\\some\\unrelated\\bar" >, < "path" : "C:\\a\\full\\path\\baz" >, < "path" : "$\\foobar" > ] > 

Каждое «path» значение может быть любым относительным путем или корневым путем. Корневые пути должны находиться в той же букве диска. Переменные среды можно использовать с синтаксисом $ . Свойство «name» можно использовать для создания визуального псевдонима для папки в Обозреватель решений.

Открытие кода из клонированного репозитория GitHub

В примере ниже объясняется, как клонировать репозиторий GitHub, а затем открыть содержащийся в нем код в Visual Studio. Для этого необходимо иметь учетную запись GitHub и установленный в системе Git для Windows. Дополнительные сведения см. в статье «Создание учетной записи GitHub для использования с Visual Studio и Git для Windows «.

GitHub clone button

  1. Перейдите в репозиторий, который нужно клонировать, на сайте GitHub.
  2. Нажмите кнопку Clone or Download (Клонировать или скачать), а затем в раскрывающемся меню выберите Copy to Clipboard (Копировать в буфер обмена), чтобы копировать защищенный URL-адрес для репозитория GitHub.
Использование Git в Visual Studio

Начиная с Visual Studio 2019 версии 16.8, мы представили новый, оптимизированный интерфейс Git, который можно использовать для взаимодействия с файлами на GitHub. Дополнительные сведения см. в документации по управлению версиями Visual Studio.

Использование команды Обозреватель в Visual Studio

Вы по-прежнему можете использовать командную Обозреватель в Visual Studio 2022 и Visual Studio 2019 версии 16.8 и более поздних версий. Однако вы можете упростить использование нового интерфейса Git. Дополнительные сведения см. в статье о том, как Visual Studio упрощает управление версиями с помощью Git.

  1. Чтобы открыть Team Explorer, в Visual Studio выберите вкладку Team Explorer. Если эта вкладка не отображается, откройте ее, выбрав Вид>Team Explorer.
  2. В Team Explorer выберите команду Клонировать, которая располагается в разделе Локальные репозитории Git, а затем вставьте URL-адрес страницы GitHub в текстовое поле. Clone the project
  3. Нажмите кнопку Клонировать, чтобы клонировать файлы проекта в локальный репозиторий Git. Этот процесс может занять несколько минут в зависимости от размера репозитория.
  4. После клонирования репозитория в систему выберите в Team Explorer команду Открыть в контекстном меню клонированного репозитория. Cloned repo
  5. Чтобы просмотреть файлы в обозревателе решений, выберите команду Показать представление папки. Show folder viewТеперь вы можете просмотреть папки и файлы в клонированном репозитории, а также просмотреть код и выполнить поиск по нему в редакторе кода Visual Studio, где доступна цветовая маркировка синтаксиса и другие возможности.

Выполнение и отладка кода

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

Настройка Visual Studio для выполнения кода будет разной для разных типов кода и используемых средств сборки.

Базы кода на основе MSBuild

Базы кода на основе MSBuild могут иметь несколько конфигураций сборки, и все они перечисляются в раскрывающемся списке кнопки запуска. Выберите файл, который нужно использовать в качестве автозапускаемого элемента, и нажмите кнопку Запустить, чтобы начать отладку.

Для баз кода C# и Visual Basic необходимо установить рабочую нагрузку Разработка классических приложений .NET. Для баз кода C++ необходимо установить рабочую нагрузку Разработка классических приложений на C++.

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

Если для вашей базы кода применяются пользовательские средства сборки, нужно указать в Visual Studio правила сборки кода с помощью задач сборки, которые определяются в файле JSON. Дополнительные сведения см. в статье Настройка задач сборки и отладки для режима разработки «Открытая папка».

Базы кода с кодом Python или JavaScript

Если база кода содержит код на Python или JavaScript, вам не нужно настраивать файлы JSON, но нужно установить соответствующие рабочие нагрузки. Также следует настроить скрипт запуска:

Node.js and Python development workloads

  1. Установите рабочую нагрузку Разработка Node.js или Разработка на Python. Для этого последовательно выберите Средства>Получить средства и компоненты или закройте Visual Studio и запустите Visual Studio Installer.
  2. В обозревателе решений щелкните правой кнопкой мыши файл JavaScript или Python и в контекстном меню выберите команду Назначить автозапускаемым элементом.
  3. Нажмите кнопку Запустить, чтобы начать отладку.

Базы кода с кодом C++

Сведения о том, как открыть код C++ в Visual Studio без создания решений или проектов, вы найдете в статье Open Folder projects for C++ (Проекты «Открыть папку» для C++).

Базы кода, содержащие проект Visual Studio

Если папка с кодом содержит проект Visual Studio, вы можете назначить этот проект в качестве автозапускаемого элемента.

Set project as startup item

Текст кнопки запуска изменится на имя проекта, назначенного автозапускаемым элементом.

Project on Start button

Связанный контент

  • Настройка задач сборки и отладки для режима разработки «Открытая папка»
  • Open Folder projects for C++ (Проекты «Открыть папку» для C++)
  • CMake projects in C++ (Проекты CMake в C++)
  • Написание кода в редакторе кода и текста

Шаг 2. Написание и запуск кода

Хотя управление файлами проекта осуществляется в обозревателе решений, с содержимым файлов, например файлов исходного кода, вы обычно работаете в окне редактора. Редактор распознает тип редактируемого файла с учетом контекста. Он также определяет язык программирования (благодаря расширению файла) и обеспечивает характерные для этого языка возможности, например раскраску синтаксических конструкций и автоматическое завершение с помощью IntelliSense.

  1. При создании проекта «Python Application» в редакторе Visual Studio откроется пустой файл по умолчанию с именем PythonApplication1.py.
  2. В редакторе начните вводить print(«Hello, Visual Studio») . По мере ввода функция IntelliSense в Visual Studio покажет варианты автозавершения. Выделенный параметр в раскрывающемся списке — это вариант завершения по умолчанию, который применяется при нажатии клавиши TAB. Завершения очень удобны при использовании длинных инструкций или идентификаторов. IntelliSense auto-completion popup
  3. Функция IntelliSense отображает различные сведения на основе используемого оператора, вызываемой функции и т. д. Если в функции print ввести ( после print для указания вызова функции, будет показана полная информация об использовании этой функции. Во всплывающем окне IntelliSense также полужирным шрифтом выделяется текущий аргумент (в этом случае это value): IntelliSense auto-completion popup for a function
  4. Допишите оператор, чтобы он соответствовал следующему коду:

print("Hello, Visual Studio") 

IntelliSense syntax coloring and error highlighting

Обратите внимание на раскраску синтаксических конструкций, которая позволяет отличить оператор print от аргумента «Hello Visual Studio» . Можно ненадолго удалить последний символ » в строке. Обратите внимание, что код, содержащий синтаксические ошибки, подчеркивается красной линией в Visual Studio. Снова введите символ » , чтобы исправить ошибку.

Совет Visual Studio предоставляет полный контроль над внешним видом и поведением среды разработки, что позволяет настроить ее, как вам нравится. Выберите пункт меню Сервис>Параметры и изучите параметры на вкладках Среда и Текстовый редактор. По умолчанию вы видите ограниченный набор параметров. Чтобы просмотреть все параметры для каждого языка программирования, щелкните Показать все параметры внизу диалогового окна.

  • Чтобы выполнить весь написанный код, нажмите клавиши CTRL+F5 или выберите команду меню Отладка>Запуск без отладки. Если в коде все еще есть ошибки, в Visual Studio будут выведены предупреждения.
  • Во время выполнения программы в окне консоли будут отображаться результаты. Это напоминает запуск интерпретатора Python с файлом PythonApplication1.py из командной строки. Чтобы закрыть это окно и вернуться в редактор Visual Studio, нажмите любую клавишу. Output for the first run of the program
  • Помимо инструкций и функций, IntelliSense выводит варианты для завершения операторов Python import и from . Эти варианты позволяют легко узнать, какие модули доступны в вашей среде и какие члены доступны в определенном модуле. В редакторе удалите строку print и начните вводить import . Список модулей появляется после ввода пробела: IntellSense showing available modules for an import statement
  • Завершите строку, введя или выбрав sys .
  • В следующей строке введите from , чтобы снова вывести список модулей: IntellSense showing available modules for a from statement
  • Выберите или введите math , а затем пробел и import , чтобы отобразился список элементов модуля: IntellSense showing module members
  • Наконец импортируйте элементы cos и radians . Обратите внимание, как для каждого из них будут выводиться варианты автозавершения. По завершении код должен выглядеть следующим образом:

    import sys from math import cos, radians 

    Совет Принцип функции завершения заключается в следующем — по мере ввода появляются подстроки со словами, в которых совпадают части или буквы в начале слова, и даже отображаются пропущенные символы. Дополнительные сведения см. в руководстве по редактированию кода.

    for i in range(360): print(cos(radians(i))) 

    Как пользоваться Visual Studio Code

    Как пользоваться Visual Studio Code

    Visual Studio Code – это один из наиболее популярных редакторов кода, разработанный корпорацией Microsoft. Он распространяется в бесплатном доступе и поддерживается всеми актуальными операционными системами: Windows, Linux и macOS. VS Code представляет собой обычный текстовый редактор с возможностью подключения различных плагинов, что дает возможность работать со всевозможными языками программирования для разработки любого IT-продукта.

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

    Установка Visual Studio Code

    С установкой среды не должно возникнуть никаких проблем, но давайте все же проведем небольшой ликбез. Выполним несколько действий:

    1. Переходим на официальный сайт и загружаем установочный файл.Visual Studio Code скачать бесплатно
    2. Следующим шагом запускаем установочник и ставим редактор кода на компьютер. В блоке «Выберите дополнительные задачи» рекомендую отметить два пункта, позволяющие запускать файлы через выпадающее меню – так вы сможете быстро открыть код в VS Code.Установка Virtual Studio Code

    На этом установка завершена. Теперь мы можем использовать редактор кода по назначению. Обычно с этим не должно возникнуть никаких проблем, однако на слабых машинах запуск утилиты часто прерывается. Вылечить такой недуг можно с помощью добавления нового значения к пути ярлыка. Для этого откроем его свойства через правый клик мыши и в графе «Объект» пропишем —disable-gpu.

    Virtual Studio Code запуск на слабом пк

    Готово! Теперь программа должна работать на любом компьютере.

    Комьюнити теперь в Телеграм
    Подпишитесь и будьте в курсе последних IT-новостей

    Интерфейс Visual Studio Code

    При первом запуске перед нами отобразится окно приветствия, через которое можно получить быстрый доступ к ранее запущенным проектам либо создать новые. Весь интерфейс на английском языке (всего в несколько кликов он переводится на русский, но об этом чуть позже). Давайте пока разберемся с интерфейсом: откроем для примера файл с кодом, посмотрим, как его идентифицирует программа без предварительных настроек, и разберем каждый блок утилиты.

    Запустить файл с кодом мы можем через правый клик мыши -> Открыть с помощью Code. Файл можно открыть и в программе: для этого в верхнем правом углу выбираем «File» и жмем «Open File…». После этого переходим в нужную директорию и выбираем файл.

    Как открыть файл в Visual Studio Code

    В результате перед нами отобразится окно с кодом из файла. Давайте визуально разделим интерфейс на блоки и рассмотрим каждый из них более детально.

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

    Окно Visual Studio Code

    Следующий блок – левая панель управления, включающая в себя 5 основных вкладок: «Проводник», «Поиск», «Система управления версиями», «Запуск кода» и «Расширения». Первая предоставляет пользователю возможность просматривать содержимое проекта и быстро перемещаться внутри него.

    Проводник в Visual Studio Code

    Вторая вкладка – поиск. Используется для нахождения слов в документе. Он также может быть запущен с помощью комбинации клавиш «CTRL+SHIFT+F». Алгоритм использования довольно прост – вводим название в поиск и смотрим результат.

    Поиск в Visual Studio Code

    Система управления версиями – предназначена для взаимодействия с git.

    Git в Visual Studio Code

    Запустить и проверить работоспособность кода мы можем в следующей вкладке:

    Как сделать отладку в Visual Studio Code

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

    Расширения в Visual Studio Code

    Следующий блок – нижний статус-бар. В нем отображается общая информация о состоянии программы. Обратите внимание, что VS Code автоматически определяет язык программирования и информирует нас об этом.

    Статус бар Visual Studio Code

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

    Как разделить код на два столбца в Visual Studio Code

    Как видите, если пройтись по интерфейсу программы, то она уже не кажется такой сложной. Чтобы сделать все еще проще, давайте проведем русификацию всех элементов интерфейса. О том, как это сделать, поговорим далее.

    Русификация Visual Studio Code

    Чтобы провести русификацию программы, открываем вкладку с расширениями и прописываем запрос vscode-language-pack-ru. В результате будет отображен новый элемент с кнопкой «Install» – кликаем по ней и ожидаем завершения установки.

    Как русифицировать Visual Studio Code

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

    Русификация Visual Studio Code

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

    Внешний вид

    Мы можем полностью изменить цветовую схему утилиты. Чтобы это сделать, воспользуемся комбинацией клавиш «CTRL+SHIFT+P» и введем запрос «theme». В отобразившемся списке выберем «Параметры: Цветовая тема».

    Как сменить тему в Visual Studio Code

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

    Как поменять тему в Visual Studio Code

    После применения темы интерфейс примет следующий вид:

    Солнечная тема в Visual Studio Code

    Обратите внимание, что это не весь список тем – вы можете установить и другие. Для этого пролистайте в самый низ списка и выберите «Установить дополнительные цветовые темы…». После этого в левой части отобразится дополнительный блок с доступными цветовыми решениями.

    Как изменить тему в Visual Studio Code

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

    Управление проектами

    По умолчанию Visual Studio Code поддерживает работу с несколькими проектами, однако перемещаться между ними не очень удобно. Для удобства обычно используют плагин под названием Project Manager. С его помощью открывается возможность перемещения между рабочими областями всего в один клик. Установка проходит через магазин расширений, о котором мы говорили ранее. После того как менеджер проектов будет установлен, в левой панели управления появится новая вкладка для работы с плагином.

    Плагин Project Manager

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

    Автоформатирование кода

    Один из важных этапов программирования – умение приводить все к единому виду с правильными отступами. Для таких задач в VS Code есть специальные плагины, позволяющие форматировать весь текстовый документ. Это такие расширения, как PHP-CS-Fixer для PHP, Prettier для JS/HTML/CSS и другие.

    Рассмотрим, как форматируется код, написанный на JavaScript:

    1. Возьмем для примера функцию, отступы в которой выстроены случайным образом.Как отформатировать код в Visual Studio Code
    2. Устанавливаем плагин Prettier через магазин расширений и открываем документ, который нужно отформатировать. Зажимаем комбинацию клавиш «CTRL+SHIFT+P» и вводим запрос «Format Document».Плагин Prettier для Virtual Studio Code
    3. Смотрим на код и видим, что он преобразился и принял аккуратный вид.Форматирование кода в Visual Studio Code

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

    Автодополнение

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

    По умолчанию функция автодополнения в Visual Studio Code доступна только для некоторых языков. Для прочих языков программирования существуют дополнительные пакеты с окончанием «intellisense».

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

    Как включить функцию автодополнения в Visual Studio Code

    Рекомендую установить PHP Intellisense, CSS Intellisense и Path Intellisense.

    Управление Vim

    Vim – это свободный текстовый редактор, работающий на основе vi. По умолчанию он установлен на каждой операционной системе семейства Unix. Кроме того, он доступен и в Visual Studio Code. Для работы с ним потребуется установить расширение с аналогичным названием:

    Управление Vim в Visual Studio Code

    Теперь мы можем перемещаться по файлу клавишами h, j, k, l, использовать Esc и сохранять файл командой :w.

    Отладка кода

    Для того чтобы запустить код в VS Code, нам нужно воспользоваться одним из расширений. Например, для JavaScript подойдет Debugger for Chrome. Узнать, какое расширение необходимо для конкретного языка, можно через «Выполнить» -> «Установить дополнительные отладчики…».

    Расширения для отладки кода в Visual Studio Code

    В результате в левой части окна будет отображен список доступных плагинов – найдите в нем подходящий для вас и следуйте инструкции.

    Как выполнить отладку кода в Visual Studio Code

    После того как нужный плагин будет установлен, можно запускать отладку кода. Для этого достаточно открыть пункт «Выполнить» и нажать на кнопку «Запустить отладку». Также это можно сделать с помощью клавиши «F5».

    Запуск отладки в Visual Studio Code

    С помощью плагинов мы можем отладить код, написанный на любом языке программирования.

    Заключение

    Сегодня мы разобрали функционал инструмента Visual Studio Code. Данная среда хороша не только для профессионалов, но и для новичков, изучающих основы программирования. Одно из преимуществ программы – это минимальное требование к железу: запустить программу можно практически на любом компьютере.

    Надеюсь, что работа в VS Code больше не будет для вас проблемой, а активные проекты ждет успех. Удачи!

    Как использовать Visual Studio Code для разработки и отладки Node.js

    Ознакомьтесь с инструкциями по разработке и отладке проекта на JavaScript в Node.js с помощью Visual Studio.

    Подготовка среды

    1. Установка Visual Studio Code.
    2. Установите git. Интеграция Visual Studio Code с git предоставляет возможность управления Системой управления версиями на боковой панели.
    3. Добавьте необходимые переменные среды. В примерах этой статьи используется строка подключения базы данных MongoDB. Если у вас нет доступной базы данных mongoDB, вы можете:
      • Запустить этот локальный проект в конфигурации с несколькими контейнерами. При такой конфигурации один из контейнеров должен являться базой данных mongoDB. Установите Docker и расширение Remote — Containers, чтобы получить конфигурацию с несколькими контейнерами, при которой на одном контейнере будет выполнятся локальная база данных mongoDB.
      • Выберите создание ресурса Azure Cosmos DB для базы данных MongoDB. Дополнительные сведения см. в этом учебнике.

    Клонирование проекта

    Чтобы приступить к работе, клонируйте пример проекта, выполнив следующие действия.

    1. Откройте Visual Studio Code.
    2. Нажмите клавишу F1, чтобы отобразить палитру команд.
    3. В командной строке палитры введите gitcl , выберите команду Git: Клонировать и нажмите клавишу ВВОД. gitcl command in the Visual Studio Code command palette prompt
    4. Если появится запрос ввести URL-адрес репозитория, введите https://github.com/Azure-Samples/js-e2e-express-mongodb , затем нажмите клавишу ВВОД.
    5. Выберите (или создайте) локальный каталог, в который нужно клонировать проект. Partial screenshot of Visual Studio Code showing the file explorer for a Node J S and Mongo D B project.

    Установка зависимостей

    В этом проекте Node.js сначала необходимо установить все зависимости проекта из npm.

    1. Нажмите клавиши CTRL + SHIFT + ` , чтобы отобразить интегрированный терминал Visual Studio Code.
    2. Используйте следующую команду для установки зависимостей:

    npm install 

    Переход к файлам и коду проекта

    Чтобы ориентироваться в базе кода, поэкспериментируем с возможностями навигации в среде Visual Studio Code.

    1. Нажмите клавиши CTRL + p.
    2. Введите .js , чтобы отобразить файлы JavaScript/JSON рядом с родительской папкой каждого файла.
    3. Выберите файл server.js, который является скриптом запуска приложения.
    4. Наведите указатель мыши на метку времени в строке 11. Эта возможность быстро проверять переменные, модули и типы в файле полезна во время разработки проектов. Discover type in Visual Studio Code with hover help
    5. Щелкнув мышь на переменной , например метку времени , можно просмотреть все ссылки на эту переменную в одном файле. Чтобы просмотреть все ссылки на переменную в проекте, щелкните переменную правой кнопкой мыши и в контекстном меню выберите Найти все ссылки. Screenshot of Visual Studio Code with the `timestamp` variable highlighted.

    Использование функции автозаполнения в mongoDB

    1. Открытие файла data.js
    2. В строке 84 введите новое использование переменной db путем ввода db. . Visual Studio Code отображает доступные члены API, доступные в db .

    Full screenshot of Visual Studio Code showing the code completion pop-up window highlighted with a red box.

    Автозаполнение работает, потому что Visual Studio Code использует TypeScript в фоновом режиме (даже для JavaScript), чтобы передавать информацию о вводе, которая может передаваться в список завершения при вводе. Это автоматическое приобретение типов работает для более чем 2000 сторонних модулей, таких как React, Подчеркивание и Express.

    Модули, которые поддерживает эта функция автозаполнения, можно увидеть в созданном сообществом проекте DefinitelyTyped, который является источником для всех определений типов TypeScript.

    Выполнение локального приложения Node.js

    Когда вы изучили код, пришло время запустить приложение. Чтобы запустить приложение из Visual Studio Code, нажмите клавишу F5 . При запуске кода с помощью F5 (режим отладки) Visual Studio Code запускает приложение и показывает окно консоли отладки, отображающее StdOut для приложения.

    Monitoring an app

    Кроме того, консоль отладки подключается к только что запущенному приложению, чтобы вы могли вводить выражения JavaScript, которые будут обрабатываться в приложении. В этой консоли также есть функция автоматического заполнения. Чтобы увидеть это поведение, введите в консоли process.env :

    Typing code into the Debug console

    Откройте браузер и перейдите к http://localhost:8080 , чтобы просмотреть запущенное приложение. Введите текст в текстовое поле, чтобы добавить элемент, чтобы получить представление о том, как работает приложение.

    Отладка локального приложения Node.js

    Кроме того что в Visual Studio Code можно запустить приложение и взаимодействовать с ним через консоль, вы также можете задавать точки останова непосредственно в коде. Например, введите CTRL + P , чтобы отобразить средство выбора файлов. После отображения средства выбора файлов и выберите файл server.js .

    Задайте точку останова в строке 53, которая является оператором if в маршруте для добавления нового элемента. Чтобы задать точку останова, щелкните область слева от номера строки в редакторе, как показано на следующем рисунке.

    Setting a breakpoint within Visual Studio Code

    Помимо стандартных точек останова, средство Visual Studio Code поддерживает условные точки останова, которые позволяют указать время остановки приложения. Чтобы задать условную точку останова, щелкните правой кнопкой мыши область слева от строки, в которой нужно приостановить выполнение, выберите Add Conditional Breakpoint (Добавить условную точку останова) и укажите выражение JavaScript (например, foo = «bar» ) или число операций выполнения, определяющих условие, при котором приложение должно быть остановлено.

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

    Visual Studio Code pausing execution on a breakpoint

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

    Локальная полностековая отладка в Visual Studio Code

    Интерфейсная и серверная часть записываются с помощью JavaScript. То есть, если вы выполняете отладку серверного кода (Node/Express), в определенный момент может потребоваться отладить код интерфейса (Angular).

    Хотя вы смогли запустить и отладить код Node.js без какой-либо конфигурации Visual Studio Code, для отладки интерфейсного веб-приложения необходимо использовать файл launch.json , который указывает Visual Studio Code, как запустить приложение.

    Этот пример приложения включает launch.json следующие параметры отладки:

    < // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ < "name": "Test", "request": "launch", "runtimeArgs": [ "run-script", "test" ], "runtimeExecutable": "npm", "skipFiles": [ "/**" ], "type": "pwa-node" >, < "name": "Start", "request": "launch", "runtimeArgs": [ "run-script", "start" ], "runtimeExecutable": "npm", "skipFiles": [ "/**" ], "type": "pwa-node" > ] > 

    Средство Visual Studio Code определило, что скриптом запуска приложения является server.js.

    Открыв файл launch.json, выберите «Добавить конфигурацию» (в правом нижнем углу) и выберите Chrome: «Запустить с помощью userDataDir«.

    Adding a Chrome configuration to Visual Studio Code

    Добавление новой конфигурации запуска для Chrome позволяет отладить внешний код JavaScript.

    Наведите указатель мыши на любой заданный параметр, чтобы увидеть его функцию. Кроме того, обратите внимание, что Visual Studio Code автоматически определяет URL-адрес приложения. Задайте для свойства webRoot значение $/public , чтобы отладчик Chrome знал, где найти внешние ресурсы приложения:

    < "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:8080", "webRoot": "$/public", "userDataDir": "$/.vscode/chrome" > 

    Чтобы запустить и выполнить отладку внешнего и внутреннего кода одновременно, необходимо создать комплексную конфигурацию запуска, которая сообщает средству Visual Studio Code, какой набор конфигураций нужно выполнять параллельно.

    Добавьте следующий фрагмент кода в качестве свойства верхнего уровня в файл launch.json (как одноуровневое свойство имеющегося свойства configurations).

    "compounds": [ < "name": "Full-Stack", "configurations": ["Launch Program", "Launch Chrome"] >] 

    Строковые значения, указанные в массиве compounds.configurations, ссылаются на имя отдельных записей в списке конфигураций. Если вы уже изменили эти имена, внесите соответствующие изменения в массив. Например, перейдите на вкладку «Отладка» и выберите для выбранной конфигурации значение Full-Stack (Полный стек) (имя составного конфигурации) и нажмите клавишу F5 для запуска.

    Running a configuration in Visual Studio Code

    Выполнение конфигурации запускает приложение Node.js (это можно увидеть в выходных данных консоли отладки) и Chrome (который настроен для перехода к приложению Node.js по адресу http://localhost:8080 ).

    Нажмите клавиши CTRL+P и введите (или выберите) значение todos.js, которое является основным контроллером Angular внешней части приложения.

    Установите точку останова на строке 11, которая является точкой входа для создаваемой записи из списка задач.

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

    Debugging front-end code in Visual Studio Code

    Как и во время отладки Node.js, можно навести указатель мыши на выражения, просмотреть локальные переменные и контрольные значения, обработать выражения в консоли и т. д.

    Есть две прохладные вещи, которые следует заметить:

    • В области Стек вызовов отображаются два разных стека: Node и Chrome. При этом указано, какой из стеков приостановлен.
    • Вы можете переходить между внешним и внутренним кодом, нажав клавишу F5, чтобы запустить и активировать точку останова, заданную ранее в маршруте Express.

    После этого вы можете эффективно отладить внешний и внутренний код JavaScript или код полного стека JavaScript непосредственно в Visual Studio Code.

    Концепция комплексного отладчика не ограничивается только двумя целевыми процессами и кодом JavaScript. Поэтому, если вы работаете с приложением-микрослужбой (это может быть polyglot), можно использовать тот же рабочий процесс (после установки соответствующих расширений для языка или платформы).

    Следующие шаги

  • Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *