JavaScript в Visual Studio
Visual Studio предоставляет различные средства и функции для создания приложений с помощью JavaScript или TypeScript.
- Инструменты Node.js для Visual Studio
- Поддержка TypeScript в Visual Studio
Ссылка
- Справочник по языку JavaScript (MDN)
- TypeScript
- Размещение среды выполнения JavaScript
- Интерфейсы скриптов Windows (архив)
- JScript и VBScript (архив)
Связанный контент
Дополнительные ресурсы
Значок отказа согласно Закону Калифорнии о защите конфиденциальности потребителей (CCPA)
- Светлая
- Темная
- Высокая контрастность
- Предыдущие версии
- Блог
- Участие в доработке
- Конфиденциальность
- Условия использования
- Товарные знаки
- © Microsoft 2024
Дополнительные ресурсы
Значок отказа согласно Закону Калифорнии о защите конфиденциальности потребителей (CCPA)
- Светлая
- Темная
- Высокая контрастность
- Предыдущие версии
- Блог
- Участие в доработке
- Конфиденциальность
- Условия использования
- Товарные знаки
- © Microsoft 2024
Как использовать Visual Studio Code для разработки и отладки Node.js
Ознакомьтесь с инструкциями по разработке и отладке проекта на JavaScript в Node.js с помощью Visual Studio.
Подготовка среды
- Установка Visual Studio Code.
- Установите 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/Azure-Samples/js-e2e-express-mongodb , затем нажмите клавишу ВВОД.
- Выберите (или создайте) локальный каталог, в который нужно клонировать проект.
Установка зависимостей
В этом проекте Node.js сначала необходимо установить все зависимости проекта из npm.
- Нажмите клавиши CTRL + SHIFT + ` , чтобы отобразить интегрированный терминал Visual Studio Code.
- Используйте следующую команду для установки зависимостей:
npm install Переход к файлам и коду проекта
Чтобы ориентироваться в базе кода, поэкспериментируем с возможностями навигации в среде Visual Studio Code.
- Нажмите клавиши CTRL + p.
- Введите .js , чтобы отобразить файлы JavaScript/JSON рядом с родительской папкой каждого файла.
- Выберите файл server.js, который является скриптом запуска приложения.
- Наведите указатель мыши на метку времени в строке 11. Эта возможность быстро проверять переменные, модули и типы в файле полезна во время разработки проектов.
- Щелкнув мышь на переменной , например метку времени , можно просмотреть все ссылки на эту переменную в одном файле. Чтобы просмотреть все ссылки на переменную в проекте, щелкните переменную правой кнопкой мыши и в контекстном меню выберите Найти все ссылки.
Использование функции автозаполнения в mongoDB
- Открытие файла data.js
- В строке 84 введите новое использование переменной db путем ввода db. . Visual Studio Code отображает доступные члены API, доступные в db .
Автозаполнение работает, потому что Visual Studio Code использует TypeScript в фоновом режиме (даже для JavaScript), чтобы передавать информацию о вводе, которая может передаваться в список завершения при вводе. Это автоматическое приобретение типов работает для более чем 2000 сторонних модулей, таких как React, Подчеркивание и Express.
Модули, которые поддерживает эта функция автозаполнения, можно увидеть в созданном сообществом проекте DefinitelyTyped, который является источником для всех определений типов TypeScript.
Выполнение локального приложения Node.js
Когда вы изучили код, пришло время запустить приложение. Чтобы запустить приложение из Visual Studio Code, нажмите клавишу F5 . При запуске кода с помощью F5 (режим отладки) Visual Studio Code запускает приложение и показывает окно консоли отладки, отображающее StdOut для приложения.
Кроме того, консоль отладки подключается к только что запущенному приложению, чтобы вы могли вводить выражения JavaScript, которые будут обрабатываться в приложении. В этой консоли также есть функция автоматического заполнения. Чтобы увидеть это поведение, введите в консоли process.env :
Откройте браузер и перейдите к http://localhost:8080 , чтобы просмотреть запущенное приложение. Введите текст в текстовое поле, чтобы добавить элемент, чтобы получить представление о том, как работает приложение.
Отладка локального приложения Node.js
Кроме того что в Visual Studio Code можно запустить приложение и взаимодействовать с ним через консоль, вы также можете задавать точки останова непосредственно в коде. Например, введите CTRL + P , чтобы отобразить средство выбора файлов. После отображения средства выбора файлов и выберите файл server.js .
Задайте точку останова в строке 53, которая является оператором if в маршруте для добавления нового элемента. Чтобы задать точку останова, щелкните область слева от номера строки в редакторе, как показано на следующем рисунке.
Помимо стандартных точек останова, средство Visual Studio Code поддерживает условные точки останова, которые позволяют указать время остановки приложения. Чтобы задать условную точку останова, щелкните правой кнопкой мыши область слева от строки, в которой нужно приостановить выполнение, выберите Add Conditional Breakpoint (Добавить условную точку останова) и укажите выражение JavaScript (например, foo = «bar» ) или число операций выполнения, определяющих условие, при котором приложение должно быть остановлено.
После установки точки останова вернитесь в работающее приложение в браузере и добавьте запись. Это действие немедленно приводит к приостановке выполнения приложения в строке 28, в которой задана точка останова:
Когда приложение будет приостановлено, можно навести указатель мыши на выражения кода, чтобы просмотреть их текущие значения, проверить локальные переменные или контрольные значения и стек вызовов, а также использовать панель инструментов отладки для пошагового выполнения кода. Нажмите клавишу 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«.
Добавление новой конфигурации запуска для 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 для запуска.
Выполнение конфигурации запускает приложение 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), можно использовать тот же рабочий процесс (после установки соответствующих расширений для языка или платформы).
Следующие шаги
Создание проекта Node.js [6 из 26]
Демонстрация: быстрая инициализация нового проекта Node.js с помощью интерфейса командной строки NPM.
Полный курс «Intro to Node.js» в Microsoft Learn: https://aka.ms/LearnNode.js
Просмотрите всю серию: https://aka.ms/NodeBeginnerSeries
Дополнительные ресурсы:
— Visual Studio Code: https://code.visualstudio.com
— Серия начинающих в JavaScript: https://aka.ms/JSBeginnerSeries
#NodeJS #Tutorial #Beginners #JavaScript #Express
Демонстрация: быстрая инициализация нового проекта Node.js с помощью интерфейса командной строки NPM.
Полный курс «Intro to Node.js» в Microsoft Learn: https://aka.ms/LearnNode.js
Просмотрите всю серию: https://aka.ms/NodeBeginnerSeries
Дополнительные ресурсы:
Разработка кода JavaScript и TypeScript в Visual Studio без решений или проектов
Начиная с Visual Studio 2017 вы можете разрабатывать код без проектов и решений. Вы можете открыть папку кода и сразу же приступить к работе в полнофункциональном редакторе, используя IntelliSense, поиск, рефакторинг, отладку и многое другое. Помимо этих функций, в инструменты Node.js для Visual Studio добавлена поддержка сборки файлов TypeScript, управления пакетами npm и выполнения сценариев npm.
Чтобы приступить к работе, выберите Файл>Открыть>Папку на панели инструментов. Обозреватель решений отображает все файлы в папке, и можно открыть любой из файлов, чтобы начать редактирование. В фоновом режиме Visual Studio индексирует файлы, предоставляя функции npm, сборки и отладки.
Прежде чем использовать проект Open Folder, попробуйте создать решение из существующего кода Node.js. В некоторых сценариях этот метод обеспечивает лучшую поддержку функций в Visual Studio. Чтобы создать проект, выберите файл нового проекта > JavaScript > из существующего кода Node.js, а затем выберите папку проекта > в качестве источника.
Необходимые компоненты
- Visual Studio 2017 версии 15.8 или более поздней версии
- Необходимо установить рабочую нагрузку разработки Visual Studio Node.js
Интеграция npm
Если открытая папка содержит файл package.json, щелкните правой кнопкой мыши package.json, чтобы открыть контекстное меню для npm.
В контекстном меню вы можете управлять пакетами, установленными npm, так же, как вы управляете пакетами npm при использовании файла проекта.
Кроме того, в меню можно выполнять сценарии, определенные в элементе scripts в package.json. Эти скрипты будут использовать версию Node.js, доступную в переменной среды PATH . Скрипты выполняются в новом окне. Это отличный способ сборки и выполнения скриптов.
Сборка и отладка
package.json
Если package.json в папке указывает элемент main , команда отладки будет доступна в контекстном меню для package.json. При нажатии этой кнопки запускается node.exe с указанным скриптом в качестве аргумента.
Файлы JavaScript
Вы можете отлаживать файлы JavaScript, щелкнув файл правой кнопкой мыши и выбрав Отладка в контекстном меню. Запустится node.exe с этим файлом JavaScript в качестве аргумента.
Если вы не видите параметр меню отладки , возможно, потребуется создать проект из существующего кода Node.js, как описано ранее.
Файлы TypeScript и tsconfig.json
Если в папке нет файла tsconfig.json, щелкните правой кнопкой мыши файл TypeScript, чтобы открыть команды контекстного меню и скомпилировать и отладить этот файл. При использовании этих команд сборка и отладка выполняются с помощью tsc.exe с параметрами по умолчанию. (Вам нужно создать файл до отладки.)
При создании кода TypeScript мы используем последнюю версию, установленную в C:\Program Files (x86)\Microsoft SDKs\TypeScript .
Если в папке есть файл tsconfig.json, щелкните правой кнопкой мыши файл TypeScript, чтобы открыть команду меню для отладки этого файла TypeScript. Этот параметр отображается только в том случае, если в tsconfig.json не указан outFile . Если outFile указан, для отладки этого файла щелкните правой кнопкой мыши tsconfig.json и выберите нужный параметр. Файл tsconfig.json также предоставляет параметр сборки для указания параметров компилятора.
Модульные тесты
Вы можете включить интеграцию модульных тестов в Visual Studio, указав тестовый корень в файле package.json:
Средство запуска тестов перечисляет локально установленные пакеты, чтобы определить, какие платформы тестирования использовать. Если ни одна из поддерживаемых платформ не распознается, выбирается средство выполнения тестов по умолчанию ExportRunner. Другие поддерживаемые платформы:
- Mocha (mochajs.org)
- Jasmine (Jasmine.github.io)
- Tape (github.com/substack/tape)
- Jest (jestjs.io)
После открытия обозревателя тестов (выберите Тест>Windows>Обозреватель тестов) Visual Studio обнаруживает и отображает тесты.
Средство выполнения тестов перечисляет только файлы JavaScript в тестовом корне. Если ваше приложение написано в TypeScript, вам нужно сначала создать их.