Launch json visual studio code как настроить

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

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

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

Установите git. Интеграция Visual Studio Code с git предоставляет возможность управления Системой управления версиями на боковой панели.

Получите строку подключения к базе данных mongoDB.

Если у вас нет доступной базы данных mongoDB, вы можете:

• Запустить этот локальный проект в конфигурации с несколькими контейнерами. При такой конфигурации один из контейнеров должен являться базой данных mongoDB. Установите Docker и расширение Remote — Containers, чтобы получить конфигурацию с несколькими контейнерами, при которой на одном контейнере будет выполнятся локальная база данных mongoDB.
• Создать ресурс Azure Cosmos DB для базы данных mongoDB. Дополнительные сведения см. в этом учебнике.

Клонирование примера проекта на локальный компьютер

Чтобы приступить к работе, скачайте пример проекта, как описано ниже.

Откройте Visual Studio Code.

Нажмите клавишу F1, чтобы отобразить палитру команд.

В строке палитры команд введите gitcl , выберите команду Git: клонировать и нажмите клавишу ВВОД.

Если появится запрос ввести URL-адрес репозитория, введите https://github.com/scotch-io/node-todo , затем нажмите клавишу ВВОД.

Выберите (или создайте) локальный каталог, в который нужно клонировать проект.

Использование встроенного терминала bash для установки зависимостей

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

Нажмите клавишу CTRL+ ` , чтобы отобразить встроенный терминал Visual Studio Code.

Введите yarn и нажмите клавишу ВВОД.

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

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

Нажмите клавиши CTRL+P.

Введите .js , чтобы отобразить файлы JavaScript/JSON рядом с родительской папкой каждого файла.

Выберите файл server.js, который является скриптом запуска приложения.

Наведите указатель мыши на переменную database (импортирована в строку 6), чтобы просмотреть ее тип. Эта возможность быстро проверять переменные, модули и типы в файле удобна при разработке проектов.

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

Вы также можете просмотреть определение переменной, даже если оно находится в другом файле. Например, щелкните правой кнопкой мыши database.localUrl (строка 12) и в контекстном меню выберите Показать определение.

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

Строка подключения MongoDB программно задана в объявлении свойства database.localUrl . Выполнив инструкции из этого раздела, вы измените код, чтобы получить строку подключения из переменной среды. Вы также узнаете о функции автозаполнения Visual Studio Code.

Откройте файл server.js.

Если при вводе кода вручную (вместо копирования и вставки) поставить точку после process , Visual Studio Code отобразит список доступных элементов глобального API process Node.js.

Автозаполнение работает, потому что Visual Studio Code использует TypeScript в фоновом режиме (даже для JavaScript), чтобы передавать информацию о вводе, которая может передаваться в список завершения при вводе. Visual Studio Code может определить, что проект является проектом Node.js, и автоматически скачать файл вводимых элементов TypeScript для Node.js из NPM. Файл вводимых элементов позволяет получить автозаполнение для других глобальных значений Node.js, например Buffer и setTimeout , а также все встроенные модули, такие как fs и http .

Кроме встроенных API-интерфейсов Node.js, функция автоматического получения значений также поддерживает более 2000 модулей сторонних производителей, таких как React, Underscore и Express. Например, чтобы не позволить Mongoose аварийно завершать работу приложения, если оно не может подключиться к настроенному экземпляру базы данных MongoDB, вставьте следующую строку кода в строку 13:

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

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

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

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

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

Вы смогли запустить приложение нажатием клавиши F5, так как открытый сейчас файл является файлом JavaScript (server.js). Поэтому Visual Studio Code предполагает, что проект является приложением Node.js. Закройте все файлы JavaScript в Visual Studio Code и нажмите клавишу F5. В Visual Studio Code появится запрос на выбор среды:

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

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

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

Установите точку останова на строке 28, представляющей маршрут Express (вызывается, когда приложение пытается добавить запись из списка задач). Чтобы задать точку останова, щелкните область слева от номера строки в редакторе, как показано на следующем рисунке.

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

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

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

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

Как упоминалось выше, приложение со списком задач — это приложение MEAN, то есть приложение, интерфейс и серверная часть которого написаны с помощью JavaScript. То есть, если вы выполняете отладку серверного кода (Node/Express), в определенный момент может потребоваться отладить код интерфейса (Angular). Для этого в Visual Studio Code есть множество расширений, в том числе встроенная отладка Chrome.

Откройте вкладку Расширения и введите chrome в поле поиска:

Выберите расширение с именем Отладчик для Chrome и выберите Установить. Установив расширение отладки Chrome, щелкните Перезагрузить, чтобы закрыть и снова открыть Visual Studio Code для активации расширения.

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

Создание полностекового файла launch.json для Visual Studio Code

Чтобы создать файл launch.json, откройте вкладку Отладка, выберите значок шестеренки (на нем должна быть небольшая красная точка вверху) и среду node.js.

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

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

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

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

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

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

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

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

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

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

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

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

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

Необходимо обратить внимание на два важных момента.

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

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

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

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

Источник